前端編程提高之旅（十一）----jquery代碼的組織

前端編程提高之旅（十一）----jquery代碼的組織

最近做內推項目，雖然項目不算太大，還是遇到了一些程式碼群組織的問題，說到底還是對整個項目的掌控力不夠，為此樂帝專門在網路中搜集了一些jquery程式碼群組織的文章並總結出兩種方法來更好組織jquery代碼。

一、回呼函數

回呼函數的定義：

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

回調是將一個函數作為變數，傳入另外一個函數。前者將會在後者執行完成後執行。

上述簡單的回調例子，說明函數的參數可以是一個函數，這也是jquery回呼函數用法的基礎了。

 

function hideSearchArea(callback) {                $(".search-area-container").hide();                var width = searchArea.width();                searchArea.animate({ "left": -width }, 400, function () {                    if (callback) {                        callback();                    }                });            }btnSearch.click(function () {                var keyWord = $('#keyWord').val();                var locId = $("#citySelect").val();                if (keyWord == oldSearchData.keyWord && locId == oldSearchData.locId) {                    hideSearchArea();                    return false;                }//老資料不返回資料                hideSearchArea(function () {                    jobList.empty();                    pageNum = 1;//清空page數                    getInternalRecommendJobAdList(keyWord, locId);//載入搜尋項                });//採用回調，省去了傳參數的問題            });

此次內推項目中也用到了回調，在上述代碼例子中，回調的好處在於省去了複雜的函數間傳參的過程，在click事件中定義的局部變數，直接傳入hideSearchArea函數的回調中，省去了多餘變數控制參數的傳遞。

 

二、jquery程式碼群組織要點

 

1.解決消除匿名函數。2.以配置參數為中心。3.將事件監聽統一到一個函數內部。4.將整個程式段封裝成一個函數，對外只保留唯一介面，便於大型項目程式碼群組織。 下面通過一個簡單的例子看一下程式碼群組織的應用： html結構：

• hi oop

jquery代碼：

var myFeature = {    //首先類的執行個體屬性用this.xxx形式定義，類屬性用className.xxx形式定義    //以下各函數與設定物件都為類屬性    // 初始化配置Jquery對象參數，並呼叫事件綁定設定函數    // 類內部，使用_this對對象進行替代，便於標示        init : function(settings) {            _this = myFeature;            _this.config = {                    $items : $('#myFeature li'),                    $container : $('

 '), }; $.extend(_this.config, settings || {}); _this.setup(); }, // 事件綁定設定函數，用於綁定事件，溝通jquery對象與響應事件 setup : function() { var item = _this.config.$items; item.each(_this.createContainer) .click(_this.showItem); }, //在li下建立div並設定資料 createContainer : function() { var $i = $(this), $c = _this.config.$container.clone() .appendTo($i); $i.data('container',"hello world"); }, showItem : function() { _this.$currentItem = $(this); _this.getContent(); }, getContent : function() { var txt = _this.$currentItem .data('container'); $(".container").html(txt); }, }; $(function(){ myFeature.init(); }); 

 

從這段代碼不難看出，上述程式碼群組織思想。
將用到的DOM對象統一寫到配置（config）對象中 將事件監聽對象統一寫到安裝函數（setup）中 配置屬性及安裝函數在初始化函數（init）函數中調用 安裝函數事件監聽函數採用函數回調方法，調用本類功能函數 在整段程式的入口調用此類的初始化（init）方法 上述程式有個弊端，那就是在外部可以對類方法進行訪問。
對上述方法進一步最佳化，將整個對象改成一個自執行函數，那麼傳回值為初始化對象就是對外的唯一介面，內部編排也不用考慮對象引用的問題，本質上仍然是面向過程編程，但代碼管理上已經做到了極好的封裝。 代碼如下：

 var feature = (function() {        var  $items = $('#myFeature li'), $container = $('

 '), $currentItem, init = function(settings){ setup(); },//初始化函數 setup= function() { var item = $items.each(createContainer) .click(showItem); },//綁定函數 createContainer = function(idx) { var $i = $(this), $c = $container.clone() .appendTo($i); $i.data('container',"hello world"); }, showItem = function(){ $currentItem = $(this); getContent(); }, getContent = function() { var txt = $currentItem .data('container'); $(".container").html(txt); }; return { init : init//對外介面 }; })(); feature.init();//初始化函數
如上代碼所示可以實現，前文所述的四個要點。但考慮到這次內推項目指令碼都是針對每個頁面單獨執行，就沒有採用這種組織方式。但整體思路上仍然採用上述方法。即只實現前三個要點，代碼實現上用第二種代碼寫法。

三、參考資料 1.知乎網友：http://www.zhihu.com/question/26348002 2.360個人圖書館：http://www.xue163.com/121/6/1212972.html 3.csdn網友：http://blog.csdn.net/dananhai381/article/details/6709934