1.可维护性：
- 可理解性：理解意图和一般途径
- 直观性：
- 可适应性
- 可拓展性
- 可调试性
2.代码约定：
1. 可读性：缩进与注释。 以下地方需要进行注释：
????? a. 函数和方法：描述目的和用于完成任务使用的算法
????? b. 大片段的代码：描述任务的注释
????? c. 复杂的算法：
????? d. Hack ?：因存在浏览器差异，js代码都会存在一些hack
? 2. 变量与函数命名
????? a. 变量名为名词
????? b. 函数名为以动词开始
????? c. 变量和函数都应该合乎逻辑，不要担心长度（长度问题通过后处理和压缩）
? 3. 变量类型透明：表示变量数据类型的方式
????? a. 初始化：var person=null;//对象 ????????var name="";//字符串
????? b. 其他的不常用
3 ?松散耦合：高耦合，不利于代码修改维护
- 1. 解耦HTML与JavaScript
- 2. ??解耦css/JavaScript
- 3. 解耦应用逻辑和事件处理程序
4编程实践：
? 1. ?尊重对象所有权：
????? a. 不要为实例或者原型添加属性
????? b. 不要为实例或者原型添加方法
????? c. 不要重定义已有的方法
????? d. 通过以下方法为对象创建新的功能：
????????? i. 创建包含对象所需功能的对象
????????? ii. 创建自定义类型。继承需要修改的类型
? 2. 避免全局变量
? 3. 避免与null进行比较 ?：看到与null的比较尝试替换为一下技术：
????? a. 如果值为引用类型，使用instanceof操作符
????? b. 如果值为基本类型，用typeof
? 4. 使用常量：将数据抽象出来变成单独定义的常量的方式
var Constants={INVALID_VLAUE_MSG:"invalid value",INVALID_VALUE_URL:"/error/invalid.php"};function validate(value){if(!value){alert(Constants.INVALID_VLAUE_MSG);location.href=Constants.INVALID_VALUE_URL;}}关键在于将数据和使用他的逻辑进行分离：
? ● 重复值：任何在多出用到的值都应该抽取为一个常量
? ● 用户界面定义字符串——任何用于显示给用户的字符串
? ● URLs——推荐用一个公共的地方存放url
? ● 任何可能会更改的值
5 ，性能随着作用域中作用域数量的增加，访问当前作用域以外的变量的时间也在增加。只要减少花费在作用域上时间，就能增加脚本的性能
1. 避免全局查找
// 改为function updateUI(){/*首先将document对象存放在本地的doc变量中，然后余下的代码替换为原来的document */var doc=document;var imgs=doc.getElementsByTagName("img");for (var index = 0; index < imgs.length; index++) {imgs[i].title=doc.title+"image"+index;}var msg=doc.getElementById("msg");msg.innerHTML="update complete";}
? 2. 避免with语句：with语句可以引入的新的作用域。由于额外的作用域链查找，故而浪费性能
6 ，选择正确的方法：
? 1. 避免不必要的属性查找： ?一旦多次调用对象属性，应该将其存储在局部变量中
? 2. 优化循环：
????? a. 减值迭代：从最大值开始，在循环中不断减值的迭代器更加高效
????? b. 简化终止条件：每次循环都会计算终止条件，所以要避免属性查找或者其他O(n)操作
????? c. 简化循环体：
????? d. 使用后测试循环：最常用的for和while循环都是前测试循环，如do-while是后测试循环，可以避免最终初始条件的计算，因此运行更快
var i = values.length - 1;if (i > -1) {do {process(value[i]);} while (--i >= 0);} 3. 展开循环：如果循环迭代次数事先不能确定，考虑使用一种叫duff装置的技术
? 4. 避免双重解释：js代码想解析js代码的时候存在双重解析惩罚。当时用eval（）函数或者是function构造函数以及setTimeout传入一个字符串参数时都会发生 ????
// 避免构造新的函数var sayName=new Function("alert(‘hello world‘);"); 5， 性能的其他注意事项：
? 1. 原生方法较快
? 2. switch语句较快
? 3. 位运算较快
7.最小化语句数——完成多个操作的单个语句比完成单个操作的多个语句快
? 1. 多个变量的声明：使用逗号 ?一个var一起声明
? 2. 插入迭代符：var name=value[i];i++;变为var name=value[i++];
? 3. 使用数组和对象自变量
8，优化DOM交互
在js各个方面中，DOM是最慢的一部分，DOM操作与交互要消耗大量的时间，因为它需要重新渲染整个页面或者某一个部分。
? 1. 最小化现场更新（即使页面修改次数 ?范围 尽量少）：使用文档片段来构建DOM结构，接着添加到List元素中
/* 最小化现场更新 */var list = document.getElementById("myList"),fragment = document.createDocumentFragment(),//创建一个新的空白的文档片段因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流(reflow)(对元素位置和几何上的计算)。item;for (var index = 0; index < 10; index++) {item = document.createElement("li");fragment.appendChild(item);item.appendChild(document.createTextNode(‘item‘ + index));}list.appendChild(fragment);
2.使用innerHTML：对于大的DOM更改，使用innerHTML要比使用标准DOM方法（如createElement（）与appendChild（）等）创建同样的DOM结构快
/* 使用innerHTML优化 */var list = document.getElementById("mylist"),html = ‘‘;for (var index = 0; index < 10; index++) {html += "<li>item" + index + "</li>";}list.innerHTML = html; 3.使用事件代理：任何可以冒泡的事件，不仅可以在事件目标上进行处理，目标的任何先祖节点上也能处理
4.注意HTMLCollection
HTMLCollection对象对于web性能影响巨大，最小化访问HTMLCollection的次数
/* HTMlCollection对象访问次数减少 */var images=document.getElementsByTagName(‘img‘),image;for (var i = 0; i < images.length; i++) {image = images[i];//把当前的图像赋值给image，在循环内就没有必要访问images的HTMLCollection了} 发生以下情况时，会返回HTMLCollection对象：
? 1. 进行了对getElementsByTagName（）的调用
? 2. 获取了元素的childNodes属性
? 3. 获取了元素的attributes属性
? 4. 访问了特殊的集合：如document.form ???document.images等
9 压缩：
? 1. 文件压缩： ?YUI压缩工具
? 2. HTTP压缩：大部分的WEB服务器都有HTTP压缩功能
JS最佳实践
原文地址：http://www.cnblogs.com/sundjly/p/7898878.html