日照网站建公司告诉你设如何维护整洁的JavaScript代码！

维护整洁的JavaScript代码

即使平时做的项目都比较简单，复杂的情况也不过是使用 jQuery 和插件，如果能针对“如何编写 JavaScript”创建标准，你仍然能从中获益。你会发现，如果没有某种期望和规范，你的 JavaScript 文件会像断线的风筝一样不受控制，代码也难以测试和重构。作为前端架构师，在给 JavaScript 代码评审制定标准的时候，你可以参考下面概括的一些规范。

1.　保持代码整洁

JavaScript 是一种脚本语言，这跟 HTML 和 CSS 不同。如果你忘记闭合一个 HTML 标签或者写了无效的 CSS，坏的情况不过是页面上出现了一些小缺陷。如果你在 JavaScript 代码里添加了太多的逗号或者忘记闭合大括号，整个网站都有可能崩溃。

由于编写恰当的 JavaScript 非常关键，在项目中结合单元测试使用一些格式 / 错误提示工具。如果在开发流程里运用其中一条，这不仅有助于发现导致崩溃的代码，而且能帮助你执行关于代码格式甚至是代码编写的规范。

JS Hint是这些工具中一个很好的例子。它能够在你的文本编辑器里使用，一旦你犯错，它就会即时标记出来。你甚至可以把它用在构建系统中，这样如果有任何代码不符合规范，将无法通过测试。

这里有几条可以使用 JS Hint 检查的规则：

强制使用 === 和 !== 代替 == 和 !=

限制代码块嵌套深度

限制函数的参数数量

如果函数重复定义，发出警告

如果变量创建后未被使用，发出警告
2.　创造可复用的函数

依照写 jQuery 代码的方式，我们的代码常常以 CSS 选择器（名词）开始，紧接着是执行一连串函数（动词）。这正是人类大脑的工作方式，我们首先想到需要锁定的事物，然后考虑对它做什么。虽然这使代码对人们来说可读性很强，但可复用性却并不高。来看看我们给 CMS 创造的警告类名：

这段代码很短，也很容易读懂。我们知道 .redalert 给元素添加了红色背景，然后绑定事件函数，点击元素后，它的内容会被打印到控制台上。

我们也知道 .yellow-alert 给元素添加了黄色背景，并绑定了同样的事件函数。

对于只有两个类名的情况，这可能还比较好用，但是这样的代码是不可复用的。如果想创建更多的警告颜色，我们需要复制其中一个，然后改变类名和颜色。而且，如果因为某些原因创建了十多块这样的代码，当我们想回头调整点击函数或者添加字体颜色去搭配背景色时，可能需要改几十次才能完成。

相比写一系列描述句一样的代码，把代码拆分成小块、可复用函数可以帮我们创建出更好的系统。看看以下替代方案：

这个方案虽然需要多写几行代码，但有以下优点：

现在有了清晰地说明用途的函数

如果需要创建新的 .green-alert 类名，只需要修改定义好的 add_background() 和 log_text_on_click 函数

如果需要将 console.log($(this).html()); 改成 console.log($(this).text());，只需要在一个位置修改，而不是多个位置

可以在项目里的很多地方复用这两个函数

就像 Sass 的混入（mixin）写法比原生 CSS 有更多好处，把代码拆分为可复用的函数，我们的代码将变得更加清晰、精简、灵活和可测。

以上是日照网站建设公司（昊诺网络公司）分享，如果大家喜欢该网络知识，请关注我们的网站动态！