編寫基於jQuery的外掛的方法

流火行者發表於2016-03-21
jQuery

注意：jQuery中有一個extend的方法，這個方法是新增js物件欄位的，下面會多次用到

1：新增全域性類的方法

常用的ajax就是該類外掛，下面要編寫一個簡單的加法和減法的基於jQuery的方法

1     $.extend({
2         add:function(a,b){return a+b;},
3         minus:function(a,b){return a-b;}
4     });
5 
6     var i= $.add(100,200);
7     var j= $.minus(100,200);
8     alert(i+'##'+j);

第6行和第7行就可以使用該方法，對於js的全域性靜態公用方法，都可以這樣寫，將其他語言中的Global，Helper或者Utils等等檔案中的方法，在js中可以用這種擴充套件jQuery的方法去做

2：新增物件的方法

下面要給按鈕標籤自定義一些方法，通過jQuery來呼叫（注意，按鈕使用了bootstrap的樣式，不過這對於下面的演示沒有關係^_^）

1 <div id="btn" class="btn btn-danger">
2     按鈕點選
3 </div>

下邊給按鈕自定義了一個初始化的方法，讓按鈕把傳入的引數顯示在content上，而且還自定義了一個press的回撥事件的方法

 1   +function($){
 2         var parms={
 3             name:"pluign",
 4             version:"2.0"
 5         };
 6         var showDesc=function(obj){
 7             $(obj).text(JSON.stringify(parms));
 8         }
 9         $.fn.initButton=function(options){
10             $.extend(parms,options);
11             return this.each(function(){
12                 showDesc(this);
13                 $(this).on('click',function(){
14                     parms.press.apply(this);
15                 });
16             });
17         }
18     }(jQuery);
19     $('#btn').initButton({
20         name:'hello world',
21         sex :'Male',
22         press:function(){
23             alert('click button');
24         }
25     });

第1行到18行是對jQuery的擴充套件，注意第一行的+號的寫法，其實就是(function($){})(jQuery);
博主是參照Bootstrap的原始碼的寫法，至於為什麼這樣寫，猜測估計是為了省一個括號“）”字元吧，呵呵

方法中的showDesc將傳入引數顯示到按鈕上

具體效果如下：

由此可見：傳入的引數，都可以在jQuery擴充套件中拿到，這樣就可以在自己的擴充套件外掛中做任意想做的事情了。

相關文章