JavaScript項目最佳化總結(1)

前端時間對公司已有項目JavaScript代碼進行最佳化，本文的是對最佳化工作的一個總結，拿出來與大家分享。當然我的最佳化方式可能並不是最優的，或者說有些不對的地方，請指教。

JavaScript最佳化總結分為以下幾點

最佳化前後對比

模組化類編程）：代碼清晰、有效防止變數汙染問題、代碼重用方便擴充等；

JavaScript壓縮混淆：減少size最佳化載入時間，混淆保護代碼；

JavaScript檔案合并：減少http請求最佳化網路耗時提升效能；產生文檔：方便公用庫的使用，尋找介面方便。

模組化類編程）

對於靜態類來說JavaScript實現比較簡單，使用Object直接量就已經夠用了；但是要建立執行個體化、可繼承經典的類需要做一番工作。因為JavaScript是基於原型的prototype-based）程式設計語言，並沒有包含內建類的實現它沒有存取控制符，它沒有定義類的關鍵字class，它沒有支援繼承的extend或冒號，它也沒有用來支援虛函數的virtual等），但是我們通過JavaScript可以輕易地類比出經典的類。

靜態類

根據寶寶JS公用介面的特性，它們不需要執行個體化，所以最佳化使用了該方式。下面以PetConfigParser為例介紹下實現方式：

 

  
var PetConfigParser;  
  
if (!PetConfigParser) {  
  
    PetConfigParser = {};  
  
}  
  
(function () {  
  
    //private 變數、函數  
  
    /**  
  
     * 寶寶所有配置字典，以cate * 10000 + (lvl - 1) * 10 + dex - 1】為key  
  
     * @attribute    petDic  
  
     * @type {Object}  
  
     * @private  
  
     */ 
  
    var petDic = null;  //寶寶字典  
  
    /**  
  
     * 根據__pet_config構建一個Object字典，以cate、dex、lvl組合作為key  
  
     * @method buildPetDic  
  
     * @private  
  
     * @return {void}  
  
     */ 
  
    function buildPetDic() {  
  
        petDic = new Object();  
  
        for (var item in __pet_config) {  
  
            var lvl = parseInt(__pet_config[item]['lvl']);  
  
            var dex = parseInt(__pet_config[item]['dex']);  
  
            var cate = parseInt(__pet_config[item]['cate']);  
  
            var key = cate * 10000 + (lvl - 1) * 10 + dex;  
  
            petDic[key] = __pet_config[item];  
  
        }  
  
    }  
  
    //public 介面  
  
    /**  
  
     * 根據寶寶id，讀取__pet_config中對應寶寶的資訊  
  
     * @method getPetById  
  
     * @param   {String/int} petId 寶寶id  
  
     * @return  {Object} pet 寶寶的所有靜態資訊，如{id:"300003289", lvl:"1", dex:"2", price:"200", life:"2592000", cate:"3", name:"飛天小使等級1熟練2", intro:"", skill:"護身符", skill1_prob:"30", skill2_prob:"0"}  
  
     */ 
  
    if (typeof PetConfigParser.getPetById !== 'function') {  
  
        PetConfigParser.getPetById = function (petId) {  
  
            var pet = ("undefined" == typeof (__pet_config)) ? null : __pet_config["pet_" + petId];  
  
            return pet;  
  
        }  
  
}  
  
})();  
 

這種方式利用了JavaScript匿名函數來建立私人範圍，這些私人範圍只能在內部訪問。總結上述過程分為以下幾個步驟：

定義一個全域的變數var PetConfigParser），注意變數首字母大寫與普通變數區別；

然後建立一個匿名函數並運行 (function () {/*xxxx*/ })(); ），在匿名函數內部建立局部變數和函數，它們只能在當前範圍中被訪問到；

全域變數var PetConfigParser）可以在任何地方訪問到，在匿名函數內部操作PetConfigParser添加靜態函數。

使用執行個體：

 

  
$(function () {  
  
        DialogManager.init();  
  
        $('#showDialog').click(function () {  
  
            DialogManager.show("#msgBoxTest", "#closeId");  
  
            return false;  
  
        });  
  
        $('#cofirmBtn').click(function () {  
  
            DialogManager.hide();  
  
            return false;  
  
        });  
  
})