編寫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 轉換為三木運算等壓縮方式。