編寫jquery常用外掛的基本格式

勤勞的插秧哥發表於2015-03-01
jQuery

寫jquery外掛需要明白的那些知識點

1.jquery中$是神馬？$.fn又是神馬？

稍微有jquery經驗的都知道在jquery中$等價於jQuery，在控制檯一試便知：

我們在jquery（1.8.3）原始碼中也能找到下面程式碼：

其實在jquery中$就是一個函式function，當我們執行$()時會得到一個jquery物件，得到的jquery物件的型別是object型別，而不是陣列。除此之外$也是個物件，因為在$上面也可以定義方法和屬性，比如常見的$.ajax。

而$.fn就是$的原型，，在原始碼中我們也能找到jQuery.fn = jQuery.prototype

jquery物件中的上百種方法就是定義在原型中，為什麼定義在原型中？這就是js物件導向的重要知識了，可參考我的這篇文章 對於jquery這麼多方法的庫來說，方法定義在原型上極大的節省了記憶體。這裡只需知道$.fn就是$的原型就行。

外掛的寫法

外掛說白了就是為jquery庫新增特定的方法，外掛的形式一般開頭為$.fn.extend 在原始碼中我們也能看到很多這樣的例子：

            

所以一個常見的外掛的基本樣式應該如下（註釋寫的很詳細，就不再一一贅述）：

/*
外掛名：
作者：
日期：等資訊
*/

//一個匿名自執行函式，劃分一個獨立的作用域，不至於外掛中的變數干擾jquery

;(function($){  //開始寫上; 為防止程式碼壓縮出錯

    //為jquery擴充套件方法，也就是外掛的主體
    $.fn.extend({

        //方法名
        "method" : function(opts){
            //定義外掛的預設引數
            var default = {
                width : //定義預設寬度
                height : //定義預設高度
                speed : //定義預設速度
                //等等各種預設引數
            }
            //有些引數使用者直接使用預設，有些引數使用者要使用自己定義的
            //自定義引數替換預設引數
            //var option = $.extend(default,opts); //為什麼不用此行程式碼？為了保護預設引數
            //extend方法中opts會永久取代default，所以新加一個空物件{}來儲存本次所使用的引數，下次使用default依然不變
            var option = $.extend({},default,opts);

            this.each(function(){ //用each處理選擇器選中的一個或多個dom節點
                /*
                    此處是外掛處理過程程式碼
                */
            });

            //最後別忘了保持jquery的鏈式操作（視情況而定）
            return this; //返回被選中的元素節點，以供後續操作。
        }

    });


})(jQuery)//傳入jQuery是為更快查詢，避免沿作用域鏈往上層查詢，提高效能

常見的外掛寫法就是這樣，據說90%以上的外掛就是用$.fn.extend()方式實現的，因為jquery的特色就是先選擇dom節點，然後鏈式處理這些節點。還有不常見的$.extend()外掛編寫方式，該方式編寫的外掛是在jquery名稱空間內新增方法，也就是說在使用時不需要先選擇dom節點，使用時直接$.method()即可。

外掛的命名和程式碼壓縮

命名預設採用jquery.method.js （method代指外掛名），除此之外最好弄一個壓縮版：jquery.method.min.js 至於程式碼的壓縮，包括去空格，去換行，其實還有方法名的簡寫操作，比如方法名叫removeAttr，很長，那麼可以直接改寫為一個字母a，這也是短化程式碼的方法，除此之外還有if else 轉換為三木運算等壓縮方式。

 

相關文章