javascript编码规范

一. 一些致使js性能缓慢的例子

DOM访问执行DOM交互的代码比i通常的js代码要慢。DOM交互是不可避免的，可是尽可能的减小。

例如：

• 动态的使用innerHTML插入HTML语句比建立DOM节点更快。
•  eval不管何时，避免使用eval方法，由于执行这一方法会形成很大的开销。
•  with尽可能不要使用with
•  for-in 循环

二. js陷阱

• 避免使用eval和Function constructor使用eval或者function constructor会加大开销由于每一次脚本引擎调用他们是必须将源码转换成可执行代码；另外，使用eval时，字符串会在执行时被打断
• 避免使用with
• 不要在对性能影响很大的地方使用：try-catch-finally
• 避免使用全局变量 
• 避免在对性能影响较大的地方使用for-in，for in循环须要脚本引擎构建一个枚举属性列表，并且每次都要从头重复检查
• 使用字符串累加模式
• 原生的操做比函数更快
• 将函数而不是字符串传到setTimeout()和setInterval()中
• 避免对象里不必的DOM引用 
• 最大化对象解析速度，最小化做用域链
• 尽可能让脚本声明的变量短一点，不要太长，特别是循环里面的变量
• 将自身引用存储在做用域外的变量中。当一个funciton被执行时，一个执行的上下文（context）会被建立，被激活的对象将全部自身变量push到上下文（context）的做用域链以前。离做用域链越远，解析的越慢，这也意味着做用域本地的变量时解析的最快的。 将自身引用用做用域以外的变量存储，读写都会变的更快，这在全局变量和一些深度查找的资源解析中特别明显。固然，做用域内定义的变量比使用对象自身访问的速度更快。假如你须要在一个大循环中访问一个dom，这样子会更快：

三. 加载性能一些能够提升的点

• 更快的加载和展示页面可让js加载没有阻塞(采用异步加载js方法)
• 添加Experes或者Cache-Control HTTPheader
• Gzip javascript和css资源
• 利用YUI或者JSMin压缩代码
• 尽可能减小资源的数目和大小
• 让脚本无阻赛并行下载
• 合并异步加载的脚本
• 将行内脚本放到样式表之上？有待考证，不科学
• 少用iframe

四. 不为人知的DOM

dom性能缓慢能够归结为一下3个缘由：

• 大规模的DOM操做
• 脚本触发太多的重构和重绘
• 定位节点在DOM中的路径慢

解决方案

• 尽量减少DOM的大小
• 使用文档的组件模板来进行复用动态的在dom中插入或者更新元素是代价很大的。一个有效的方法来解决这个问题是利用HTML模板来插入一些对话框或者UI组件。
• 最小化重绘和重构的次数重绘发生在一些元素可见或者隐藏的时候，可是没有改变document的布局重构发生在DOM的操做方式影响到布局。重构的代价比重绘大的多得多。重构表格比重构块状元素代价大绝对定位的元素不会对document的布局产生影响DOM的修改会触发重绘
• 参考资料：
• Repaint and reflow at Opera Developer Network
• Notes on HTML Reflow – more detailed information on the reflow process (archived)
• Reflows & Repaints: CSS Performance making your JavaScript slow
• Go With The Reflow
• Rendering: repaint, reflow/relayout, restyle
• 利用cloneNode()
• 利用HTML模板和innerHTML
• 设定元素不可见再进行改变（质疑，appendChild不会重发重绘，js执行完成之后才会）
• 尽可能少的使用改变元素尺寸或位置的操做
• 使用className来完成多个预约义样式的的改变
• 利用设定属性来动态完成多个样式的设定
• css class name vs. style属性
• 不要遍历大量的节点，避免在遍历时改变dom结构
• 将DOM元素缓存在变量中使用
• 在dom元素使用完之后移除引用

五. 面向对象的Javascript

考虑使用继承机制

六. client-server对话

对XMLHttpRequest设定超时时间

考虑使用约定的数据来作大数据的处理，好比选择xml或者json

七. 动画

• 选择性的使用动画
• 使用scrollTo()方法来实现滚动动画
• 将动画元素的position设置为absolute或者fix
• 在同一时间使用一个timer来服务多个动画元素
• 让动画的速度更平滑

八. 事件

• 利用事件冒泡
• 不要对一些常常触发的event使用代理
• Javascript调用栈使用setTimeout不会溢出缘由是setTimeout是伪异步的，把函数交给setTimeout处理后，原来的函数不会等待，会继续执行，函数会结束，资源也就能够释放。而不用setTimeout的时候，函数必须等待调用的函数返回后才能继续执行，但调用的函数又必须等待下一级函数，这样全部函数都不能结束，资源也就释放不出。换句话说，就是死锁。

九. 命名规范

