写出好的前端代码不是件容易事

什么样的代码算是好代码？ 在我看来，易于维护的代码就是好代码。当然代码还可以从性能，安全等方面来考量。这些不在本文的讨论范围之内。

怎样的代码算是易于维护的呢？ 当需求发生改变，或要做新需求时，我们能较无痛的改代码来满足需求。

在我看来，易于维护的代码要满足如下条件

代码风格的统一

如果一个项目，代码风格不统一，会有不少问题，如

• 修改代码时，不知按照哪种风格来写
• 增加对代码理解的时间
• 影响看代码的心情

尽可能的避免代码重复

重复的代码会产生的问题是：如果重复代码的逻辑需要改，则需要改多个地方，容易出错。

如何减少重复的代码呢？

• 在JS中，可以将重复的代码写成一个方法，如果是可通用的，可以写在独立的JS文件中。
• 在CSS中，则需要借助Sass，Less之类的预处理语言的Mixins的功能。将重复的部分写成一个Mixins。

配置和逻辑分开

如果是在逻辑中写死的配置，会导致的问题是：

1. 每次需要改配置，必须去逻辑中找。如果逻辑很复杂，那这过程无疑是很痛苦的
2. 如果逻辑会被多个地方用，而不同的地方用时，配置会有不同时，那还要去改逻辑

我的一般做法是

• JS中，对于整个站的通用配置，写在config.js里。如果是某个js的配置，在文件的开头，用defaultParam对象来存放可变的配置，用const来定义不可变的配置
• CSS中，依旧要借助预处理语言。对于整站的配置，定义在_variables.scss里。对于某个具体CSS文件里，在文件开头用变量来定义

减少代码的副作用

做法：

• JS中，方法中的沟通尽量不要用全局变量；不要在Array之类的全局对象的原型链上添加方法；尽量不要定义全局的方法和变量：如果确实有很多变量，方法放在全局上，可以学习jQuery,将很多变量，方法放在一个全局对象上；自定义事件，事件的名称也要有命名空间。
• CSS中，要做到无副作用，难度很大。对于简单页面，一个方法是，把页面上的元素都分成一个个组件，写样式时，选择器要用组件选择器 当前元素选择器。当组件变的复杂时，组件也会包含很多子组件。然后，选择器就会越来越长。。。我的解决方案是用的BEM。

提高代码的可读性

做法：

• 变量，方法等的合理命名，通过名称可以知道这个大概做什么的。如果则要加注释来说明一下。
• 对于不容理解的代码加注释
• 尽可能不用魔法数字，如以下代码

function getRandomNum(){
    return 100 * Math.random();
}

我们会觉得上面代码中的100很莫名其妙。如果改成

function getRandomNum(){
    const MAX_RETURN_NUM = 100;
    return MAX_RETURN_NUM * Math.random();
}

是不是觉得易读多啦XD

• 对于HTML，选择合适标签

一个方法只做一件事

这样做，一来提高代码的复用性，二来让调试也变的更容易，三来让测试变的更容易。

写测试代码

通过写测试，我们再也不怕，改的代码影响以前的功能啦，也可以放心的重构代码啦~当然，可被测试的代码，其质量也不会特别差。

暂时就想到这些。