您的位置:首页 > Web前端 > JavaScript

如何写出优美的 JavaScript 代码?

2017-01-09 22:23 453 查看
我觉得写好代码和作文章差不多,无外乎:工整、优雅、拒绝重复、惜字如金。
几个小建议:

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

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

所有符号各就各位
第一眼的就是空格太少,我推荐三个工具:
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,这是学习经验、共同提高 最快的办法。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: