【原】javascript最佳实践

摘要：这篇文章主要内容的来源是《javascript高级程序设计第三版》，因为第二遍读完，按照书里面的规范，发觉自己在工作中没有好好遵守。所以此文也是对自己书写js的一种矫正。

1、可维护性

1.1

可理解性——其他人可以接手代码并理解它的意图和一般途径，而无需原开发人员的完整解释。

直观性——代码中的东西一看就能明白，不管其操作过程多么复杂。

可适应性——代码以一种数据上的变化不要求完全重写的方法撰写。

可扩展性——在代码架构上已考虑到在未来允许对核心功能进行扩展。

可调试性——当有地方出错时，代码可以给予你足够的信息来尽可能直接地确定问题所在。

1.2 代码约定：

变量和函数命名

　　命名的一般规则如下所示:

　　变量名应为名词如 car 或 person。

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

　　变量和函数都应使用合乎逻辑的名字，不要担心长度。长度问题可以通过后处理和压缩来缓解。

     变量类型透明:

// 通过初始化来指定变量的类型
var found=false; //布尔型
var count=-1;  //数字
var name='';   //字符串
var array=[];  //数组

　　

1.3松散耦合：

1.3.1、解耦HTML/javascript

就是说一些事件不要在html元素里面加onclick等来执行，而是将HTML和javascript分离，通过外部文件和使用DOM附加行为来包含javascript

1.3.2、解耦CSS/javascript 

就是说尽量是通过class名来控制样式，而不是在js里面书写样式。这样如果大量用js来改样式，维护上来说将是一场噩梦。

例如：

// bad
element.style.color="red";

//good
element.className="edit";

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

就是说 将应用逻辑 和事件处理程序相分离 ，这样两者分别处理各自的东西。如下：

//bad
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";
        }

    }
}

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

1.4 编程实践

1.4.1避免全局变量：

 // bad  两个全局变量，避免

 var name="Nicholas";
 function sayName(){
     alert(name);
 }

 // good    一个全局变量，推荐
 var MyApplication={
     name:"Nicholas",
     sayName:function(){
         alert(this.name);
     }
 }

 或者

// 如果变量和函数不需要在“外面”引用，可以写一个自执行函数
(function(){
  var name = 'Nicholas';
  function sayName(){
      alert(name);
  }
})();

1.4.2避免与null进行比较

// bad 
function sortArray(values){
    if(values !=null){
        values.sort(comparator); 
    }
}

//good 
function sortArray(values){
    if(values instanceof Array){
        values.sort(comparator); 
    }
}

　

2、性能

2.1注意作用域,使用全局查找要比局部查找开销大很多

// bad
//包含了三个对于全局document对象的引用。如果很多次，影响性能
function updateUI(){
	var imgs=document.getElementsByTagName('img');
	for(var i=0,len=imgs.length;i<len;i++){
		imgs[i].title=document.title+"image"+i;
	}
	var msg=document.getElementById('msg');
	mgs.innerHTML="Update complete .";
}

// good
//将document对象存在本地的doc中，然后在余下的代码中替换原来的document,只需要一次全局查找
function updateUI(){
	var doc=document;
	var imgs=doc.getElementsByTagName('img');
	for(var i=0,len=imgs.length;i<len;i++){
		imgs[i].title=doc.title+"image"+i;
	}
	var msg=doc.getElementById('msg');
	mgs.innerHTML="Update complete .";
}

2.2 选择正确的方法：

2.2.1. 避免不必要的属性查找

计算机算法的复杂度使用O来表示，其中最简单，最快捷的是O(1)。看下图

使用变量和数组要比访问对象上的属性更有效率前者是O(1)的操作，后者是一个 O(n)操作，

因为对象上的任何属性查找都要访问变量或者数组花费更长时间，因为必须在原型链中对拥有该名称的属性进行一次搜索。简而言之，属性查找越多，执行时间就越长。

例如：

//快
var value = 5;
var sum = 10 + value;
alert(sum);

// 快
var values = [5, 10];
var sum = values[0] + values[1];
alert(sum);

//较慢
var values = { first: 5, second: 10};
var sum = values.first + values.second;
alert(sum);

2.2.2   Switch 语句较快

如果有一系列复杂的 if-else 语句，可以转换成单个 switch 语句则可以得到更快的代码。 还可以通过将 case 语句按照最可能的到最不可能的顺序进行组织， 来进一步优化 switch 语句

2.2.3  最小化语句数

　　有个地方很多开发人员都容易创建很多语句，那就是多个变量的声明。很容易看到代码中由多个
var 语句来声明多个变量

　　然而，在 JavaScript 中所有的
变量都可以使用单个 var 语句来声明。

但是个人倾向于第一种写法。

//4 个语句 —— 很浪费
var count = 5;
var color = "blue";
var values = [1,2,3];
var now = new Date();

//一个语句
var count = 5,
color = "blue",
values = [1,2,3],
now = new Date();

//但是为了更好的维护，还是第一种写法比较好。而且不会那么容易出错。
//所以支持第一种写法

使用数组和对象字面量

// bad

//用 4 个语句创建和初始化数组——浪费
var values = new Array();
values[0] = 123;
values[1] = 456;
values[2] = 789;

//用 4 个语句创建和初始化对象——浪费
var person = new Object();
person.name = "Nicholas";
person.age = 29;
person.sayName = function(){
    
    alert(this.name);
};


// good

//只用一条语句创建和初始化数组
var values = [123, 456, 789];
//只用一条语句创建和初始化对象
var person = {
name : "Nicholas",
age : 29,
sayName : function(){

    alert(this.name);

    }
};

2.2.4  在For语句之外声明变量

// bad
// 每次迭代都需要检查数组的长度，并且每次都要遍历DOM树找到container元素—效率低
for(var i = 0; i < someArray.length; i++) {
    var container = document.getElementById('container');
    container.innerHtml += 'number: ' + i;
    console.log(i);
}

// good
var container = document.getElementById('container');
for(var i = 0, len = someArray.length; i < len; i++) {
    container.innerHtml += 'number: ' + i;
    console.log(i);
}

2.2.5 构建字符串的最快方式

// 这个方法比使用for更快
var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

2.3 压缩

2.3.1 文件压缩

原则：

 删除额外的空白（包括换行） ；
 删除所有注释；
 缩短变量名。

JavaScript 有不少压缩工具可用其中最优秀的（有争议的）是 YUI 压缩器   http://yuilibrary.com/

检测js代码是否有错的工具：JSLint   www.jslint.com

总结下来，发觉自己平时没有好好遵守这些规范，慢慢纠正