如何写出优美的 JavaScript 代码?

本文分享了编程中的几个关键原则:对待代码要有感情并精益求精;通过合理设计减少代码量;重视代码排版与符号规范;遵循惯用法提高代码质量;通过代码审查促进团队成长。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

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

所有符号各就各位
第一眼的就是空格太少,我推荐三个工具:
  1. jsbeautifier.org 可以给你的代码格式化,记得用 diff 工具对照一下,格式化前后的区别;
  2. SublimeLinter 可以动态地在编写时给出 JSHint 提示(出错行高亮);
  3. Grunt 可以在文件变更时给出 JSHint 检验(声音以及桌面通知);
一旦把 lint 校验做为提交代码的必要过程,排版就会有本质的提高。

遵行惯用法
  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 查询应尽量使用 context (如 this.$table = $('table', this.$element) );
  13. jQuery DOM 操作和原生 DOM 操作不应该混用(已经使用 jQuery 的情况,就应该坚持使用 jQuery 来操作 DOM,避免丑陋的原生操作);
  14. DOM 元素构造出来,也不应该再到文档中查询一遍了(图上的构造太复杂,一眼真看不懂);

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值