我希望创建一个具有可访问方法和选项的插件,用于复杂的插件。我需要使方法在插件外部可以访问,因为如果有人向DOM添加了内容,则需要更新它(这样我们就不需要再次运行完整的插件)。
我以前看到过像这样的插件,但现在找不到它们,所以无法查看它们。我对JavaScript仍然很陌生,任何帮助都将受益匪浅。
如果我们仍然可以全局覆盖选项,那将很好。
我想如何使用该插件:
// options
$('#someid').myplugin({name: 'hello world'});
// methods(would be nice if we can use this)
$('#someid').myplugin('update');
//我的旧插件包装器
;(function($, window, document, undefined){
$.fn.pluginmyPlugin = function(options) {
options = $.extend({}, $.fn.pluginmyPlugin.options, options);
return this.each(function() {
var obj = $(this);
// the code
});
};
/**
* Default settings(dont change).
* You can globally override these options
* by using $.fn.pluginName.key = 'value';
**/
$.fn.pluginmyPlugin.options = {
name: '',
...
};
})(jQuery, window, document);
更新
在查看jQuery文档后,我已经编写了以下代码,请告诉我代码是否有问题,是否可以更好地构建...
;(function($, window, document, undefined){
var methods = {
init : function( options ) {
options = $.extend({}, $.fn.pluginmyPlugin.options, options);
return this.each(function(){
alert('yes i am the main code')
});
},
update : function( ) {
alert('updated')
}
};
$.fn.pluginmyPlugin = 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 this plugin' );
}
};
/**
* Default settings(dont change).
* You can globally override these options
* by using $.fn.pluginName.key = 'value';
**/
$.fn.pluginmyPlugin.options = {
name: 'john doe',
//....
};
})(jQuery, window, document);