文章图片


前段时间有一个叫做“人类高质量男性”的视频火了 ， 相信很多同学都刷到过 。 所以今天给大家分享下 ， 什么叫做“人类高质量代码” ， 哈哈 ， 开个玩笑 。
其实分享的都是一些自己平时总结的小技巧 ， 算是抛砖引玉吧 ， 希望能给大家带来一些启发和帮助 。
【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) {  // 深拷贝

第四点：减少嵌套层级多层级的嵌套 ， 如：条件嵌套、循环嵌套、回调嵌套等 ， 对于代码阅读是非常不利的 ， 所以应尽量减少嵌套的层级 。
像解决条件嵌套的问题 ， 一般可采用卫语句（guard clause）的方式提前返回 ， 从而减少嵌套 。
// badfunction foo() {  let result  if (isDead) {    result = deadAmount()   else {    if (isRet) {      result = retAmount()     else {      result = normalAmount()        return result// goodfunction foo() {  if (isDead) {    return deadAmount()    if (isRet) {    return retAmount()    return normalAmount()

除了卫语句外 ， 通过还可以采用短路运算、条件运算符等进行条件语句的改写 。

稿源：(sharkie)

【傻大方】网址：http://www.shadafang.com/c/111495ca2021.html

标题：javascript|如何编写高质量 JavaScript 代码