如何在没有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