12

config を使用して jQuery プラグインを作成したい (たとえば plugin myplugin)。呼び出すよりその後、既に保存されている$(elem).myplugin(config);構成のように、このプラグインからメソッドを呼び出したいです。$(elem).myplugin().method()

私のオファーはそのようなものです：

(function($) {
    $.fn.myplugin = function(options) { 
        var $this = $(this);

        var getOptions = function() {
            return $this.data('myplugin');
        };

        var initOptions = function(opt) {
            $this.data('myplugin', opt);
        };

        var setOption = function(key, value) {
            $this.data('myplugin')[key] = value;
        }

        var updateBorderWidth = function() {  
            $this.css('border-width', 
                      getOptions().borderWidth * getOptions().coeficient);
        };

        var init = function(opt) {
            initOptions(opt);
            updateBorderWidth();
        }        

        function changeBorder(width) {            
            setOption('borderWidth', width)
            updateBorderWidth();
        }

        if(options) {
            init(options);            
        }        

        return {
            changeBorder : changeBorder
        };
    }        
})(jQuery);

そして使用法：

 $(function() {
     var item1 = $('#test1').myplugin({ coeficient: 1, borderWidth: 1 });
     var item1 = $('#test2').myplugin({ coeficient: 2, borderWidth: 1 });

     $('#btn').click(updateBorder);     
});

function updateBorder() {
    $('#test1').myplugin().changeBorder($('#inpt').val());
    $('#test2').myplugin().changeBorder($('#inpt').val());
}

例: http://jsfiddle.net/inser/zQumX/4/

私の質問：それを行うのは良い習慣ですか？

間違ったアプローチかもしれません。より良いソリューションを提供できますか?

4

2 に答える 2

3

編集：

jQuery プラグイン テンプレートでスレッドを検索した後、これらのボイラープレート テンプレート(更新済み)を見つけました。これらのテンプレートは、以下で提供するものよりも用途が広く、広範なデザインです。最終的に何を選択するかは、ニーズによって異なります。ボイラープレート テンプレートは、私が提供するものよりも多くのユース ケースをカバーしていますが、要件に応じて、それぞれ独自の利点と注意事項があります。

通常、jQuery プラグインは、次のように値が渡されると jQuery オブジェクトを返します。

.wrap(html) // returns a jQuery object

または、パラメーターが渡されない場合は値を返します

.width() // returns a value

.height() // also returns a value

呼び出し規約の例を読むには:

$('#test1').myplugin().changeBorder($('#inpt').val());

jQuery を使用する開発者には、2 つの別個のプラグインが連携して利用されているように見えます。最初.myplugin()にどちらが で実行されたデフォルトの DOM 操作で jQuery オブジェクトを返すと想定し#test1、その後に.changeBorder($('#inpt').val())jQuery オブジェクトを返す可能性があります。しかし、あなたの例の場合、行全体が変数に割り当てられていないため、戻り値は使用されません.DOM操作のように見えます. しかし、あなたの設計は、私が説明した標準的な呼び出し規則に従っていないため、プラグインに慣れていない場合、コードを見て実際に何をするのか混乱するかもしれません。

過去に、あなたが説明しているものと同様の問題とユースケースを検討しましたが、プラグインに関連付けられた個別の関数を呼び出すための便利な規則を持つという考えが気に入っています。選択は完全にあなた次第です-それはあなたのプラグインであり、誰がそれを使用するかに基づいて決定する必要がありますが、私が落ち着いた方法は、関数の名前とパラメーターを別々に渡すことです.myplugin(name, parameters)またはとしてオブジェクトで.myplugin(object)。

私は通常、次のようにします。

(function($) {
    $.fn.myplugin = function(fn, o) { // both fn and o are [optional]
        return this.each(function(){ // each() allows you to keep internal data separate for each DOM object that's being manipulated in case the jQuery object (from the original selector that generated this jQuery) is being referenced for later use
            var $this = $(this); // in case $this is referenced in the short cuts
            
            // short cut methods
            if(fn==="method1") {
                if ($this.data("method1"))  // if not initialized method invocation fails
                    $this.data("method1")() // the () invokes the method passing user options
            } else if(fn==="method2") {
                if ($this.data("method2"))
                    $this.data("method2")()
            } else if(fn==="method3") {
                if ($this.data("method3"))
                    $this.data("method3")(o) // passing the user options to the method
            } else if(fn==="destroy") {
                if ($this.data("destroy"))
                    $this.data("destroy")()
            }
            // continue with initial configuration
            
            var _data1,
                _data2,
                _default = { // contains all default parameters for any functions that may be called
                    param1: "value #1",
                    param2: "value #2",
                },
                _options = {
                    param1: (o===undefined) ? _default.param1 : (o.param1===undefined) ? _default.param1 : o.param1,
                    param2: (o===undefined) ? _default.param2 : (o.param2===undefined) ? _default.param2 : o.param2,
                    
                }
                method1 = function(){
                    // do something that requires no parameters
                    return;
                },
                method2 = function(){
                    // do some other thing that requires no parameters
                    return;
                },
                method3 = function(){
                    // does something with param1
                    // _options can be reset from the user options parameter - (o) - from within any of these methods as is done above
                    return;
                },
                initialize = function(){
                    // may or may not use data1, data2, param1 and param2
                    $this
                        .data("method1", method1)
                        .data("method2", method2)
                        .data("method3", method3)
                        .data("destroy", destroy);
                },
                destroy = function(){
                    // be sure to unbind any events that were bound in initialize(), then:
                    $this
                        .removeData("method1", method1)
                        .removeData("method2", method2)
                        .removeData("method3", method3)
                        .removeData("destroy", destroy);
                }
            initialize();
        }) // end of each()
    } // end of function        
})(jQuery);

そして使用法：

var $test = $('#test').myplugin(false, {param1: 'first value', param2: 'second value'}); // initializes the object
$test.myplugin('method3', {param1: 'some new value', param2: 'second new value'}); // change some values (method invocation with params)

または、次のように言うこともできます。

$('#test').myplugin(); // assume defaults and initialize the selector
于 2013-03-22T19:25:08.783 に答える
2

データ属性を介してパラメーターを JavaScript に渡すことは、Javascript コードとサーバー側コードを効果的に分離するため、優れたパターンです。また、Javascript コードのテスト可能性に悪影響を与えることもありません。これは、この問題に対する他の多くのアプローチの副作用です。

サーバー側のコードが Web アプリケーションでクライアント側のコードと通信するための最良の方法であると言えます。

于 2013-03-21T10:51:14.613 に答える