Question

我正在重写一个插件，以便每个主要部分都变成method as per this question和the jQuery documentation，到目前为止，整个过程仍然有效。

插件初始化为：

$('#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);

Answer 1

将大部分代码从methods.init移动到doInit()，可以在methods.init和methods.refresh中调用initType和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

可能没有bug，但想法应该让你去

编辑：意识到我忘了让设置更全球化。一种方法是从var defaults={ /* ..... */}; $.fn.myPlugin.defaults=$.extend({},defaults, options);中删除默认值并创建

   $(this).data('myPlugin.settings', {/* extended settings object*/});

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

{{1}}

自定义jQuery插件但无法弄清楚自定义方法

1 个答案: