JavaScript最佳实践：可维护性

2016-05-04 本文已影响520人 Daredevil

代码约定

一、可读性

代码缩进
包含注释

二、变量和函数命名

变量名应为名词如car或person
函数名应该以动词开始，如getName()。返回布尔类型值的函数一般以is开头，如isEnable()。

三、变量类型透明

1.通过初始化指定变量类型

var fonund = false; //布尔型   
var count = -1;     //数字   
var name = "";      //字符串   
var person = null;  //对象

2.使用匈牙利标记法来指定变量类型
“o”代表对象，“s”代表字符串，“i”代表整数，“f”代表浮点数，“b”代表布尔型。

var bFound;  //布尔型
var iConunt; //整数
var sName;   //字符串
var oPerson; //对象

松散耦合

一、解耦HTML/JavaScript

避免使用包含内联代码的<script>元素或者是使用HTML属性来分配事件处理程序。
避免在JavaScript中创建大量HTML。

二、解耦CSS/JavaScript

//CSS对JavaScript的紧密耦合
element.style.color = "red";
element.style.background = "blue";

尽量通过修改类名来改变样式，让大部分样式信息严格保留在CSS中。

//CSS对JavaScript的松散耦合
element.className = "edit";

三、解耦应用逻辑/事件处理程序

一个例子：

function handleKeyPress(event){
    event = EventUtil.getEvent(event);
    if(event.keyCode == 13){
        var target = EventUtil.getTarget(event);
        var value = 5 * parseInt(target.value);
        if(value > 10){
            document.getElementById("error-msg").style.display = "block";
        }
    }
}

当按下Enter键，取得事件的目标并传递value属性，这是一个应用逻辑。得到属性之后通过判断值来改变样式则为事件处理。
可以重写为：

function handleKeyPress(event){
    event = EventUtil.getEvent(event);
    if(event.keyCode == 13){
        var target = EventUtil.getTarget(event);
        validateValue(target.value);
    }
}
function validateValue(value){
    var value = 5 * parseInt(target.value);
    if(value > 10){
        document.getElementById("error-msg").style.display = "block";
    }
}

从事件处理程序中分离应用逻辑的好处：

可以更容易更改触发特定过程的事件。如果最开始由鼠标点击事件触发过程，但现在按键也要进行同样处理，这种更改就很容易。
可以在不附加到事件的情况下测试代码，使其更易创建单元测试或者是自动化应用流程。

编程实践

一、尊重对象所有权

在企业环境中最重要的编程实践就是尊重对象所有权，它的意思是你不能修改不属于你的对象。如果你不负责创建或维护某个对象、它的对象或者它的方法，那么你就不能对它们进行修改。

不要为实例或原型添加属性；
不要为实例或原型添加方法；
不要重定义已存在的方法；

二、避免全局变量

//两个全局变量——避免！
var URL = "zhaoyuxiang.cn";
function sayURL(){
    alert(URL);
}

这段代码包含了两个全局变量：变量URL和函数sayURL()。其实可以创建一个包含两者的对象。

//一个全局变量——推荐
var MyApplication = {
    URL: "zhaoyuxiang.cn",
    sayURL: function(){
        alert(this.URL);
    }
};

三、使用常量