-1

method この質問とjQueryのドキュメントに従って、各メインセクションがに変わるようにプラグインを書き直していますが、これまでのところすべてが機能しています。

プラグインは次のように初期化されます。

$('#mySelector').myPlugin({
    // want to keep initial options
    option1: true,
    option2: 'right'
    // etc.
});

その後、私はrefreshメソッドを使用したいと思います：

$('#mySelector').myPlugin('refresh');

基本的に、HTML DOMの変更を再適用することを除いて、このプラグインのすべてを実行するには「更新」が必要です（元の初期化されたオプションをすべて保持します）。

私はそれを理解できないようです。methods.binders(var1, var2);変数も取得する必要があるため、使用することはできません。ただし、最初に初期化init()するときにが必要です。methods.html()どうすればその部分をスキップできrefreshますか？

簡単かもしれませんが、今は頭痛がします。

(function ($) {

    var methods = {
        defaults : {
            option1: false,
            option2: 'left'
                    // etc.
        },
        settings : {},
        init : function(options) {
            methods.settings = $.extend({}, methods.defaults, options);

            $(this).each(function() {
                if ($(this).is('[type=radio]')) {
                    var var1 = $(this);
                    var var2 = $('.somethingelse');
                    // etc.
                    methods.html(var1, var2);
                    methods.binders(var1, var2);
                };
            });

        },
        refresh : function () {
            // no idea??
        },
        html : function(var1, var2) {
            // various HTML DOM manipulations
        },
        binders : function(var1, var2) {
            // binding various events, hover, click, etc.
            // assigns classes
        }
    };

    $.fn.myPlugin = function(method) {
        if ( methods[method] ) {
            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.myPlugin' );
        }
    };

})(jQuery);
4

1 に答える 1

1

以下は、コードの大部分を、引数と条件付きの両方で呼び出すことができるmethods.init関数に移動します。doInit()methods.initmethods.refreshinitTypeinitrefresh

(function($) {    

    var methods = {     
        /* see answer edit about moving this out of here*/        
        defaults: {
            option1: false,
            option2: 'left'
            // etc.
        },
        settings: {},
        init: function(options) {  
           /* see answer edit about moving this out of here*/
            methods.settings = $.extend({}, methods.defaults, options);
            doInit(this, 'init', methods);

        },
        refresh: function() {
            doInit(this, 'refresh', methods);
        },
        html: function(var1, var2) {
            // various HTML DOM manipulations
        },
        binders: function(var1, var2) {
            // binding various events, hover, click, etc.
            // assigns classes
        }
    };

    function doInit(el, initType, methods) {
        $(el).each(function() {
            if ($(this).is('[type=radio]')) {
                var var1 = $(this);
                var var2 = $('.somethingelse');
                // etc.
                methods.html(var1, var2);
                if (initType == 'init') {
                    methods.binders(var1, var2);
                }
            };
        });
    }

    $.fn.myPlugin = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.myPlugin');
        }
    };

})(jQuery);

バグがないわけではないかもしれませんが、アイデアはあなたを動かすはずです

編集：私は設定をよりグローバルにするのを忘れていたことに気づきました。1つの方法は、デフォルトを削除しmethodsて作成することです

  var defaults={  /* ..... */};
 $.fn.myPlugin.defaults=$.extend({},defaults, options);

これで、更新を行うときにユーザー定義の設定にアクセスできます。もう1つの非常に役立つ追加機能は、次のようなjQueryDOMデータに設定を保存することです。

   $(this).data('myPlugin.settings', {/* extended settings object*/});
于 2012-10-27T19:43:55.707 に答える