写这篇文章的原因

这篇文章是想记录进入公司接触到项目后，在项目中遇到的一些代码规范问题，leader教我们的规范以及自己私下去学习的一些代码规范，代码规范真的很重要！！

进入公司三天后开始接触项目，该项目是敏捷开发，我们部门任务是要将该项目迭代到下一个稳定版本。噩梦就是从这开始了，开始迭代版本后我终于明白了为什么那些有经验的程序员很看重代码规范的原因了，因为不注重代码规范，真的需要浪费很多时间去看懂别人写的啥！！！

这个项目，大多没有注释，类名普通（比如什么“main”，“container”这种），缩进不统一、变量名方法名命名稀奇古怪（什么“OK”这种方法名都整出来了）等等还有很多问题。接下来我分享一些我目前学到的一些代码规范，希望对大家有帮助。

1、sass & BEM命名规范

sass官网：戳我前往

sass（也叫scss）非常好用，写起来比css方便很多，而且之后进入工作应该大多都是用sass，入门也非常简单，我是因为公司项目用的sass，所以我花了两天时间去官网学了学，基本项目中用到的就都能看懂了。

BEM：B（Block）、E（Element）、M（Modifier），是由Yandex团队提出来的前端CSS命名方法。一般是这样命名：B__E-M，直接上例子：

比如我有一段这样的html结构：最开头的div我写的Test，在公司我们一般是根据具体功能写或者写这个文件的文件名。

    <div class="Test">
        <div class="Test__fiflter">
            <div class="Test__fiflter-content">
            </div>
        </div>
        <div class="Test__searchResult"></div>
    </div>

然后呢就可以结合Sass来写样式：

    <style scoped lang="scss">
        .Test{
            /* todo */
            &__fiflter{
                /* todo */
                &-content{
                    /* todo */
                }
            }
            &__searchResult{
                /* todo */
            }
        }
    </style>

这只是最基本的功能，目的是为了让结构更清晰，写样式时也更方便，但不是任何时候都可以用BEM命名，当结构有明确的结构级联关系时应该用，其他时候看情况。

”&“是sass最基本的一个功能，sass在项目中有很大作用，比如定义全局样式变量，我之前一直不明白为什么要把一个样式为了定义成全局写得那么复杂，比如把一个颜色”white“写成”primary-color“，后来leader告诉我，是为了方便之后再迭代的时候方便维护，也是从这一次开始我才有了写规范代码、可维护性代码的意识！

sass有很多功能，建议大家都去官网学两遍，之后要用的话就算忘了去官网瞟一眼也很快的！

扫描二维码关注公众号，回复： 15873526 查看本文章

2、一些基本的JS代码规范

说明：大多都是从W3C官网以及红宝石书学的。

1）变量名、函数名驼峰式写法；

2）变量名用名词；

3）函数名以动词开始；如： getName()，isDisabled()

4）常量值大写并以下划线相接；

5）运算符周围留空格；

6）代码缩进用4个空格，不要用tabs；

7）在以下地方都应写注释：函数和方法、大型代码块、复杂的算法；

8）变量类型透明化；如 let flag = false // 布尔值 let name = "" // 字符串

3、编码惯例

1）不声明全局变量

一方面，全局变量和全局函数有可能会被覆盖，所以不安全。
另一方面，和JS的垃圾回收机制有关，全局变量是在window下的变量，只要window本身不被干掉，全局变量就不会消失，所以造成了”内存泄漏“，就是比如你一个变量里那个值你只想用一次，你把它声明为了全局，那么它会一直存在，占用内存，垃圾回收机制不会定时去回收全局变量的，只会回收局部变量。
还有一点在性能中“避免全局查找”中讲到。

所以请使用局部变量代替全局变量。

2）用const、let 代替 var

在项目中我经常看见前辈写的代码基本都是用let和const，很少用var。

他们的区别我们都知道，比如let、const有块级作用域，var是函数作用域，然而我以前只是知道”这句话“而已，不明白有什么用。现在我来告诉大家。

也有一部分垃圾回收机制的原因，因为const、let是块级作用域的关系，垃圾回收机制能更早的发现这两个关键字声明的变量并把他们回收（因为大多数情况下块级作用域比函数作用域更早终止）。
先使用const、let次之。不知道大家知不知道静态代码分析，使用const有利于静态代码分析工具来帮助我们分析代码，当我们知道一个值未来会被改变时就用let，这样对于后期代码检查有非常大的帮助。

