如何编写出优美的JavaScript代码？

阅读更多

转自：

http://www.csdn.net/article/2012-12-06/2812544-How-to-make-the-beautiful-JavaScript-cod

 

 

 

1:工具

 

1. Beautify JavaScript or HTML（http://jsbeautifier.org/）可以给你的代码格式化，记得用diff工具对照一下，格式化前后的区别；
2. SublimeLinter可以动态地在编写时给出JSHint提示（出错行高亮）；
3. Grunt可以在文件变更时给出SHint检验（声音以及桌面通知）；

一旦把lint校验做为提交代码的必要过程，排版就会有本质的提高。

2:代码规范

1. 注释符号‘//’后应该空一格；
2. 防止变量提升，应先声明后使用（JSHint会提醒出‘_height’存在变量提升以及定义后未使用的错误）；
3. 不应该使用硬编码，并且重复几次（ID后缀名可以定义到常量里，用大写字母）；
4. 不应该有两个配置属性，含义不明（this.opts和this._options）；
5. 若两次以上引用同一对象的属性，应该定义到局部变量再引用（var options = this._options）；
6. 不应该同时使用两种属性命名风格（colModel和table_body）；
7. 局部变量名应该尽可能短，而方法名应该尽可能完整（不应该同时即有fromatTpl又有parseTemplate）；
8. 局部变量名不需要用下划线开头，仅对象私有属性和私有方法有此必要；
9. 变量名不需要带类型属性（_thdoms叫ths就好）；
10. 使用JavaScript时，for循环基本可以避免（比如jQuery有$.each, $.map，$.filter, $.grep等等高阶函数可用）；
11. jQuery对象名习惯以$开头，以便区分DOM对象；
12. jQuery查询应尽量使用ontext（如 this.$table = $('table', this.$element) ）；
13. jQuery DOM操作和原生DOM操作不应该混用（已经使用jQuery的情况，就应该坚持使用jQuery来操作DOM，避免丑陋的原生操作）；
14. DOM元素构造出来，也不应该再到文档中查询一遍了（图上的构造太复杂，一眼真看不懂）；

------------------------------

• 每个function之间多一空行，是的，除去注释外再多一空行；
• 适当加空格，比如if和后面的括号之间的空格、小括号和花括号之间的空格、冒号和function之间的空格等等；
• 风格上保持一致，你的代码里面有的地方+号和运算数之间有空格，有的则没有；
• 少用下划线开头的变量命名；
• 一段代码里，var语句可以合并在一起；
• 暂时不会再修改的function或object，先用编辑器折叠起来，看上去也会整洁很多；
• 黑色背景的Editor风格不错，不过关键字、注释、运算符等颜色上可以再调整，主要是为了防止审美疲劳，换个色调换个心情；

---------------------------

1. 代码中逻辑没有分块、没有空行、没有注释、看起来很累，建议对代码进行分块，比如将变量集中在头部定义，然后处理一些赋值，最后执行一些其它的函数。具体到这个例子，有很多不恰当的地方，比如可以先var _height；然后在条件分支中进行赋值，比如在一堆赋值语句中间夹杂了一个parseTemplate。
2. “_”用得太多，this._var这个可以理解，因为要区分是否私有变量，但是var _height这个完全没有必要加，加得太多反而看着很累，而且也没有任何区分的意义。
3. 没有将常用的变量缓存，这里最应该缓存的是this._options，要不然看起来很乱，而且缓存起来对性能也是有好处的。
4. 对象的规划（命名）不清晰，比如this._options和this.opts什么关系？我反正是看不明白。
5. 代码风格不统一，比如访问对象，之前都是this._options.height，为什么后面出来一个this._options.data['head']？用this._options.data.head不是更清晰么？
6. 函数内变量名混乱（和第四点很像），比如第二个函数中id和_id什么关系？为什么不用aaaId和bbbId？cre又是什么，难道是createElement缩写？变量尽量起有意义的，可区分的名字。
7. 函数名称表义不明，命名不符合大部分规范约定。第一眼看到_isHaveTable，我第一反应是，这应该是类似return true或者return false之类的吧。结果一看，这么长，难道返回在后面？又往后看了一眼，这根本就没有返回啊！那为什么要用_isHaveTable啊？_is开头的函数明明白白就应该返回一个true或者false啊。