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