JavaScript 代码优化和部署——“可维护性”的注意要点

代码约定

可读性

以下地方需要进行注释：

• 函数和方法：注释参数代表什么，是否有返回值；

• 大段代码：描述任务的注释；

• 复杂的算法；

• Hack

变量和函数命名

• 变量用名词；

• 函数名用动词开头：getName()等；

  • 返回布尔值类型的函数用isEnable()等；

• 合乎逻辑不用担心太长；

变量类型透明化

方法一：初始化，如下：()推荐)

var isFound = false; //boolean
var name = ""; //String
var num = 0; //Number
var person = null; //Object

方法二：匈牙利标记法

var bIsFound; //boolean
var sName; //String
var nNum; //Number
var oPerson; //Object

方法三：使用类型注释

var bIsFound /*boolean*/ = false;
var sName /*string*/ = "";
var nNum /*number*/ = 0;
var oPerson /*object*/ = null;

松散耦合

HTML/JavaScript

应该通过引用外部文件和使用DOM附加行为来包含js代码

CSS/JavaScript

应该通过动态更改样式的类（className）而非特定样式来实现

编程习惯

尊重对象所有权

不要修改和编辑不属于你的对象，以及js原生类型对象

避免全局量

尽量避免全局变量和函数：

var name = "";
function setName(value) {
    name = value;
}
function sayName() {
    console.log(name);
}

上面的代码应该包含在一个对象中：

var setPersonName = {
    name: "",
    setName: function (value) {
        this.name = value;
    },
    sayName: function () {
        console.log(this.name);
    }
};
setPersonName.setName("Oli");
setPersonName.sayName(); //Oli

使用命名空间

使用多个命名空间，其中的内容互不干扰：

//全局对象
var Wrox = {};
//一个命名空间
Wrox.ProAjax = {};
Wrox.ProAjax.EventUtil = {};
Wrox.ProAjax.CookieUtil = {};
//另一个命名空间
Wrox.ProJS = {};
Wrox.ProJS.EventUtil = {};
Wrox.ProJS.CookieUtil = {};

避免与null比较

当看到了与null比较的代码，应该用以下技术替换：

• 引用类型，用instanceof等；

• 基本类型，用typeof等；

使用常量

（略）