Benjamin은 저의 입장을 분명히 해달라고 요청했습니다. 그래서 이전 게시물을 편집하고 더 많은 생각을 추가했습니다.
Bob Martin은 Clean Code라는 제목의 훌륭한 책의 저자입니다. 이 책에는 객체와 데이터 구조라고하는 장 (6 장)이 있는데, 여기에는 객체와 데이터 구조의 가장 중요한 차이점과 이들 사이에서 선택해야하는 클레임에 대해 논의하는 것이 매우 좋지 않습니다.
이 혼동은 때때로 반 객체와 반 데이터 구조 인 불행한 하이브리드 구조로 이어집니다. 중요한 기능을 수행하는 함수가 있으며, 모든 의도와 목적을 위해 비공개 변수를 공개하고 다른 외부 함수가 해당 변수를 절차 프로그램에서 사용하는 방식으로 사용하도록 유혹하는 공개 변수 또는 공개 접근 자 및 변경자가 있습니다 그러한 하이브리드는 새로운 기능을 추가하는 것을 어렵게하지만 새로운 데이터 구조를 추가하는 것을 어렵게 만든다. 그들은 두 세계에서 최악입니다. 작성하지 마십시오. 그것들은 저자가 기능이나 유형으로부터 보호가 필요한지 확신 할 수없는 (혹은 더 나쁘거나) 불분명 한 디자인을 나타냅니다.
DOM은 이러한 객체 및 데이터 구조 하이브리드의 예라고 생각합니다. 예를 들어 DOM은 다음과 같은 코드를 작성합니다.
el.appendChild(node);
el.childNodes;
// bleeding internals
el.setAttribute(attr, val);
el.attributes;
// bleeding internals
el.style.color;
// at least this is okay
el = document.createElement(tag);
doc = document.implementation.createHTMLDocument();
// document is both a factory and a tree root
DOM은 분명히 하이브리드 대신 데이터 구조 여야합니다.
el.childNodes.add(node);
// or el.childNodes[el.childNodes.length] = node;
el.childNodes;
el.attributes.put(attr, val);
// or el.attributes[attr] = val;
el.attributes;
el.style.get("color");
// or el.style.color;
factory = new HtmlNodeFactory();
el = factory.createElement(document, tag);
doc = factory.createDocument();
jQuery 프레임 워크는 DOM 노드 모음을 선택 및 수정하고 다른 많은 작업을 수행 할 수있는 일련의 프로 시저입니다. Laurent가 자신의 게시물에서 지적했듯이 jQuery는 다음과 같습니다.
html(select("#body"), "<p>hello</p>");
jQuery 개발자는 이러한 모든 프로 시저를 단일 클래스로 병합하여 위에 나열된 모든 기능을 담당합니다. 따라서 그것은 단일 책임 원칙을 명백히 위반 하므로 신의 대상입니다. 하나의 데이터 구조 (DOM 노드 모음)에서 작동하는 단일 독립형 클래스이기 때문에 아무것도 깨뜨리지 않기 때문에 유일한 것입니다. jQuery 서브 클래스 또는 다른 데이터 구조를 추가하면 프로젝트가 매우 빠르게 붕괴됩니다. 따라서 jQuery로 oo에 대해 이야기 할 수 있다고 생각하지 않습니다. 클래스를 정의한다는 사실에도 불구하고 oo보다 절차 적입니다.
Laurent가 주장하는 것은 완벽한 말도 안됩니다.
그래서 그것은 무엇을 의미합니까? LINQ와 같은 jQuery는 God 객체 안티 패턴이 아닙니다. 대신 Decorator라는 매우 존경받는 패턴의 경우입니다.
데코레이터 패턴은 인터페이스를 유지하고 기존 클래스를 수정하지 않음으로써 새로운 기능을 추가하는 것입니다. 예를 들면 다음과 같습니다.
동일한 인터페이스를 구현하지만 완전히 다른 구현으로 2 개의 클래스를 정의 할 수 있습니다.
/**
* @interface
*/
var Something = function (){};
/**
* @argument {string} arg1 The first argument.
* @argument {string} arg2 The second argument.
*/
Something.prototype.doSomething = function (arg1, arg2){};
/**
* @class
* @implements {Something}
*/
var A = function (){
// ...
};
/**
* @argument {string} arg1 The first argument.
* @argument {string} arg2 The second argument.
*/
A.prototype.doSomething = function (arg1, arg2){
// doSomething implementation of A
};
/**
* @class
* @implements {Something}
*/
var B = function (){
// ...
};
/**
* @argument {string} arg1 The first argument.
* @argument {string} arg2 The second argument.
*/
B.prototype.doSomething = function (arg1, arg2){
// doSomething implementation of B
// it is completely different from the implementation of A
// that's why it cannot be a sub-class of A
};
공통 인터페이스 만 사용하는 메소드가있는 경우 A와 B간에 동일한 코드를 복사하여 붙여 넣는 대신 하나 이상의 데코레이터를 정의 할 수 있습니다. 중첩 된 구조에서도 이러한 데코레이터를 사용할 수 있습니다.
/**
* @class
* @implements {Something}
* @argument {Something} something The decorated object.
*/
var SomethingDecorator = function (something){
this.something = something;
// ...
};
/**
* @argument {string} arg1 The first argument.
* @argument {string} arg2 The second argument.
*/
SomethingDecorator.prototype.doSomething = function (arg1, arg2){
return this.something.doSomething(arg1, arg2);
};
/**
* A new method which can be common by A and B.
*
* @argument {function} done The callback.
* @argument {string} arg1 The first argument.
* @argument {string} arg2 The second argument.
*/
SomethingDecorator.prototype.doSomethingDelayed = function (done, arg1, arg2){
var err, res;
setTimeout(function (){
try {
res = this.doSomething(o.arg1, o.arg2);
} catch (e) {
err = e;
}
callback(err, res);
}, 1000);
};
따라서 더 높은 추상화 레벨 코드에서 원래 인스턴스를 데코레이터 인스턴스로 대체 할 수 있습니다.
function decorateWithManyFeatures(something){
var d1 = new SomethingDecorator(something);
var d2 = new AnotherSomethingDecorator(d1);
// ...
return dn;
}
var a = new A();
var b = new B();
var decoratedA = decorateWithManyFeatures(a);
var decoratedB = decorateWithManyFeatures(b);
decoratedA.doSomethingDelayed(...);
decoratedB.doSomethingDelayed(...);
jQuery는 Array, NodeList 또는 다른 DOM 객체와 동일한 인터페이스를 구현하지 않기 때문에 어떤 데코레이터도 아니라는 결론을 내립니다. 자체 인터페이스를 구현합니다. 모듈은 데코레이터로 사용되지 않으며 단순히 원본 프로토 타입을 무시합니다. 따라서 Decorator 패턴은 전체 jQuery 라이브러리에서 사용되지 않습니다. jQuery 클래스는 다양한 브라우저에서 동일한 API를 사용할 수있게하는 거대한 어댑터입니다. oo 관점에서 볼 때 그것은 완전한 혼란이지만 실제로 중요하지 않으며 잘 작동하며 우리는 그것을 사용합니다.
$함수 나jQuery객체를 필요로하지 않는 방법으로 jQuery를 어떻게 자바 스크립트 언어로 만족스럽게 구현할 수 있을까?"