我想构建一个具有可访问方法和选项的插件,这适用于一个复杂的插件。我需要可以在插件外部访问这些方法,因为如果有人向 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);