前端編程提高之旅（十一）----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結構：

<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