Как написать плагин javascript без jQuery

писать плагины с jQuery относительно легко, просто используйте $.fn, и вы уже в пути. Вот так:

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

но что, если вы не можете использовать jQuery?

предположим, я хочу иметь возможность использовать следующий код:

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

я мог бы сделать это так:

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

но, насколько я понимаю, это не одобряется!

8
javascript prototype

2 ответов

вот что вам нужно для начала:

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, поскольку есть много вещей, которые я не включил в этот код. The wrap функция не так продвинута и полезна, как в jQuery $ во многих отношениях.

надеюсь, это поможет.

26

просто написал шаблонный. Он не имеет собственной логики селектора, потому что он предназначен для библиотеки поверх D3.js, которые уже имеют собственный селекторный двигатель. https://gist.github.com/turboMaCk/34bde8e744f5921be0c4

2