-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.init并methods.refresh带有参数 forinitType和内部条件以调用某些代码init但不refresh

(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);

可能不是没有错误，但想法应该让你继续

编辑：意识到我忘了让设置更全球化。一种方法是删除默认值methods并创建

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

现在，您可以在刷新时访问用户定义的设置。另一个非常有用的补充是将设置存储在 jQuery DOM 数据中，例如：

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