目的：提升代码可预测性和可维护性的方法是使用命名约定，这就意味着采用一致的方法来对变量和函数进行命名。

变量名

变量名包括全局变量，局部变量，类变量，函数参数

构造函数（类）命名

首字母大写，驼峰式命名。

JS中没有类，可是能够用new调用构造函数：var man = new Person();

普通变量命名

首字母小写，驼峰式命名，匈牙利命名

如：nCheckCount 表示整形的数值

匈牙利命名法

匈牙利命名法语法：变量名＝类型＋对象描述

类型指变量的类型

对象描述指对象名字全称或名字的一部分，要求有明确含义，命名要容易记忆容易理解。

提示: 虽然JavaScript变量表面上没有类型，可是JavaScript内部仍是会为变量赋予相应的类型

JavaScript变量起名类型	变量命名前缀	举例
Array 数组	a	aList，aGroup
Boolean 逻辑	b	bChecked，bHasLogin
Function 函数	f	fGetHtml，fInit
Integer 数字	n	nPage，nTotal
Object 对象	o	oButton，oDate
Regular Expression 正则	r	rDomain，rEmail
String 字符	s	sName，sHtml

 

 

其余前缀规范

可根据团队及项目须要增长

$：表示Jquery对象

例如：$Content，$Module，一种比较普遍的Jquery对象变量命名规范。

fn：表示函数

例如：fnGetName，fnSetAge；和上面函数的前缀略有不一样，改用fn来代替，我的认为fn可以更好的区分普通变量和函数变量。 

例外状况

以根据项目及团队须要，设计出针对项目须要的前缀规范，从而达到团队开发协做便利的目的。

做用域不大临时变量能够简写，好比：str，num，bol，obj，fun，arr。

循环变量能够简写，好比：i，j，k等。

某些做为不容许修改值的变量认为是常量，所有字母都大写。例如：COPYRIGHT，PI。常量能够存在于函数中，也能够存在于全局。必须采用全大写的命名，且单词以_分割，常量一般用于ajax请求url，和一些不会改变的数据。

函数命名

普通函数：首字母小写，驼峰式命名，统一使用动词或者动词+名词形式

例如：fnGetVersion()，fnSubmitForm()，fnInit()；涉及返回逻辑值的函数可使用is，has，contains等表示逻辑的词语代替动词，例如：fnIsObject()，fnHasClass()，fnContainsElment()。

内部函数：使用_fn+动词+名词形式，内部函数必需在函数最后定义。

例如：

function fnGetNumber(nTotal) {    if (nTotal < 100) {        nTotal = 100;    }    return _fnAdd(nTotal);     function _fnAdd(nNumber) {        nNumber++;        return nNumber;    }}alert(fGetNumber(10)); //alert 101

对象方法与事件响应函数：对象方法命名使用fn+对象类名+动词+名词形式；

例如： fnAddressGetEmail()，

事件响应函数：fn+触发事件对象名+事件名或者模块名

例如：fnDivClick()，fnAddressSubmitButtonClick()

函数方法经常使用的动词：

get 获取/set 设置,        

add 增长/remove 删除create 建立/destory 移除        

start 启动/stop 中止open 打开/close 关闭,        

read 读取/write 写入load 载入/save 保存,        

create 建立/destroy 销毁begin 开始/end 结束,       

 backup 备份/restore 恢复import 导入/export 导出,        

split 分割/merge 合并inject 注入/extract 提取,        

attach 附着/detach 脱离bind 绑定/separate 分离,       

 view 查看/browse 浏览edit 编辑/modify 修改,        

select 选取/mark 标记copy 复制/paste 粘贴,        

undo 撤销/redo 重作insert 插入/delete 移除,        

add 加入/append 添加clean 清理/clear 清除,        

index 索引/sort 排序find 查找/search 搜索,        

increase 增长/decrease 减小play 播放/pause 暂停,       

 launch 启动/run 运行compile 编译/execute 执行,        

debug 调试/trace 跟踪observe 观察/listen 监听,       

 build 构建/publish 发布input 输入/output 输出,       

 encode 编码/decode 解码encrypt 加密/decrypt 解密,        

compress 压缩/decompress 解压缩pack 打包/unpack 解包,        

parse 解析/emit 生成connect 链接/disconnect 断开,        

send 发送/receive 接收download 下载/upload 上传,        

refresh 刷新/synchronize 同步update 更新/revert 复原,       

 lock 锁定/unlock 解锁check out 签出/check in 签入,        

submit 提交/commit 交付push 推/pull 拉,       

 expand 展开/collapse 折叠begin 起始/end 结束,       

 start 开始/finish 完成enter 进入/exit 退出,        

abort 放弃/quit 离开obsolete 废弃/depreciate 废旧,        

collect 收集/aggregate 汇集

