Question

我正在学习编写一些jQuery插件，在此之前我正在使用的结构：

!(function($){
    var defaults = {
        target: ''
    };

    $.fn.myplugin = function(options){
        var opts = $.extend({}, defaults, options)  
               return this.each(function(){ 
                  //
               });
    }
})(jQuery);

现在，我正在为我的插件应用一些更新方法，所以我在github上检查了一些插件。这个结构非常适合我：

!(function($){
    var defaults = {
        target: ''
    },
    build = function(){
    },
    methods = {
        init: function(options){
            var settings = $.extend({}, defaults, options)
        },
        update: function(){
        }
    };

    $.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('error message');
        }
    }
})(jQuery);

但$.extend函数已声明init，但我在访问settings.target等其他函数build时遇到问题。我只能通过调用build内的函数init并传递一个像这样的参数来访问它（这是一件非常糟糕的事情）：

init: function(options){
     var settings = $.extend({}, defaults, options)
     build(settings.target);
}

我需要将$.extend({}, defaults, options)移到其他地方让我在init以外的功能上访问它。请帮帮我，谢谢！

Answer 1

使用settings jQuery函数将.data()存储在元素上。

methods = {
    init: function(options){
        var settings = $.extend({}, defaults, options);
        this.data('settings', settings);
    },
    update: function(){
        var settings = this.data('settings');

    }
};

更完整的代码：

!(function($){
   var defaults = {
       target: ''
   },
   build = function(settings){
      // use settings.target here
   },
   methods = {
       init: function(options){
           var settings = $.extend({}, defaults, options)
           this.data('settings', settings);
       },
       update: function(){
          var settings = this.data('settings');
          build(settings);
       }
   };

   $.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('error message');
       }
   }})(jQuery);

使用此插件：

$(element).myplugin();
$(element).myplugin('update');

编写jQuery插件，将$ .extend设置为可在其他函数上访问

1 个答案: