JavaScript最佳实践：可维护性

代码约定

一、可读性

• 代码缩进
• 包含注释

二、变量和函数命名

• 变量名应为名词如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);
	}
};

三、使用常量

一个例子：

function validate(value){
	if(!value){
		alert("Invalid value!");
		location.href = "zhaoyuxiang.cn";
	}
}

如果日后需要对URL进行修改，都要找到函数并在其中修改代码。而每次修改应用逻辑的代码，都可能会引入错误。可以通过将数据抽取出来变成单独定义的常量的方式，将应用逻辑与数据修改隔离开来。

var Constants = {
	INVALID_VALUE_MSG: "Invalid value!",
	INVALID_VALUE_URL: "zhaoyuxiang.cn"
};
function validate(value){
	if(!value){
		alert(Constants.INVALID_VALUE_MSG);
		location.href = Constants.INVALID_VALUE_URL;
	}
}

消息和URL都被定义于Constants对象中，然后函数引用这些值。这些设置允许数据在无须接触使用它的函数的情况下进行变更。Constants对象甚至可以完全在单独的文件进行定义，同时该文件可以由包含正确值的其他过程根据国际化设置来生成。

需要注意的值的类型如下：

• 重复值——任何在多处用到的值都应抽取为一个常量。
• 用户界面字符串——任何用于显示给用户的字符串，都应被抽取出来以方便国际化。
• URLs——资源位置很容易变更，所以推荐用一个公共地方存放所有的URL。
• 任意可能会更改的值——每当你在用到字面量值的时候，你都要问一下自己这个值在未来是不是会变化。如果“是”，那么这个值就应该被提取出来作为一个常量。

---

（总结自《JavaScript高级程序设计》（第三版））

转载请注明出处：http://zhaoyuxiang.cn/blog/archivers/bestPracticesForJavaScript-maintainability