变量命名例子

为何须要这样强制定义变量前缀？正式由于javascript是弱语言形成的。在定义大量变量的时候，咱们须要很明确的知道当前变量是什么属性，若是只经过普通单词，是很难区分的。

普通代码

var checked = false;

var check = function() {  

　　 return true;

}

/**some code**/

 if(check) {

//已经没法很确切知道这里是要用checked仍是check()从而致使逻辑错误    

//do some thing

}

规范后代码

var bChecked = false;

var fnCheck = function() {   

　　 return true;

}

/**some code**/ 

if(bChecked) {   

　　 // do some thing

}

if(fnCheck()) {   

 // do other thing

}

如何标明私有方法或私有属性？

var person = {    

　　getName: function () {

       　　 return this._getFirst() + ' ' + this._getLast();    

　　},    

　　_getFirst: function () {       

　　　　 //...    

　　},   

　　 _getLast: function (){    

　　　　    //...   

　　 }

};

在这个例子中，getName()觉得这这是API的一个公开的方法，而_getFirst()和_getLast()意味着这是一个私有函数。尽管他们都是普通的公开方法，可是使用下划线前缀的表示方法能够提醒使用person对象的用户，告诉他们这些方法在其余地方不能确保必定可以正常工做，不能直接调用。

总结：下面是一些使用下划线约定的变量

使用下划线结尾来代表是私有变量，例如name_和getElements_()。

使用一个下划线前缀来表示受保护属性，使用两个下划线前缀来表示私有属性。

十. 编写注释

为代码编写注释是很是重要的。一般人们在深刻思考一个问题时，会很是清楚这段代码的工做原理。可是当过一周后再次回到该代码时，可能会花上很长时间来回想起那段代码究竟是干什么的。

公共组件维护者和各栏目WD都须要在文件头部加上注释说明：

/** *文件用途说明*做者姓名、联系方式（旺旺）*制做日期**/

大的模块注释方法： 

//================// 代码用途//================

 小的注释；

//代码说明 

注释单独一行，不要在代码后的同一行内加注释。例如：

//姓名var name = “abc”;   Vvar name =”abc”; //姓名 X

十一. 使用空格

使用空格有助于改善代码的可读性和一致性。在撰写英文文章时在逗号和区间范围后面使用空格。

在javascript采用一样的逻辑，可在列表表达式（等价于逗号）和语句结束（等价于完成一次“思考”）后面添加空格。

用处一：

• 在分开for循环的各个部分的分号以后：例如，for (var i = 0; i < 10; i +=1){…}
• 在for循环中初始化多个变量（i和最大值等）：for (var i = 0, max = 10; i < max; i += 1){…}
• 在限定数组项的逗号后面：var a = [1, 2, 3];
• 对象属性的逗号以后和将属性名和属性值分开的冒号以后：var o = {a: 1, b: 2};
• 分隔开函数中各个参数的逗号以后：myFunc(a, b, c)
• 在函数声明的大括号以前：function myFunc() {}
• 在匿名函数表达式以后：var myFunc = function () {};

用处二：

空格的另一个很好的用途是用来分隔全部的操做符和操做，这也就是意味着在 +, -, *, =, <, >, <=, >=, ===, !==, &&, ||, += 等以后使用空格：

例子：

//大量空格，而且使用一致，是的代码可读性更好

//容许在阅读的时候不用一口气读下去

var d = 0,    a = b +1;if ( a && b && c) {    d = a % c;    a += d;} 

//反模式//缺乏空格或空格使用不一致，使得代码比较混乱

var d= 0;    a =b+1;if (a&& b&& c) {d=a %c;    a+= d;}

十二. 编写API文档

 生成API文档的步骤：

• 编写特殊格式的代码块（即一些注释块）
• 运行工具来解析代码和注释（工具如：JSDoc Toolkit和YUIDoc）
• 发布工具解析的结果，大多数状况是采用HTML格式发布（如网页版的API文档就是利用工具生成的）

简单举例：

