JQuery插件開發 - 模板

 1 (function($) {
 2     $.fn.PluginName = function(options) {
 3         // 建立一個默認設置對象
 4         var defaults = {
 5             key : "DefaultValue"
 6         }
 7         //使用extend方法從options和defaults對象中構造出一個新的設置對象
 8         var options = $.extend(defaults, options);
 9         /****************
10              執行代碼
11         ****************/
12     };
13 })(jQuery);

 //調用自定義的JQuery插件
 $(".className").PluginName({key:"NewValue"});

 

---

 

var options = $.extend(defaults, options);
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
Object.extend = function(destination, source) { // 一個靜態方法表示繼承, 目標對象將擁有源對象的全部屬性和方法
　　for (var property in source) {
    　　destination[property] = source[property];// 利用動態語言的特性, 經過賦值動態添加屬性與方法
　　}
　　return destination;// 返回擴展後的對象
}

 

---

 

 

 1 (function($) {
 2     var methods = {
 3         init : function(options) {
 4             // 建立一個默認設置對象
 5             var defaults = {
 6                 key : "DefaultValue"
 7             }
 8             //使用extend方法從options和defaults對象中構造出一個新的設置對象
 9             var options = $.extend(defaults, options);
10             /***************
11                  執行代碼
12             ***************/
13             
14         }
15     };
16     $.fn.PluginName = function(options) {
17         //獲取傳入的第一個實參副本（arguments對象是收到的實參副本，就像數組，但卻又不是數組）
18         var method = arguments[0];
19         //獲取咱們的方法
20         if (methods[method]) {
21             //若是方法存在，存儲起來以便使用
22             method = methods[method];
23             //若是方法不存在，檢驗對象是否爲一個對象（JSON對象）或者method方法沒有被傳入
24             arguments = Array.prototype.slice.call(arguments, 1);
25         } else if ( typeof (method) == 'object' || !method) {
26             //若是咱們傳入的是一個對象參數，或者根本沒有參數，init方法會被調用
27             method = methods.init;
28         } else {
29             //若是方法不存在或者參數沒傳入，則報出錯誤。須要調用的方法沒有被正確調用
30             $.error('Method ' + method + ' does not exist on jQuery.ChangeTabs');
31             return this;
32         }
33         //調用咱們選中的方法
34         return method.apply(this, arguments);
35     };
36 })(jQuery);

$('.className').pluginName('init', 'argument'); // 調用：把 "argument 1" 和 "argument 2" 傳入 "init"