javascript–使用配置设置创建jQuery插件

我一直在使用以下设计模式来创建jQuery插件.我很确定我从jQuery主页获得了这个概念,然而,它似乎不再在那里发布了.

我最近尝试访问除init()方法之外的方法(即someOtherMethod())中的settings变量,并且由于未定义设置而遇到错误.我看到原因,因为设置被隔离到init()方法.

如果我在此方法之外移动设置,我可以从不同的方法访问它,但是,应用插件时的每个实例都不会有其唯一的设置变量,这是不可接受的.例如,$(‘#id1,#id2’).myPlugin({x：111});应该有一个共同的设置变量,但是$(‘#id1’).myPlugin({x：111}); $( ‘#ID2’)为myplugin({X：222});应该每个都有自己独特的设置变量.

鉴于以下设计模式为起点,如何从与插件关联的所有方法访问设置变量,但每次应用插件时都有唯一的设置变量？

(function( $){
var defaults={
x : 123,
y : 321
};
// var settings={}; //Should settings be defined here???
var methods = {
init : function( options ) {
var settings = $.extend(defaults, options || {});
//settings = $.extend(defaults, options || {}); //Should settings just be updated and not defined here?
return this.each(function(){
//whatever
});
},
someOtherMethod : function() {
return $(this).each(function(){
//do whatever and use settings variable as applicable
})
},
};
$.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 ));
$('#id1, #id2').myPlugin({x:111}); //Sets x=111 in settings for both
$('#id3').myPlugin({x:333}); //Sets x=333 in settings.
$('#id3').myPlugin('someOtherMethod'); //Will have access to x=333 in settings.


解决方法:

您将要保存每个元素的设置对象,以便设置将在不同的选择器中保持不变.执行此操作的最佳方法是使用jQuery.data将设置对象附加到元素.这样,无论选择何种方式,每次选择元素时设置都将保持不变.

然后,在someOtherMethod的.each调用中,您可以使用元素上的jQuery.data访问此数据.

此外,每个单独的元素将需要一个单独的设置对象,以避免覆盖共享设置,所以这：

var settings = $.extend(defaults, options || {});


将需要替换为：

var settings = $.extend({}, defaults, options || {});


否则,每次使用新设置属性都会覆盖默认对象,并在所有元素之间共享.

在这个例子中,我创建了一个变量名称internalPrefix,其值为’_myPlugin’,用于使用jQuery.data保存数据的键.我在底部添加了一些测试,以显示如何以不同的方式初始化它,但该方法可以被称为ans仍然知道用于初始化元素的设置.

工作实例：

(function( $){
var defaults={
x : 123,
y : 321
};
//A variable to save the setting data under.
var internalPrefix = '_myPlugin';
var methods = {
init : function( options ) {
return this.each(function() {
//Setup the settings object.
var settings = $.extend({}, defaults, options || {});
//Save the settings to the element.
$(this).data(internalPrefix, settings);
});
},
someOtherMethod : function() {
return this.each(function() {
//Get the existing settings.
var settings = $(this).data(internalPrefix);
//Example:
$('').text(JSON.stringify(settings)).appendTo(this);
})
},
};
$.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 ));
//Initialize the plugin different ways.
$('.group-1').myPlugin();
$('.group-2').myPlugin({
x : 42,
y : 1337
});
//Cal the methods on those different ways.
$('p').myPlugin('someOtherMethod');

group 1

group 1

group 2

group 2