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