这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

如何写好 JavaScript 代码

我们平时在学习的时候，对于代码的编写可能会趋向于便利性和直观性，但是当我们从一个前端的学习者迈向前端工程师之后，我们必须要更加正确严肃地对待我们的代码，因此我们在在代码的书写上需要更加的规范和严格。以 JavaScript 为例，为了能够写好 Js 代码，我们通常需要遵循一些原则，比如让代码各司其职，对实现一些功能的代码进行组件化封装，应用函数式思想进行过程抽象。

各司其责

各司其责即让 HTML、CSS、JavaScript 的职能分离，让 HTML 去做 HTML 的工作，CSS 实现 CSS 的工作。用一个例子来说明，当我们要实现页面的“白天模式”与“夜间模式”的切换时，下面的第一版或许是我们每个初学者都能够写出来的 JS 代码：

第一个版本的代码我们是直接去操控 body 的 style ,也就是直接对 CSS 进行操控。 当我们对第一个版本的代码稍作修改便得到了我们的第二版代码： 可以看到第二个版本我们通过操控 class 的状态，配合 CSS 实现模式的切换，并没有去改变 CSS 的内容，因此 JS 的部分显得更加简洁了。
第二个版本实现了表现和行为的分离，而第一个版本却让 JavaScript 去做了 CSS 应该做的事情，这样带来的后果就是当我们修改表现需求时，我们需要去改动 JavaScript 代码而不是 CSS 代码，并且当其他的程序员接手我们的代码时，很难直观地去理解代码中体现的需求的含义。而版本二的代码却能够让人一目了然地去理解我们想要实现的需求，这也是我们在工作中需要达到的标准。

组件封装

我们在前端的开发中往往会通过组件的封装来提升开发效率。组件也就是 Web 页面上抽出来的一个个包含模版(HTML)、功能(Js)和样式(CSS)的单元。好的组件具备封装性、正确性、扩展性、复用性。举个例子，当我们想要去设计一个轮播图时，我们该如何去设计组件呢？

虽然我们通过以上的过程完成了轮播图的开发，但是实现这一效果的各个部分的代码却非常的不灵活，当我们想要去掉某一个功能时，我们需要修改许多的部分。于是我们可以通过对组件进行插件化，来使其变得灵活。 我们还可以通过对 HTML 进行模板化，来增强其扩展性。

过程抽象

过程抽象是用来处理局部细节控制的一些方法，也是函数式编程思想的基础应用，我们将函数本身看作一个封装好的过程，关注其输入和输出。我们通过一个例子来解释过程抽象：

上面是一个简单的列表删除的功能，当我们以较长的间隔去点击时，它能够实现正常的功能，但是当我们以非常快的速度去点击执行时，由于执行动画需要时间，因此导致出现了错误。为了解决这一问题，我们就能够通过高阶函数来控制时间的触发次数。

我们还可以通过一些常见的高阶函数来控制两次触发的时间间隔，如节流函数。