**最近做內推項目，雖然項目不算太大，還是遇到了一些代碼組織的問題，說到底還是對整個項目的掌控力不夠，為此樂帝專門在網絡中搜集了一些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結構：** ~~~ <ul id="myFeature"> <li>hi oop</li> </ul> ~~~ jquery代碼： ~~~ var myFeature = { //首先類的實例屬性用this.xxx形式定義，類屬性用className.xxx形式定義 //以下各函數與配置對象都為類屬性 // 初始化配置Jquery對象參數，并調用事件綁定設定函數 // 類內部，使用_this對對象進行替代，便于標示 init : function(settings) { _this = myFeature; _this.config = { $items : $('#myFeature li'), $container : $('<div class="container"></div>'), }; $.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 = $('<div class="container"></div>'), $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**