如何在项目中组织JavaScript代码以实现可维护性？

Question

我主要是一名PHP开发人员，但最近我正在玩很多JavaScript，主要是在jQuery中。

问题是代码越来越难以调试，这变得更加困难，因为我在HTML中散布了事件监听器。

代码处理AJAX调用和DOM操作。

Answer 1

Separation of concerns

这意味着您有三种类型的文件，HTML，CSS和JS。

您不要混用任何HTML，CSS或JS。它们中的每一个都在自己的文件中。

仅仅通过保持所有内容和从不使用内联javascript或内联CSS，您可以解决大多数代码组织问题。

另一种技术是包装商和缩放器。

我选择的包装商是browserify（js）和less（css）

打包器意味着您可以通过良好的设计将许多文件/模块中的所有代码分开。然后，因为发送许多小文件很昂贵，所以使用构建时打包程序将所有js转换为一个js文件，将所有css转换为一个css文件。

至于JS本身，我倾向于更进一步使用模块加载器。 Browserify既是打包器又是模块加载器。

模块加载器意味着您可以根据需要定义小模块并加载/需要它们。

我还实现了事件驱动架构和mediator模式，以保持我的代码高度松散耦合。人们可以更进一步实现blackboard system之类的东西，但我没有亲自尝试过。

Answer 2

您可以考虑使用CommonJS“require”来分隔许多文件中的javascript代码，然后使用browserify或Webpack。另一个选项是Cor，这是一种编译为javascript的语言，专注于组织，清洁和开发体验。