如何在沒有jQuery的情況下編寫javascript插件

Question

使用jQuery編寫插件相對容易，只需使用$ .fn就可以了。 像這樣：

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

但是，如果你不能使用jQuery怎么辦？

假設我希望能夠使用以下代碼：

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

我可以這樣做：

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

但據我所知，它是不受歡迎的！

Answer 1

這是讓你入門的東西：

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);
};

像這樣使用它：

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