编写jQuery插件，其中设置$.extend以在其他函数上访问

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函数上声明的，例如，我在访问其他函数（如build）上的settings.target值时遇到问题。我只能通过调用init内部的函数build并传递这样的参数来访问它（这是一件可怕的事情）：

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

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

Answer 1

使用 jQuery 函数将settings存储在元素上.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');