JavaScript 專案優化總結

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

JavaScript優化總結分為以下幾點

優化前後對比

優化前

優化後

程式碼混亂，同樣功能的函數重複出現在多個地方。如果需要修改實現，需要找到所有的地方。牽一發而動全身 模組化，提取公共介面組織為函式庫、結構清晰、方便程式碼重複使用、能夠遊戲防止變數污染問題。

JavaScript檔案未壓縮，size比較大載入消耗網路耗時，阻塞頁面渲染JavaScript公共程式庫檔案使用UglifyJS壓縮：

●   Size比較小優化了網路載入時間

●   壓縮混淆了程式碼，在一定程度上保護程式碼

使用時需要載入多個單獨的JavaScript文件，增加了http請求數降低效能對公用程式庫合併壓縮在減少size的同時，減少http請求數

缺乏文件（讓後面的開發者對已有功能不清楚，這在一定程度上造成前面說的，同樣功能的函數重複出現在多個地方） 公共庫中每個類別、函數、屬性都有說明文件

●   模組化（類別程式設計）：程式碼清晰、有效防止變數污染問題、程式碼重複使用方便擴充等；

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

●   JavaScript檔案合併：減少http請求最佳化網路耗時提升效能；

●   JavaScript檔案合併：減少http請求最佳化網路耗時提升效能；

●   產生文件：方便公共庫的使用，尋找介面方便。

 

模組化（類別程式設計）

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

靜態類別

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

 

var PetConfigParser;

if (!PetConfigParser) {

    PetConfigParser = {figParser) {

    PetConfigParser = {figParser) {

 

    //private 變數、函數

    /**

     * 寶寶所有設定字典，以【cate * 10000 + (lvl - 1) * 10 + dex - 1】為key

     * @attribute    * @private

     */

    var petDic = null;  //寶寶字典

 

        petDic = new Object() ;

        for (var item in __pet_config) {

            var lvl = parseInt(__pet_config[item]['lvl']); config[item]['dex']);

            var cate = parseInt(__pet_config[item]['cate']);

            var key = cate * 10000 + (lvl - 1) * 我

        }

    }

 

    //public 介面

 

    /**

     * 依照__pet_config建構一個Object字典，使用cate、dex、lvl組合為key

     * @method buildPetDic

} @pri   */

)   if (    PetConfigParser.getPetById = function (petId) {

            var pet = ("undefined" == typeof (__pet_config)) ? null : __pet_config["pet_" + petId];

            return pet;

        }

}

})();

 域在內部存取功能總結上述過程分為以下步驟：

1)        定義一個全域的變數（var PetConfigParser），注意變數首字母大寫與普通變數差異；

(2)        然後建立一個匿名函數並執行匿名函數並執行匿名函數並執行匿名函數並執行一個匿名函數並執行匿名函數並執行匿名函數並執行匿名函數）（function) {/*xxxx*/ })(); ），在匿名函數內部創建局部變數和函數，它們只能在目前作用域中被存取；

3)        全域變數（var PetConfigParser）可以在任何地方存取到，在匿名函數內部操作PetConfigParser中新增靜態函數。

使用實例：

 

$(function () {

 

        DialogManager.in p. () {

 

            DialogManager.show ("#msgBoxTest", "#closeId");

 

            return false;

 

#cofirmBtn').click(function () {

 

            DialogManager. hide();

 

            return false;

 

       );總結有三種方法：

●  建構函數方式；

●  原型方式；

●  建構子+原型的混合方式

建構子方式

建構子用來初始化實例物件的屬性和值。任何JavaScript函數都可以用作建構函數，建構函數必須使用new運算子作為前綴來建立新的實例。

 

var Person = function (name) {

    this.name = name;

    this.sayName = function(){

    this.sayName = function(){

}

 

//實例化

var tyler = new Person("tylerzhu");

var saylor = new Person("saylorzhu");

tyler.sayName();

saylor.

tyler.sayName();

saylor.

tyler.sayName();

saylor。檢查實例

alert(tyler instanceof Person);

建構函式方式跟傳統的物件導向語言是不是很相識！只不過是class關鍵字用function取代了。

注意：不要省略new否則Person(“tylerzhu”) //==>undefined。當使用new關鍵字來呼叫建構函式時，執行上下文（context）會從全域物件（window）變成一個空的上下文，這個上下文代表了新產生的實例。因此，this關鍵子指向目前建立的實例。所以省略new時，沒有進行上下文切換會在全域物件中尋找name，沒有找到而建立一個全域變數name回傳undefined。

原型方式

建構函式方式簡單，但是有一個浪費記憶體的問題。如同上面的例子中實例化了兩個對象tyler、saylor，表面上好像沒什麼問題，但是實際上對於每一個實例對象，sayName()方法都是一模一樣的內容，每一次生成一個實例，都必須為重複的內容申請內容。

alert(tyler. sayName == saylor. sayName) 輸出false！ ！ ！

Javascript中每一個建構子都有一個prototype屬性，指向另一個物件。這個物件的所有屬性和方法，都會被建構函數的實例共用。

 

var Person = function (name) {

    Person.prototype = name;

    Person.prototype.sayName = function(){

}

 

//實例化

var tyler = new Person("tylerzhu");

var saylor = new Person("saylorzhu");

tyler.sayName();

lor.Name();

//檢查實例

alert(tyler instanceof Person);

這時tyler、saylor實例的sayName方法，都是同一個記憶體位址（指向prototype物件），因此原型方法更節省記憶體。

但是看tyler.sayName();saylor.sayName();兩者輸出，會看出問題 —— 它們都輸出「saylorzhu」。因為原型所有屬性都共享，只要一個實例改變其他的都會跟著改變，所以實例化物件saylor覆蓋了tyler。

構造函數+原型的混合方式

構造函數方式可以為同一個類別的每一個物件分配不同的內存，這很適合寫類別的時候設定屬性；但是設定方法的時候我們就需要讓同一個類別的不同物件共享同一個內存了，寫方法用原型的方式最好。所以寫類別的時候需要把構造方法和原型兩種方式混合著用（很多類別庫提供的創建類別的方法或框架的寫類別方式本質上都是：構造函數+原型）。

 

var Person = function (name) {

    Person.prototype = name;

    Person.prototype.sayName = function(){

}

 

//實例化

var tyler = new Person("tylerzhu");

var saylor = new Person("saylorzhu");

tyler.sayName(); /檢查實例

alert(tyler instanceof Person);

這樣即可透過建構子建構不同name的人，物件實例也都共享sayName方法，不會造成記憶體浪費。

JavaScript壓縮/合併

JavaScript程式碼壓縮混淆的意義：簡單的說就是為了減小js檔案大小，去掉多餘的註解和換行縮排等，使得下載起來更快，提高使用者體驗。

JavaScript壓縮工具很多，我推薦使用jQuery現在使用的工具UglifyJS（jQuery以前也使用過多種壓縮工具，如Packer），因為它壓縮性能很好。

「jQuery 1.5 發佈的時候 john resig 大神說所用的程式碼最佳化程式從Google Closure切換到UglifyJS，新工具的壓縮效果非常令人滿意」