1

タグを管理するカスタム jQuery プラグインの作成を開始しています。私はこのパターンhttps://github.com/zenorocha/jquery-plugin-patterns/blob/master/patterns/jquery.basic.plugin-boilerplate.jsに基づいたアプローチを使用しており、すべてのメソッドがチェーン可能性を維持しています。

私が望むのは、値を設定または取得できる $.css() に似たメソッドを作成することです。新しいタグを追加する「タグ」メソッドを実装しました。渡された引数が定義されていない場合は、配列を返します。

$(elem).tagger('tags', 'some, tags, here'); // To add more tags
$(elem).tagger('tags');  // This doesnt works because chainability

2 番目の呼び出しは機能せず、セレクターで選択された要素を含む配列を返すだけです (連鎖性モードのため)。

getter メソッドを実装するにはどうすればよいですか?

ありがとう。

4

2 に答える 2

3

わかりました、私は私の問題の解決策を見つけたと思います。次のコードです。

私は3つの可能性を区別します：

  • プラグインを作成して初期化する必要があります。
  • プラグインのメソッドが呼び出されます。
  • getterとしてマークされたプラグインのメソッドが呼び出されます。この場合、連鎖性を破り、メソッドの結果を返します。

これは私の最初のjQueryプラグインです。これがまともなまたは悪い解決策である場合、誰かが私に答えることができますか？前もって感謝します。

var pluginName = 'tagger';

//
// Plugin wrapper around the constructor,
// preventing against multiple instantiations and allowing any
// public function (whose name doesn't start with an underscore) to be 
// called via the jQuery plugin:
// e.g. $(element).defaultPluginName('functionName', arg1, arg2)
//
$.fn[pluginName] = function(options) {
    var args = arguments;

    if (options === undefined || typeof options === 'object') {
        // Create a plugin instance for each selected element.
        return this.each(function() {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
            }
        });
    } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
        // Call a pluguin method for each selected element.
        if (Array.prototype.slice.call(args, 1).length == 0 && $.inArray(options, $.fn[pluginName].getters) != -1) {
            // If the user does not pass any arguments and the method allows to
            // work as a getter then break the chainability
            var instance = $.data(this[0], 'plugin_' + pluginName);
            return instance[options].apply(instance, Array.prototype.slice.call(args, 1));
        } else {
            // Invoke the speficied method on each selected element
            return this.each(function() {
                var instance = $.data(this, 'plugin_' + pluginName);
                if (instance instanceof Plugin && typeof instance[options] === 'function') {
                    instance[options].apply(instance, Array.prototype.slice.call(args, 1));
                }
            });
        }
    }
};

//
// Names of the pluguin methods that can act as a getter method.
//
$.fn[pluginName].getters = ['tags'];
于 2012-12-24T16:24:27.940 に答える
2

プラグイン コードが表示されない場合は、次のモック コードを回答として提供することしかできません。

$.fn.myVersatilePlugin = function (options, values) {
    if (values === undefined) {
        //do something to element with given `values`
        return this; // <-- chainability
    } else {
        values = {};
        // do whatever it is you do to get what you want to return
        return values; // and return it
    }
};
于 2012-12-24T14:15:38.573 に答える