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;  
        });  
})