/*** 翻转一个字符串** @param  {String} 输入须要翻转的字符串* @return {String} 翻转后的字符串**/ var reverse = function (input) {    //...    return output;};

YUIDoc范例：

完整范例：本程序由一个文件(app.js)组成，该文件仅有一个模块(myapp)。

app.js:

/*** 个人javascript应用程序* * @module myapp*/ //使用命名空间来定义一个空对象var MYAPP = {}; //定义一个包含两个方法(sum()和multi())的math_stuff对象/*** @namespace MYAPP* class math_stuff*/ MYAPP.math_stuff = {    /**    * Sums two numbers    *     * @method sum    * param     {Number}    是第一个数    * param     {Number}    是第二个数    * return    {Number}    两个输入的总和    */    sum: function (a, b) {        return a + b;    },    /**    * Multiplies two numbers    * param     {Number}    是第一个数    * param     {Number}    是第二个数    * return    {Number}    两个输入相乘后结果    */    multi: function (a, b) {        return a * b;    }};

@namespace：这里用于命名包含以上对象的全局引用的名称

@class：这里有些命名不当，他实际意思是指对象或者构造函数

@method：定义对象中的方法和方法名

@param：列举函数所使用的参数。其中将参数类型用大括号括起来，并在其后注释参数名及描述。

@return：相似于@param，这里用于描述返回值的，而且该方法没有名称。

@constructor：代表这个“类”其实是一个构造函数

@property和@type描述了对象的属性。

2. 编写API目的：

为API编写注释不只仅是一中提供参考文档的简便方法，并且还有其余用途——经过再次审查代码，提升代码质量。

在解决问题时写出的解决方案仅仅是一个初稿。该解决方案能够给出使人期待的输出，可是该方案是不是最佳方案呢？改代码是否可读、易于理解、维护和升级呢？当您再次审视代码时您将更加肯定代码哪些部分能够改进——如何使得代码更容易继续更新，移除一些不足之处等。它能够极大地帮助您建立高质量的代码。

十三. 推荐写法

除了三目运算，if,else等禁止简写

 // 正确的书写

 if (true) {    

　　 alert(name);

 } 

console.log(name); 

// 不推荐的书写 if (true)     alert(name); console.log(name); 

// 不推荐的书写 if (true) alert(name); console.log(name)

在须要以{}闭合的代码段前增长换行，如：for if

 

 // 没有换行，小的代码段没法区分 if (wl && wl.length) {     for (i = 0, l = wl.length; i < l; ++i) {         p = wl[i];         type = Y.Lang.type(r[p]);         if (s.hasOwnProperty(p)) {             if (merge && type == 'object') {                 Y.mix(r[p], s[p]);             } else if (ov || !(p in r)) {                 r[p] = s[p];             }         }     } }

 // 有了换行，逻辑清楚多了 if (wl && wl.length) {      for (i = 0, l = wl.length; i < l; ++i) {         p = wl[i];         type = Y.Lang.type(r[p]);          if (s.hasOwnProperty(p)) {             // 处理merge逻辑             if (merge && type == 'object') {                 Y.mix(r[p], s[p]);             } else if (ov || !(p in r)) {                 r[p] = s[p];             }         }     } }

 换行能够是空行，也能够是注释

使用Function进行类的定义，不推荐继承，如需继承采用成熟的类库实现继承

// 类的实现 function Person(name) {     this.name = name; }  Person.prototype.sayName = function() {     alert(this.name); };  var me = new Person("Nicholas");  // 将this放到局部变量self function Persion(name, sex) {     var self = this;      self.name = name;     self.sex = sex; }

平时我们写代码，基本都是小程序，真心用不上什么继承，并且继承并非JS的擅长的语言特性，尽可能少用。若是非要使用的话，注意一点：

function A(){    //...}function B(){    //...}B.prototype = new A();B.prototype.constructor = B; //原则上，记得把这句话加上

继承从原则上来说，别改变他的构造函数，不然这个继承就显得很别扭了~

使用局部变量缓存反复查找的对象(包括但不限于全局变量、dom查询结果、做用域链较深的对象)

// 缓存对象

var getComment = function() {   

　　 var dom = $("#common-container"),// 缓存dom               

　　 appendTo = $.appendTo, // 缓存全局变量       

　　 data = this.json.data;   // 缓存做用域链较深的对象

}

//当须要缓存this时必须使用self变量进行缓存// 缓存

thisfunction Row(name) {   

　　 var self = this;     

　　self.name = name;   

　　 $(".row").click(function() {        

　　　　self.getName();   

　　 });

} 

self是一个保留字，不过用它也不要紧。在这里，看我的爱好吧，能够用_this, that, me等这些词，都行，可是团队开发的时候统一下比较好。

十四. 不规范写法

• 句尾没有分号

　　　　var isHotel = json.type == "hotel" ? true : false

　　　　这个是要引发注意的，好比：

　　　　a = b        // 赋值(function(){    //....})()         // 自执行函数

　　　　未加分号，结果被解析成 

　　　　a = b(function(){//...})()  //将b()()返回的结果赋值给a

• 变量命名各类各样

　　　　var is_hotel;var isHotel;var ishotel;

• if 缩写

　　　　if (isHotel)    console.log(true)else    console.log(false)

• 使用 eval

　　　　var json = eval(jsonText);

• 变量未定义处处都是

　　　　function() {    var isHotel = 'true';    .......     var html = isHotel ? '<p>hotel</p>' : "";}

• 超长函数

　　　　function() {    var isHotel = 'true';    //....... 此处省略500行    return false;}