怎麼寫jQuery外掛程式

標籤：window   原則   ref   還原   sel   插入   demo   ons   mod   

jQuey是一個非常好用的javascript類庫，提供了非常多的介面給程式員使用。但在某些具體方面，並沒有完全提供解決方案，這就要求我們自己實現。jQuery官方也提供jQuery拓展的標準。編寫jQuery外掛程式時，應該注意一下幾點原則：

　　1. 避免全域依賴。
　　2. 避免第三方破壞。
　　3. 相容jQuery操作符’$’和’jQuery’

這三個原則非常重要，否則，這個外掛程式將會失去外掛程式的意義。

　　jquery外掛程式命名，一般在前面加上jquery，這樣別人就知道這是jQuery外掛程式。如：jquery.modelselect.min.js

     加了min表示壓縮版，壓縮版一般處理方式是去掉空格換行，也有些公司為了保護代碼，直接重構變數和私人函數名，不過這樣做在一般程式員是有效，但在高手面前，並沒什麼卵用，有人一樣能把它還原。

　　OK, jQuery外掛程式的標準代碼格式如下，（需要使用閉包，對於javascript閉包，我們後面再談）：

1 (function ($) {2  //外掛程式內部代碼3 })(jQuery);

以上代碼的第三行，可以是window.jQuery或者$,按照官方的解釋，這三者是等價的。

在這寫一個小demo, 就是插入一個個人資訊。

 1 (function ($) { 2         $.fn.userInfo = function (options) { //定義外掛程式方法名 3             var dft = { 4                 //定義一個對象，設定預設值 5                 name: ‘Steven Zhu‘, //名 6                 email: ‘[email protected]‘, //連結 7                 size: ‘14px‘, //文字大小 8                 align: ‘center ‘//文字位置，left || center || right 9             };10             var opt = $.extend(dft, options);//這個很關鍵，待會跟你說。11             var style = ‘style="font-size:‘ + opt.size + ‘;text-align:‘ + opt.align + ‘;"‘; //調用預設的樣式12             var name = ‘<p‘ + ‘ ‘ + style + ‘>name:<a target="_blank" >‘ + opt.name + ‘</a></p>‘;13             var email = ‘<p‘ + ‘ ‘ + style + ‘>name:<a target="_blank">‘ + opt.email + ‘</a></p>‘;14             $(this).append(name);15             $(this).append(name);16         }17     })(window.jQuery);

 

好了，說說$.extend(), 這個方法，他的作用就是擴充，以上這段代碼就是將options拓展到dft,最後賦給opt.這樣寫為了可讀性。

所以這段代碼還可以這樣。

 

options = $.extend({//here is default values},options);

 

這樣，看起來就精簡多了。

　　我們再寫外掛程式時，把當前對象return回去，這樣返回的又是jQuery對象，這樣可以鏈式操作。結合上面一段，代碼修改如下：

 1 (function ($) { 2         $.fn.userInfo = function (options) { //定義外掛程式方法名 3             options = $.extend({ 4                 //定義一個對象，設定預設值 5                 name: ‘Steven Zhu‘, //名 6                 email: ‘[email protected]‘, //連結 7                 size: ‘14px‘, //文字大小 8                 align: ‘center ‘//文字位置，left || center || right 9             },options);
10             var style = ‘style="font-size:‘ + opt.size + ‘;text-align:‘ + opt.align + ‘;"‘; //調用預設的樣式11             var name = ‘<p‘ + ‘ ‘ + style + ‘>name:<a target="_blank" >‘ + opt.name + ‘</a></p>‘;12             var email = ‘<p‘ + ‘ ‘ + style + ‘>name:<a target="_blank">‘ + opt.email + ‘</a></p>‘;13             this.append(name);14             this.append(name);15             16             return this;17         }18     })(window.jQuery);

調用：

　　在引入外掛程式之後，直接調用就行。

1 <script>2   $("#user-info").userInfo();3 <script">

這樣會在dom的id="user-info"裡輸出外掛程式的預設值，即顯示結果是：Steven Zhu  [email protected]

要改變裡面的值，只需要加入你想要的參數就行。如下：

1 <script>2  $(‘#user-info‘).userInfo({3  name: ‘Sun Zhu‘,4  email: ‘[email protected]‘,5  size: ‘16px‘,6  align: ‘right‘7  });8 <script">

這樣就改變預設值了。輸出結果就是：Sun Zhu [email protected]，文字靠右對齊。

上面的這樣寫會有一個弊端，就是不是很好拓展。因為一個外掛程式，往往會有多個方法。一下是改進的結構。

 1 /** 2  * Created by Steven on 2015/07/10/0010. 3  * @email [email protected] 4  */ 5  6 (function ($) { 7  8     $.fn.extend({ 9         slider:function (opt) {10             opt = $.extend({11                 12             }, opt);13             //do something here14     15          16 17             return $.each(this,function(index,ele){});18         }19     });20 21 })(jQuery);  

 

轉載出處：http://zhutty.cnblogs.com

怎麼寫jQuery外掛程式