三大原则
关于如何去写好JavaScript代码这个问题，我们一般会遵循各司其责、组件封装、过程抽象这三大原则来展开描述。
各司其责
各司其责要是指将html,css,javascript的职能相互分离。我们接下来看个例子：
上述代码片段通过JavaScript直接操作样式，虽然能够背景切换的需求，但是我们在实际开发的过程中，我们的代码结构并不会这么简短。因此，当我们采用这种方式进行操作的时候，返回来阅读代码时，我们阅读代码的难度就大大增加了。另外，虽然我们可以看懂这代码，对于其他开发人员来说，可读性是较差的。
因此，我们需要通过各司其责的原则对代码进行优化：
如上所示，我们将按钮的内容作为CSS样式，在CSS样式中进行内容编辑。同时，在CSS新增一个night的类,通过JS更改div的类名，达到模式切换的效果。这样写大大的提升了代码的可读性。
但是，上述操作还是用到了JS,有没有一种方法能够做到让这个实例时零JS的呢?
答案是有的，我们接着往下看:
如上所示，我们通过给切换按钮绑定一个勾选框，通过勾选框的:check伪类选择器，达到了只通过操作CSS就能实现模式切换的效果。
小结
html/css/javascriptg各司其责，应当避免不必要的JS直接操作样式，可以用class来表示样式状态。对于纯展示类交互我们应当寻求零JS方案。
组件封装
优秀的UI组件具有正确性、复用性和可扩展性。因此，我们可以对多次复用的代码组件进行封装，并且提高它的可扩展性。那么组件封装的基本步骤又有哪些呢? 组件封装的基本步骤主要有以下三种:
- 结构设计: HTML
- 展示效果: CSS
- 行为设计: JS包括API(功能) 和 Event(事件流)
另外，组件初步封装完成后，我们还需要对其进行必要的重构，以提高他的可扩展性。
首先，我们需要将组件插件化，将控制元素抽离成插件，插件和组件之间通过依赖注入方式建立联系。 接着，进行模板化处理，将HTML模板化，使其更加易于扩展。 最后，对组件进行抽象化处理，将组件通用模型抽象出来。
小结
组件设计有封装性，正确性，扩展性和复用性四大基本原则。同时，组件封装分为结构设计，展示效果和行为设计三大步骤。组件在封装完成后，需要经历三次重构，分别是插件化，模板化和抽象化。
过程抽象
过程抽象用来处理局部细节控制的方法，是函数式编程的基本应用。
首先，我们来看下面这张图：
开门这个动作我们可以应用到很多的地方，因此它是可以进行抽象的。
我来看一下下面这个例子：
如上所以，当我们删除某一按钮的时候，他需要在两秒后才完成删除。这时，如果用户重复点击这个按钮就会导致报错。因此，我们需要添加一个方法来让每个选项的removeChild事件只执行一起，避免他报错。
首先我们可以使用addEventListener的once参数，使得addEventListener只执行一次。但是，这样做会有两个缺点：一是需要在原有代码上进行更改，这样在实际开发中是不太合理的；二是这方法存在许多兼容性问题，并不是个很好的方案。
因此，为了能够让“只执行一次”这一需求覆盖不同事件处理，我们可以将这需求抽离，而这一抽离过程我们就成为过程抽象。
具体如下所示：
通过上述操作就可以将只执行一次的需求抽离成一个once()函数，它可以运行在一切只需要执行一次的函数上。在使用时，只需要把相应的需要只执行一次的函数作为参数传给once()方法即可。
高阶函数
在上述过程抽象中，我们抽象出的once()函数，以函数作为参数，同时用函数作为返回值，这种函数问们称之为高阶函数。
高阶函数通常简称为HOF，他的特征是用函数作为参数或者用函数作为返回值。一般会作为函数装饰器使用，像上面的once函数就是一个函数装饰器。
常见的高阶函数
防抖函数： 在事件触发的n秒后在执行回调函数，如果在n秒内重新触发，重新开始计时。
节流函数： 在规定时间内只触发一次函数，如果这段时间内多次触发，则生效一次。
除此之外，还有消费函数consumer和迭代器函数iterative这里就不一一讲解了。
讲了那么多高阶函数的知识，那么我们为什么要用高阶函数呢?
将这个之前我们先了解以下纯函数这一概念。 纯函数是指不对外部环境产生依赖，不影响外部环境，在任何时候，只要参数确定返回值就确定的函数。因此，纯函数可以进行直接测试，同时也利于我们进行重构。因此，我们在开发中应尽量使用纯函数进行开发。而从上面的例子我们也可以看到,高阶函数就是一种纯函数。使用高阶函数大大减少了非纯函数使用的可能性。
编程范式
编程方式分为命令式和声明式。命令式更关注怎么做，声明式更关注做什么。js编程既可以使用命令式编程也可以使用声明式编程，但是当代码逻辑较为复杂时，推荐使用声明式编程，这样抽象程度高，扩展性更强。
小结
本小节主要介绍了过程抽象的内容，以及高阶函数的使用。在这过程中，也让我们知道了我们开发时应多使用纯函数去进行开发，这样有利于我们后续的测试与重构。
总结
本文主要围绕如何写好JavaScript代码展开描述，主要讲解了各司其责，组件封装，过程抽象三大原则。
