[js] 如何编写优美的javascript代码

 

我觉得写好代码和作文章差不多，无外乎：工整、优雅、拒绝重复、惜字如金。下面提供几个小建议：

 

[1] 态度

对代码要有感情，每一行都应该尽心尽力，并且还要有把那些扔垃圾篓的代码再重写两遍的冲动——一旦有了这种冲动之后，什么都挡不住你，连吃喝拉撒时，问题都会浮现到你脑子里，你就会不由自主地解决它们……能对自己的代码提出怀疑本身就是一件了不起的事！加油！

 

[2] 少写代码

1.提前设计能有助于少写代码，增强全局感。而代码写得少还能防止失控——感觉不对时就应该停下来，腾出时间来思考，为什么会偏离最先的想法。所有符号各就各位。第一眼就是空格太少，下面推荐三个工具给大家：

2.Beautify JavaScript or HTML可以给你的代码格式化，记得用diff工具对照一下，格式化前后的区别；

SublimeLinter可以动态地在编写时给出JSHint提示（出错行高亮）；

Grunt可以在文件变更时给出SHint检验（声音以及桌面通知）；

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

 

[3] 遵行惯用法

a. 注释符号‘//’后应该空一格；

b. 防止变量提升，应先声明后使用（JSHint会提醒出‘_height’存在变量提升以及定义后未使用的错误）；

c. 不应该使用硬编码，并且重复几次（ID后缀名可以定义到常量里，用大写字母）；

d. 不应该有两个配置属性，含义不明（this.opts和this._options）；

e. 若两次以上引用同一对象的属性，应该定义到局部变量再引用（var options = this._options）；

f. 不应该同时使用两种属性命名风格（colModel和table_body）；

g. 局部变量名应该尽可能短，而方法名应该尽可能完整（不应该同时即有fromatTpl又有parseTemplate）；

h. 局部变量名不需要用下划线开头，仅对象私有属性和私有方法有此必要；

i. 变量名不需要带类型属性（_thdoms叫ths就好）；

j. 使用JavaScript时，for循环基本可以避免（比如jQuery有$.each, $.map，$.filter, $.grep等等高阶函数可用）；

k. jQuery对象名习惯以$开头，以便区分DOM对象；

o. jQuery查询应尽量使用ontext（如 this.$table = $('table', this.$element) ）；

p. jQuery DOM操作和原生DOM操作不应该混用（已经使用jQuery的情况，就应该坚持使用jQuery来操作DOM，避免丑陋的原生操作）；

q. DOM元素构造出来，也不应该再到文档中查询一遍了（图上的构造太复杂，一眼真看不懂）；

[4] 代码复查

 

把程序写正确还只是跨出了第一步。把代码交给你的同事和朋友复查，这是学习经验、共同提高 最快的办法。

 

[5] 代码风格及排版

虽然任何一种语言都没有任何约定的风格，但也总有一些不成文且喜闻乐见的习俗。以你的代码为例，给以下几个风格上的建议：

每个function之间多一空行，是的，除去注释外再多一空行；

适当加空格，比如if和后面的括号之间的空格、小括号和花括号之间的空格、冒号和function之间的空格等等；

风格上保持一致，你的代码里面有的地方+号和运算数之间有空格，有的则没有；

少用下划线开头的变量命名；

一段代码里，var语句可以合并在一起；

暂时不会再修改的function或object，先用编辑器折叠起来，看上去也会整洁很多；

黑色背景的Editor风格不错，不过关键字、注释、运算符等颜色上可以再调整，主要是为了防止审美疲劳，换个色调换个心情；

[6] 使用成熟的javascript代码库

 

1. 如果没看错的话，你可能是使用了jQuery吧（至少也有一个类似Sizzle或更简单的解析器，证据在倒数第十行左右）。所以，就尽可能避免使用原生的JavaScript DOM操作。

 

2. jQuery的$符号，以CSS Selector风格统一取代了各种getElement(s)ByXxx的接口，并且扩展性非常强，是很多设计模式思想的综合运用。

 

3. 当然原生DOM也有自己的优势（主要是执行效率），但是大部分时候，在开发效率、代码质量、执行效率的tradeoff中，jQuery还是最佳选择。此外也推荐下JavaScript MVC库、jQuery UI库等等。

 

[7] 转自：http://www.csdn.net/article/2012-12-06/2812544-How-to-make-the-beautiful-JavaScript-cod