创建一个包含多个函数的jquery插件

好吧，我有点新的插件我已经在我的项目中使用了很多，我也编写了基本的插件，只适用于带有选项的元素：

(function($){ $.fn.pulse = function(options) { // Merge passed options with defaults var opts = jQuery.extend({}, jQuery.fn.pulse.defaults, options); return this.each(function() { obj = $(this); for(var i = 0;i<opts.pulses;i++) { obj.fadeTo(opts.speed,opts.fadeLow).fadeTo(opts.speed,opts.fadeHigh); }; // Reset to normal obj.fadeTo(opts.speed,1); }); }; // Pulse plugin default options jQuery.fn.pulse.defaults = { speed: "slow", pulses: 2, fadeLow: 0.2, fadeHigh: 1 }; })(jQuery); 

以上工作正常，但显然它执行一个任务，理想情况下我希望能够在插件中执行多个任务，所以我可以使用：

 $('#div').myplugin.doThis(options); $('#div').myplugin.doThat(options; 

原因是我有一个相当大的脚本，它执行各种ajax调用来保存数据和从数据库查询数据（使用外部php文件）我想将所有这些function集成到一个插件中，但我不知道最好的用于它的结构，香港专业教育学院看了这么多的教程，基本上炒了我的大脑，我很困惑，我应该怎么做这个。

这只是创建一个新function的问题，如：

 $.fn.pluginname.dothis = function(options){ return this.each(function() { //execute code }; }; 

关于这个的任何指针，或者让我开始的模板都会非常有用。

永远需要帮助!!!

---

下一个问题：

 (function($){ // Can use $ without fear of conflicts //var gmap3plugin = $.fn.gmap3plugin; var obj = this; // "this" is the jQuery object var methods = { init : function(options){ var lat = $.fn.gmap3plugin.defaults[lat]; var lng = $.fn.gmap3plugin.defaults[lng]; alert('init'+' lat:'+lat+' --- lng:'+lng); }, show : function( ) { }, hide : function( ) { }, update : function( content ) { } }; $.fn.gmap3plugin = function(method){ // Method calling logic 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.tooltip' ); }; }; $.fn.gmap3plugin.defaults = { mapdiv :'#mapdiv', region : 'uk', lat : 53.4807125, lng : -2.2343765 }; })(jQuery); 

这是正常运行并获得正确的函数传递，但我如何访问$ .fn.gmap3plugin.defaults中的值我的init方法中的代码返回unde和lat和lng

 init : function(options){ var lat = $.fn.gmap3plugin.defaults[lat]; var lng = $.fn.gmap3plugin.defaults[lng]; alert('init'+' lat:'+lat+' --- lng:'+lng); }, 

或者我无法从函数中访问$ .fn.gmap3plugin.defaults中的数据???

Answer 1

如果你看一些其他jQuery插件和jQuery UI的设计，他们做的是他们有一个函数$('#div').myplugin({options}) ，然后他们可以通过传递做不同的function一个字符串而不是一个对象$('#div').myplugin('performdifferenttask') ，它可以调用一个对用户隐藏的辅助函数。

有关示例，请查看http://jqueryui.com/demos/progressbar/#methods

这是一个有希望减轻你的困惑的例子：

 (function($) { $.fn.myplugin = function(options) { if(options == 'function1') function1(); else if(options == 'function2') function2(); else { //do default action } } function function1() { //do something } function function2() { //do something else } } 

然后在使用中：

 $.myplugin({option1: 4, option2: 6}); //does default behavior $.myplugin('function1'); //calls function1() $.myplugin('function2'); //calls function2() 

Answer 2

按照Samuel的回答，您还可以使用以下内容来避免双重处理函数名称：

 (function($) { $.fn.myplugin = function(options, param) { if( typeof(this[options]) === 'function' ) { this[options](param); } // do default action this.function1 = function() { //do something } this.function2 = function(param) { //do something else (with a parameter) } } } 

添加param变量允许您调用如下函数：

 $.myplugin(); // does default behaviour $.myplugin('function1'); // run function 1 $.myplugin('function2'); // run function 2 $.myplugin('function2',{ option1 : 4, option2 : 6 }); // run function 2 with a parameter object 

有关演示，请参见http://jsfiddle.net/tonytlwu/ke41mccd/ 。