jQuery - opzioni di estensione default ext () - javascript, jquery, jquery-plugins

A seguito del bene jQuery Plugin / Authoring istruzioni Ho una piccola domanda

(function($){

// Default Settings
var settings = {
var1: 50
, var2: 100
};

var methods = {
init : function (options) {
console.log(settings);
settings = $.extend(options, settings); // Overwrite settings
console.log(settings);
return this;
}
, other_func: function () {
return this;
}
};

$.fn.my_plugin = 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.my_plugin");
}
};

})(jQuery);

Se lo faccio

>>> $("my_element").my_plugin({var3: 60})
Before Object { var2=100, var1=50}
After Object { var3=60, var2=100, var1=50}
[ my_element ]

>>> $("my_element").my_plugin({var1: 60})
Before Object { var1=50, var2=100}
After Object { var1=50, var2=100}
[ my_element ]

Perché è il mio var1 non sovrascritto?

risposte:

Hai confuso l'ordine degli argomenti nel tuo file $.extend (l'obiettivo dovrebbe essere il primo), dovrebbe essere:

settings = $.extend(settings, options);

Vedere questo violino e il documenti per $.extend()

Per evitare confusione puoi anche estendere le tue impostazioni con i tuoi valori predefiniti in questo modo:

methods.init = function(options){

var settings = $.extend({
key1: "default value for key 1",
key2: "default value for key 2"
}, options); // <- if no / undefined options are passed extend will simply return the defaults

//here goes the rest

};

Stai sovrascrivendo i tuoi valori predefiniti. Prova a creare una nuova variabile per memorizzare le impostazioni all'interno del metodo init.

  var defaults = {
var1: 50
, var2: 100
};

var methods = {
init : function (options) {
console.log(defaults);
var settings = $.extend({},defaults,options || {});
console.log(settings);
$(this).data("myPluginSettings",settings);
return this;
}
, other_func: function () {
console.log(this.data("myPluginSettings"));
return this;
}
};