|
|
前端時間對公司已有項目JavaScript代碼進行優化，本文的是對優化工作的一個總結，拿出來與大家分享。當然我的優化方式可能并不是最優的，或者說有些不對的地方，請指教。
JavaScript優化總結分為以下幾點
優化前后對比
優化前 | 優化后 |
代碼混亂，同樣功能的函數重復出現在多個地方。如果需要修改實現，需要找到所有的地方。牽一發而動全身 | 模塊化，提取公共接口組織為庫、結構清晰、方便代碼重用、并且能夠游戲防止變量污染問題。 |
JavaScript文件未壓縮，size比較大加載消耗網絡耗時，阻塞頁面渲染
| JavaScript公共庫文件使用UglifyJS壓縮：
|
使用時需要加載多個單獨的JavaScript文件，增加了http請求數降低性能 | 對公共庫合并壓縮在減少size的同時，減少http請求數 |
缺乏文檔（讓后面的開發者對已有功能不清楚，這在一定程度上造成前面說的，同樣功能的函數重復出現在多個地方） | 公共庫中每個類、函數、屬性都有說明文檔 |
- 模塊化（類編程）：代碼清晰、有效防止變量污染問題、代碼重用方便擴展等；
- 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; }}})();
it知識庫：JavaScript 項目優化總結，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
