如何写出优雅的Javascript代码

今天药忘吃喽~ 2022-10-02 02:52 162阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

笔者以前写Javascript的时候，经常会把代码写的又臭又长又啰嗦。在经过一段实践的实践和反思后，代码的优雅性提高很多。

### **不写分号** ###

不写分号能显著让代码更加优雅，并少轻松你的双手。

可能很多人会有疑问，没有分号的Javascript也能正常运行？

几乎是的。不过在一些特殊的时候Javascript引擎并不会帮助你正确插入分号。

具体的情况只有这五个符号： + ， - ， ( ， \[ ， / 没了。

也就是说，凡是新的一行代码以上述五个符号开头，那么之前一句的末尾是需要分号的。

而在实际情况中，以+，- 开头的新一行代码几乎不可能出现。 所以可能情况：

(function(){
      // do something
    })()

如果之前没加分号，那么这个匿名函数外的括号会调用上一行定义的函数，匿名函数就变成了参数。记住下面的这个分号：

;(function(){
      // do something
    })()

还有比如这样：

;(a == 1 || b == 1) && fn()
    
    ;[].slice.call()
    
    ;/abc/.test('abcd')

除了上面例子，几乎没有其他情景需要加分号了。

所以经常遇到这种情况，一个javascript文件里几百个分号全是没必要的。

而且，通常在生产环境中会提前用uglify.js去压缩代码，或是用ES6时babel转码，这都会帮你补全分号。

所以还有什么理由去写分号呢？当然写不写分号也属于个人习惯，知道什么时候分号是不可省的才是重点。

PS：Vue.js的源码就是不写分号的。

### **使用ES6** ###

相比较ES5，ES6的语法中的结构赋值，箭头函数，模板字符串，对象的简写法等都能让代码变得干净利落。

比如一个判断奇偶的函数：

function isEven(x){
        return x % 2 == 0
    }

ES6：

const isEven = x => x % 2 == 0

比如字符串拼接：

dom.innerHTML='Hello '
        + name
        + ',How you today?'

ES6：

dom.innerHTML=`Hello 
        ${name}
        How you today?`

###  ###

### **一些优雅的写法** ###

逻辑运算符：

if (a == 1) {
        b()
    }
    //可以写成
    a == 1 && b()

初始化变量：

var a = obj || {}

三元运算符：

var a = b % 2 == 0 ? 'even' : 'odd'

###  ###

### **合理的命名** ###

具体来说有这样几点：

*  方法名以动词开头，比如 var getName = function()\{\}
 *  布尔值以is开头， var isEven = function(x)\{return x % 2 == 0\}
 *  驼峰大小写和下划线不要混用，比如 whatTheHell 和 what\_the\_hell
 *  下划线只有在私有对象属性时使用
 *  方法内部变量尽可能短

###  ###

### **变量声明** ###

变量声明尽可能的放在开头，这样有助于：

*  提供一个单一地址查找到函数所有需要的局部变量
 *  防止因声明提升所引发的逻辑错误
 *  帮助牢记要声明的变量，尽可能地少适用全局变量
 *  使用逗号隔开换行，而非每一行重新var

var a = 1
    var b = 2
    //换成
    var a = 1,
        b = 2

有的时候也可以把逗号写在开头，这样比较方便加入新的变量：

var a = 1
       ,b = 2
       ,c = 3

###  ###

### **对齐方式** ###

var express =   require('express')
    var path =      require('path')
    var favicon =   require('serve-favicon')
    var logger =    require('morgan')

实际上用var的时候是可以用逗号的。所以在ES6中更经常出现的情况:

import Vue          from 'vue'
    import VueResource  from 'vue-resource'
    import VueValidator from 'vue-validator'
    import VueRouter    from 'vue-router'
    import Vuex         from 'vuex'

###  ###

### **缩短常用方法名** ###

var $ = function(x){
        return document.getElementById(x)
    }

###  ###

### **避免超长代码** ###

如果代码长到底部的滚动条都出现了，如何算得上优雅呢。

所以要保持每一行的代码不要太长，具体有这样需要注意的地方：

*  内部不重要的过程性代码尽可能短，但至少保留语义
 *  如果用到链式语法，可在 ' . '的开头换行

[].concat(arr).sort().forEach(fn)...

可以改成：

[].concat(arr)
      .sort()
      .forEach(fn)...

*  字符串拼接时，用加号换行，或用ES6的模板字符串
 *  如果因为逻辑运算符儿导致过长，可以将逻辑运算符换行
 *  如果函数参数过长，可以将参数换行，也是没问题的
 *  尽可能避免嵌套过多的 if 语句
 *  如果还是很长，可以尝试2个空格缩进

###  ###

### **其他细节**  ###

*  代码不同功能区之间加空行，比如每个funtion之间
 *  对于数组或类数组，可以用map等函数替代for循环
 *  如 + 号的运算符之间加空格
 *  若多次引用同一外部对象的属性，则定义到方法内部

来源：[简书][Link 1]

转载于:https://my.oschina.net/pengyi1992/blog/749443

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/78baf2a98ac546a480a3d0b3fd4335bf.png
[Link 1]: http://www.jianshu.com/p/4e4289c5bcdc