前端編程提高之旅(十一)—-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下創建p並設置數據 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

發佈留言