航天员|如何编写高质量 JavaScript 代码海底捞|支付宝|神舟|第三方支

文章图片

前段时间有一个叫做“人类高质量男性”的视频火了，相信很多同学都刷到过。所以今天给大家分享下，什么叫做“人类高质量代码” ，哈哈，开个玩笑。
其实分享的都是一些自己平时总结的小技巧，算是抛砖引玉吧，希望能给大家带来一些启发和帮助。
如何编写出高质量的 JavaScript 代码？我个人认为，如果要编写出高质量的 JavaScript 代码，可以从以下三个方面去考虑。
分别是：易阅读的代码、高性能的代码、健壮性的代码。下面我将分别对这三个方面进行阐述。
易阅读的代码
首先说一下，代码是写给自己或团队成员看的，良好的阅读方式是编写高质量代码的前提条件。这里总结了四点具体操作方式分享给大家。
【航天员|如何编写高质量 JavaScript 代码】第一点：统一代码格式
不要一会这样写，一会那样写，尽量统一写法，下面举例。
// badfunction foo(xy) { return { sum : x + y ;function bar(m n){ let ret = m*n return ret;// goodfunction foo(x y) { // 适当的空格隔开，一般符号前不添加空格，符号后添加空格 return { sum: x + y // 拖尾逗号是合法的，简化了对象和数组添加或删除元素 // 省略结束分号，当然需要知道如何规避风险function bar(m n) { let ret = m * n return ret

人为去约定代码格式，是很不方便的，所以可以借助一些工具进行自动格式转换，如：prettier 插件(https://prettier.io/) 。
第二点：去除魔术数字
魔术数字（magic number）是程式设计中所谓的直接写在程式码里的具体数值（如“10”“123”等以数字直接写出的值）。虽然程式作者写的时候自己能了解数值的意义，但对其他程式员而言，甚至作者本人经过一段时间后，都会很难理解这个数值的用途。
// badsetTimeout(blastOff 86400000)document.onkeydown = function (ev) { if (ev.keyCode === 13) { // todos // goodconst MILLISECONDS_IN_A_DAY = 86400000const ENTER_KEY = 13setTimeout(blastOff MILLISECONDS_IN_A_DAY)document.onkeydown = function (ev) { if (ev.keyCode === ENTER_KEY) { // todos 预览

当然还有魔术字符串也是像上面一样去处理，上面代码中的常量命名推荐采用下划线命名的方式，其他如变量、函数等推荐用驼峰进行命名。
其实减少this的使用频率也是一样的道理，当代码中充斥着大量this的时候，我们往往很难知道它是谁，需要花费很多时间进行阅读。
// badclass Foo { foo() { this.number = 100 this.el.onclick = function () { this.className = \"active\" // goodclass Foo { foo() { let context = this context.number = 100 context.el.onclick = function () { let el = this el.className = \"active\" 第三点：单一功能原则无论是编写模块、类、还是函数都应该让他们各自都只有单一的功能，不要让他们做过多的事情，这样阅读起来会非常简单，扩展起来也会非常灵活。

// badfunction copy(obj deep) { if (deep) { // 深拷贝 else { // 浅拷贝 // goodfunction copy(obj) { // 浅拷贝function deepCopy(obj) { // 深拷贝