这些编码惯例都有助于改善性能，特别是使用var这个习惯一定要改。

3）不要new object()

图片来自W3C官网

原因：

new Object()本质上是方法调用，所以就需要在Object的原型链上去找那些Array、RegExp等，找到后又需要堆栈来保存，方法调用结束后又要释放堆栈。所以耗费时间。

new String、Number、Boolean这三个返回的是他们对应的实例，看下面打印的类型就能理解：

        let obj = new Number('25')
        console.log(typeof(obj)) // object
        let obj1 = Number('25')
        console.log(typeof(obj1)) // number

        let str = new String('123') 
        console.log(typeof(str)) // object
        let str1 = String('123')
        console.log(typeof(str1)) // string

        let bool = new String(true)
        console.log(typeof(bool)) // object
        let bool1 = Boolean(true)
        console.log(typeof(bool1)) // boolean

还有另一方面”语句最少化“，将在下面性能中讲到。

4）不要使用eval() 和 with()

eval()函数用于将文本当作代码来运行，这肯定是不安全的，不要用！
with函数个人感觉没啥子用，它主要就是让使用某个变量时更简单一点，但是用局部变量同样可以达到效果。with语句会创建自己的作用域，会加长代码中的作用域链，所以最好不要用！

最重要的几个编码惯例暂时想到这么多，以后有新的会及时更新。

5）不要连续赋值

比如 let a = b = c = 1;

这行代码确实将a、b、c都赋值为1了，但是b和c会被声明为全局变量。

4、性能优化

1）简化循环语句

这个优化不仅适用于JS，任何语言这样做都可以加快速度，我也是以前看大佬在刷力扣题时做优化看到的。for循环中，循环每执行一次，循环中的每条语句都会被执行。

for(let i = 0; i < arr.length； i++)；

这条for循环语句，每次都会去获取arr的长度，所以都做重复的事情，所以应该修改一下：

let i；

let len = arr.length；

for( i = 0; i < len； i++)；

这样只需要访问一次就行了。其实任何需要用到两次以上的类似这种的值都应该用个单独变量去保存起来，这样会加快执行速度。

2）语句最少化

每一行JS代码都需要JS引擎去解析的，以最少的代码达到目的是开发人员想要的效果。

下面两个例子：声明数组和对象时，一行代码替代上面了四行代码。

// bad  new object
let arr = new Array(3)
arr[0] = 1
arr[1] = 2
arr[2] = 3

// good 字面量方式
let arr = [1, 2, 3]

// bad
let student = new Object();
student.name = "xx";
student.age = 11;
student.sayHello = function(){ console.log("Hello") };

// good
let student = {
    name:"xx",
    age:11,
    sayHello:function(){
        console.log("Hello")
    }
};

声明变量：

// bad
let name = "xxx";
let name1 = "zzz";
let name2 = "ccc";

// good
let name  = "xxx", 
    name1 = "zzz",
    name2 = "ccc";

3) 作用域意识 — 避免全局查找

感谢红宝石书！我从来没想过这个问题，使用全局变量和全局函数相比于局部肯定更慢，因为访问全局变量需要一层一层往上面查找作用域，会一直找到全局作用域。

举个vue的例子：

当你在vuex中定义了一个state为name，那么在组件中想要取到这个state的话，直接取应该这样写：

this.$store.state.name，每使用一次点，就要往对应的作用域去查找，如果还使用了module，那么写起来更麻烦，加入module名字为test，那么组件中取值就应该这样取：

this.$store.test.state.name，这样就更麻烦了。

想想每次取值都要写那么一长串，不仅难写还耗费性能。所以vuex提供了方案让我们这样取值：

使用mapState，这样之后要取vuex里的这个值，直接用“name”就行了。

computed:{
    ...mapState({
        name: (state) => state.test.name
    })
}

在JS中，使用局部变量来保存就行了，这样就需要取全局查找一次作用域。所以学好了JS，再去搞懂vue底层原理真的就容易多了。

有不对的地方，希望各位大佬多多指正！

前端实习记录 — 代码规范 & 编码惯例 & 性能优化