JavaScript可维护性

可维护性
什么是可维护性：
如果说代码是可维护的，它需要遵循以下的特点：
（1）可理解性：其他人可以接手代码并理解它的意图和一般路径，而无需原开发人员的完整解释。
（2）直观性：代码中的东西一看就能明白，不管其操作过程多么复杂。
（3）可适应性：代码以一种数据上的变化不要求完全重写的方法撰写。
（4）可扩展性：在代码架构上已考虑到在未来允许对核心功能进行扩展。
（5）可调试性：当有地方出错时，代码可以给予你足够的信息来尽可能直接地确定问题所在。
实现代码可维护性的路径：
代码上的约定

1. 可读性
   要让代码可维护，首先它必须可读。可读与代码作为文本的格式化方式有关。可读性的大部分内容都是和代码的缩进相关的。可读性的另一方面就是注释。
   一般而言需要注释的地方：
   （1）函数和方法：每个函数或方法都应该包含一个注释，描述其目的和用于完成任务所可能使用的算法。
   （2）大段的代码：用于完成单个任务的多行代码应该在前面放一个描述任务的注释。
   （3）复杂的算法：如果使用了一种独特的方式解决某个问题，则要在注释中解释你是如何做的。
   （4）Hack：因为存在浏览器差异，JavaScript代码一般会包含一些Hack，需要注释解释下。
2. 变量和函数命名
   适当的给变量和函数起名字对于增加代码的可理解性和可维护性是非常重要的。
   一般命名规则：
   （1）变量名应为名词如car或person。
   （2）函数名应该以动词开始，如getName()。返回布尔类型值的函数一般以is开头，如isEnable()。
   （3）变量和函数名都应使用合乎逻辑的名字，不要担心长度。长度问题可以通过后处理和压缩来缓解。
3. 变量类型透明
   有三种表示数据类型的方式：
   （1）初始化，当定义了一个变量后，它应该被初始化为一个值，来暗示它将来应该如何应用。

var found=false;
var count=-1;
var name="";
var person=null;

初始化为一个特定的数据类型可以很好的指明变量的类型。但缺点是无法用于函数声明中的函数参数。
（2）使用匈牙利标记法来指定变量类型。JavaScript中最传统的匈牙利标记法是单个字符便是基本类型："o"代表对象，"s"代表字符串，"i"代表整数，"f"代表浮点数，"b"代表布尔型。

var bFound;
var iCount;
var sName;
var oPerson;

匈牙利标记法的好处是函数参数一样可以使用。但它的缺点是让代码在某种程度上难以阅读。
（3）指定变量类型的方式使用变量注释。

var found /*:Boolean*/ =false;
var count /*:int*/ =-1;
var name  /*:iString*/ ="";
var person /*:Object*/ =null;

类型注释维持了代码的整体可读性，同时注入类型信息。类型注释的缺点是你不能用多行注释一次注释大块的代码，因为类型注释也是多行注释会冲突。
2. 松散耦合
只要应用的某个部分过分依赖于另一部分，代码就是耦合过紧，难以维护。
（1）解耦HTML/JavaScript
如果HTML中包含JavaScript，那么HTML和JavaScript应该完全分离，并通过外部文件和使用DOM附加行为来包含JavaScript。
如果JavaScript中包含HTML，通常会出现使用innerHTML来插入一段HTML文本到页面上。HTML呈现应该尽量与JavaScript保持分离。当JavaScript用于插入数据时，尽量不要直接插入标记。一般可以在页面中直接包含并隐藏标记，然后等整个页面渲染好之后，就可以用JavaScript显示该标记，而非生成它。另一种方法是进行Ajax请求并获取更多要显示的HTML。
（2）解耦CSS/JavaScript
通过只修改某个元素的CSS类，就可以让大部门样式信息严格保留在CSS中。JavaScript可以更改样式类，并不会直接影响到元素的样式。
（3）解耦应用逻辑/事件处理程序

function handleKeyPress(event){
	event=event||window.event;
	if(event.keyCode==13){
		var target=target||target.srcElement;
		var value=5*parseInt(target.value);
		if(value>10){
			document.getElementById("error-msg").style.display="block";
		}
	}
}
//推荐
function validateValue(value){
	var value=5*parseInt(value);
	if(value>10){
		document.getElementById("error-msg").style.display="block";
	}
}
function handleKeyPress(event){
	event=event||window.event;
	if(event.keyCode==13){
		var target=target||target.srcElement;
		validateValue(target.value)
	}
}

3. 编程实践
   （1）尊重对象所有权
   不要为实例或原型添加属性
   不要为实例或原型添加方法
   不要重定义已存在的方法
   （2）避免全局变量

var name="Nicholas";
function getName(){
	console.log(name);
}
//推荐
var MyApplication={
	name:"Nicholas",
	getName:function(){
		console.log(this.name);
	}
}

（3）避免与null进行比较

function sortArray(values){
	if(values!=null){//避免
		values.sort(comparator);
	}
}
function sortArray(values){
	if(values instanceof Array){//推荐
		values.sort(comparator);
	}
}

（4）使用常量

function validate(value){
	if(!value){
		console.log("Invalid value!");
		location.href="/errors/invalid.php";
	}
}
//推荐
var Constants={
	INVALID_VALUE_MSG:"Invalid value!",
	INVALID_VALUE_URL:"/errors/invalid.php"
}
function validate(value){
	if(!value){
		console.log(Constants.INVALID_VALUE_MSG);
		location.href=Constants.INVALID_VALUE_URL;
	}
}

注：内容来源于JavaScript高级程序设计（第三版），有什么不理解的可以详细看下这本书，很值得推荐的一本书。