jQuery없이 자바 스크립트 플러그인을 작성하는 방법

Question

jQuery로 플러그인을 작성하는 것은 상대적으로 쉽습니다. $ .fn을 사용하기 만하면됩니다. 좋아요 :

$.fn.analyse = function() { 
... 
} 

하지만 jQuery를 사용할 수없는 경우 어떻게해야합니까? 나는이 눈살을 찌푸리게되는 이해하는 것과 그러나

Object.prototype.analyse = function() { 
... 
} 

:

document.querySelector("#mydiv").analyse(); 

내가 이런 식으로 그것에 대해 갈 수 :

의 나는 다음과 같은 코드를 사용할 수 있도록하려면 가정 해 봅시다!

var proto_methods = { 
    analyse: function() { 
     var node = this.node; 

     // ... 
    } 
}, wrap, _wrap; 

_wrap = function(selector) { this.node = document.querySelector(selector); }; 
_wrap.prototype = proto_methods; 

wrap = function(selector) { 
    return new _wrap(selector); 
}; 

이처럼 사용 :

Answer 1

이 여기에 당신이 시작하는 뭔가

wrap("#mydiv").analyse(); 

를 사용하여 더 많은 플러그인을 추가 할 경우이 (그리고 그것의 좀 더 객체 지향) :

var pack = { 
    binder: [{}] 
}; 

pack.query_bind = function(bound) { 
    if (bound) pack.binder[1] = bound; 
}; 

pack.fn = function(attributes) { 
    for (var i in attributes) pack.binder[0][i] = attributes[i]; 
}; 

var _wrap = function(selector) { 
    this.node = /^(#|.)\w+/.test(selector) ? pack.binder[1](selector) : {}; 
}; 

_wrap.prototype = pack.binder[0]; 

var wrap = function(selector) { 
    pack.query_bind(document.querySelector.bind(document)); 
    return new _wrap(selector); 
}; 

wrap.fn = pack.fn; 

wrap.fn({ 
    cool: function() {}, 
    nice: function() {} 
}); 

wrap('#mydiv').cool(); 

언제든지 wrap.fn으로 전화하여 프로토 타입을 업데이트 할 수 있습니다.

그러나이 코드에 포함되지 않은 내용이 많기 때문에 jQuery를 대체 할 수는 없습니다. wrap 함수는 여러면에서 jQuery의 $처럼 고급이 아니고 유용하지 않습니다.

이 정보가 도움이되기를 바랍니다.

Answer 2

그냥 상용구를 작성했습니다. 이미 자체적 인 선택기 엔진을 가지고있는 D3.js 위에 라이브러리 용으로 설계되었으므로 자체 선택기 논리가 없습니다. https://gist.github.com/turboMaCk/34bde8e744f5921be0c4