如何为项目维护性组织JavaScript代码？

Question

我主要是PHP开发人员，但最近我一直在尝试使用很多JavaScript，大多数情况下是在jQuery中。

问题在于代码越来越难以调试，这使得更加困难，因为我在HTML中有许多事件监听器。

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

- MrFoh

---

不要使用内联事件处理程序。 - Lime

@Lime 我也遇到了常规 JavaScript 在 $(document).ready() 之前无法正常工作的问题。 - MrFoh

Answer 1

关注点分离

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

不要混合任何HTML、CSS或JS。每个文件都应该独立存在于自己的文件中。

只要保持一切分离，永远不要使用内联JavaScript或内联CSS，就可以解决大部分代码组织问题。

另一种技术是打包工具和压缩器。

我选择的打包工具是browserify (js) 和 less (css)

打包工具意味着你将所有代码拆分成许多文件/模块，按良好的设计进行分类。然后，因为发送许多小文件很昂贵，所以你可以使用构建时的打包工具将所有JS转换为一个JS文件，将所有CSS转换为一个CSS文件。

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

模块加载器意味着你定义小模块，并在需要时和需要的地方加载/引用它们。

我还实现了事件驱动架构和中介者模式，以保持我的代码高度松耦合。你可以更进一步，实现类似黑板系统这样的东西，但我个人没有尝试过。

- Raynos

---

是的，这就是我遵循的方式，尽管如果需要的话，我倾向于将直接的HTML代码嵌入到PHP文件中。 - Project V1

@ProjectV1 我不能代表PHP，但直觉告诉我这是不好的做法。 - Raynos

是的，也不是。也许我应该开始写一些指南。 - Project V1

Answer 2

你可以考虑使用CommonJS的“require”将JavaScript代码分离到多个文件中，然后使用browserify或Webpack。另一个选择是Cor，它是一种编译成JavaScript的语言，专注于组织、清晰和开发体验。

- yosbel