Question

如何写出优美的 JavaScript 代码

Answer 1

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

少写代码
提前设计能有助于少写代码，增强全局感。
而代码写得少还能防止失控——感觉不对时就应该停下来，腾出时间来思考，为什么会偏离最先的想法。

所有符号各就各位
第一眼的就是空格太少，我推荐三个工具：
http://jsbeautifier.org 可以给你的代码格式化，记得用 diff 工具对照一下，格式化前后的区别；

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

Grunt 可以在文件变更时给出 JSHint 检验（声音以及桌面通知）；
一旦把 lint 校验做为提交代码的必要过程，排版就会有本质的提高。

遵行惯用法
注释符号 `//` 后应该空一格；

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

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

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

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

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

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

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

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

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

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

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

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

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

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