|
|
前端時間對公司已有項目JavaScript代碼進行優(yōu)化，本文的是對優(yōu)化工作的一個總結(jié)，拿出來與大家分享。當然我的優(yōu)化方式可能并不是最優(yōu)的，或者說有些不對的地方，請指教。
JavaScript優(yōu)化總結(jié)分為以下幾點
優(yōu)化前后對比
優(yōu)化前 | 優(yōu)化后 |
代碼混亂，同樣功能的函數(shù)重復(fù)出現(xiàn)在多個地方。如果需要修改實現(xiàn)，需要找到所有的地方。牽一發(fā)而動全身 | 模塊化，提取公共接口組織為庫、結(jié)構(gòu)清晰、方便代碼重用、并且能夠游戲防止變量污染問題。 |
JavaScript文件未壓縮，size比較大加載消耗網(wǎng)絡(luò)耗時，阻塞頁面渲染
| JavaScript公共庫文件使用UglifyJS壓縮：
|
使用時需要加載多個單獨的JavaScript文件，增加了http請求數(shù)降低性能 | 對公共庫合并壓縮在減少size的同時，減少http請求數(shù) |
缺乏文檔（讓后面的開發(fā)者對已有功能不清楚，這在一定程度上造成前面說的，同樣功能的函數(shù)重復(fù)出現(xiàn)在多個地方） | 公共庫中每個類、函數(shù)、屬性都有說明文檔 |
- 模塊化（類編程）：代碼清晰、有效防止變量污染問題、代碼重用方便擴展等；
- JavaScript壓縮混淆：減少size優(yōu)化加載時間，混淆保護代碼；
- JavaScript文件合并：減少http請求優(yōu)化網(wǎng)絡(luò)耗時提升性能；
- 生成文檔：方便公共庫的使用，查找接口方便。
模塊化（類編程）
對于靜態(tài)類來說JavaScript實現(xiàn)比較簡單，使用Object直接量就已經(jīng)夠用了；但是要創(chuàng)建實例化、可繼承經(jīng)典的類需要做一番工作。因為JavaScript是基于原型的（prototype-based）編程語言，并沒有包含內(nèi)置類的實現(xiàn)（它沒有訪問控制符，它沒有定義類的關(guān)鍵字class，它沒有支持繼承的extend或冒號，它也沒有用來支持虛函數(shù)的virtual等），但是我們通過JavaScript可以輕易地模擬出經(jīng)典的類。
靜態(tài)類
根據(jù)寶寶JS公共接口的特性，它們不需要實例化，所以優(yōu)化使用了該方式。下面以PetConfigParser為例介紹下實現(xiàn)方式：
var PetConfigParser;if (!PetConfigParser) { PetConfigParser = {};}(function () { //private 變量、函數(shù) /** * 寶寶所有配置字典，以【cate * 10000 + (lvl - 1) * 10 + dex - 1】為key * @attribute petDic * @type {Object} * @private */ var petDic = null; //寶寶字典 /** * 根據(jù)__pet_config構(gòu)建一個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 接口 /** * 根據(jù)寶寶id，讀取__pet_config中對應(yīng)寶寶的信息 * @method getPetById * @param {String/int} petId 寶寶id * @return {Object} pet 寶寶的所有靜態(tài)信息，如{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 項目優(yōu)化總結(jié)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
