在多年以前，人们注重功能是如何实现的。现如今，随着Web及互联网技术的不断发展，功能仅成了最基本的要求，如何写出漂亮，整洁的代码已成为一个大牛级程序员不可或缺的条件。

写出优美的JavaScript代码的方法：

少写代码

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

遵行惯用法

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

• 防止变量提升，应先声明后使用（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查询应尽量使用ontext（如 this.$table = $('table', this.$element) ）；

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

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

代码复查

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

代码风格及排版

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

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

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

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

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

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

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

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

使用成熟的JavaScript库

尽可能避免使用原生的JavaScript DOM操作。

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

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

代码整理

代码中逻辑没有分块、没有空行、没有注释、看起来很累，建议对代码进行分块，比如将变量集中在头部定义，然后处理一些赋值，最后执行一些其它的函数。

链接: https://www.fly63.com/article/detial/8067