tạo một plugin jquery với nhiều chức năng

Question

ok là kinda mới để bổ sung i đã sử dụng nhiều trong các dự án của tôi, tôi cũng đã viết plugin cơ bản mà chỉ làm việc trên các yếu tố với các tùy chọn:

(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); 

ở trên làm việc ok, nhưng rõ ràng là nó thực hiện một nhiệm vụ, lý tưởng tôi muốn để có thể thực hiện nhiều nhiệm vụ trong vòng một plugin vì vậy tôi có thể sử dụng:

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

lý do là tôi có khá một kịch bản lớn mà ajax khác nhau gọi để lưu dữ liệu và dữ liệu truy vấn từ cơ sở dữ liệu (sử dụng tệp php bên ngoài) tôi muốn tôi ntergrate tất cả các chức năng này vào một plugin, nhưng tôi không biết cấu trúc tốt nhất để sử dụng cho nó, ive nhìn rất nhiều hướng dẫn và về cơ bản chiên bộ não của tôi, và tôi bối rối như thế nào tôi nên đi về làm điều này.

là nó chỉ là vấn đề của việc tạo ra một chức năng mới như:

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

bất kỳ gợi ý về điều này, hoặc một mẫu để tôi bắt đầu sẽ thực sự hữu ích.

mãi mãi cần trợ giúp !!!

---

vấn đề tiếp theo:

(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); 

này đang hoạt động và nhận được chức năng quyền đó được thông qua, nhưng làm thế nào để truy cập vào các giá trị trong $ .fn.gmap3plugin.defaults mã trong phương thức init của tôi trả về undefined cho lat và lng

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

hoặc tôi không thể truy cập dữ liệu trong $ .fn.gmap3plugin.defaults từ một hàm ???

Answer 1

Nếu bạn nhìn vào thiết kế của một số plugin jQuery và giao diện người dùng jQuery, chúng có chức năng đơn $('#div').myplugin({options}) và sau đó có thể thực hiện các chức năng khác nhau bằng cách truyền chuỗi thay vì đối tượng $('#div').myplugin('performdifferenttask'). lần lượt gọi một hàm trợ giúp bị ẩn khỏi người dùng.

Đối với một ví dụ nhìn vào http://jqueryui.com/demos/progressbar/#methods

Dưới đây là một ví dụ mà hy vọng sẽ làm giảm bớt sự nhầm lẫn của bạn:

(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 
    } 
} 

Sau đó, sử dụng:

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

Answer 2

Tiếp theo câu trả lời của Samuel, bạn cũng có thể sử dụng các mục sau để tránh xử lý hai lần tên hàm:

(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) 
     } 
    }  
} 

Việc bổ sung các biến param cho phép bạn gọi các chức năng như sau:

$.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 

Xem http://jsfiddle.net/tonytlwu/ke41mccd/ cho một bản demo.