10

jQuery を使用してプラグインを作成するのは比較的簡単です。$.fn を使用するだけです。そのようです：

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

しかし、jQuery を使用できない場合はどうすればよいでしょうか。

次のコードを使用できるようにしたいとしましょう。

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

私はこのようにそれについて行くことができます：

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

しかし、私が理解していることから、それは眉をひそめています！

4

2 に答える 2

30

ここにあなたが始めるための何かがあります：

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 ほど高度でも有用でもありません。

これが役立つことを願っています。

于 2013-02-02T21:23:37.963 に答える
4

定型文を書いただけです。独自のセレクター エンジンを既に持っている D3.js 上のライブラリ用に設計されているため、独自のセレクター ロジックはありません。 https://gist.github.com/turboMaCk/34bde8e744f5921be0c4

于 2014-06-13T10:48:32.937 に答える