使用jQuery封裝實用函數

一、引言

項目開發中，前端會有一個輔助工具類的js文件，比如cookie的操作，團隊成員自己封裝的方法。大多數時候，我們開發人員自己都是寫一個全局函數，不考慮后期維護人員也會寫相同的代碼，然后造成代碼之間的沖突。之前維護的一段代碼如下：

 

var g=function(id){
    return document.getElementById(id);
};

var $$=function(id){
    return document.getElementById(id);
};
g("testdiv").style.color="red";
$$("testdiv").innerHTML="this is a test.";

 

因為代碼歷史久遠，也不知道是不是在jQuery出來之前寫的呢，還是之后。開發者為了節省后面寫document.getElementById()這個方法，在頁面居然用了兩個縮寫去替代。$$應該后面的開發人員添加進去的，可能他覺得使用g來代替document.getElementById()不是很明顯。這個也說明，在開發過程中，很多開發者為了去大規模修改別人的代碼，我們喜歡在別人代碼上添加內容，不想刪除內容。這樣項目是可以運行了，但是大量冗余代碼也產生了，對后期的維護和重構非常的不利。以上只是舉個實際項目中例子。

二、實例

后面引入jQuery之后，開發者大多數都喜歡用$來替代。到目前為止，我使用的第三方類庫，基本上沒有以$來定義的。所以基本上沒有出現過$代表的不是jQuery對象。但是為了代碼可維護性，並且在我們寫代碼中，使用的$是jQuery對象，我們需要安全進行編寫函數。因為有時項目的名字不同，我們還會使用命名空間才區分它們。

(function($){
    $.say=function(what){
        alert("I say "+what);
    }
})(jQuery);

這里我們將jQuery對象傳入到函數中，以確保我們在函數內部使用的$是jQuery對象。

三、一個復雜的示例

標簽: jQuery, jQuery插件, javascript