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

MrF*_*Foh 6 javascript design-patterns

我主要是一个PHP开发人员,但最近我正在玩很多JavaScript,主要是在jQuery中.

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

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

Ray*_*nos 5

关注点分离

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

你不混合任何HTML,CSS或JS.它们中的每一个都在自己的文件中.

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

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

我选择的包装商是browserify(js)和less(css)

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

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

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

我还实现了事件驱动的体系结构和中介模式,以保持我的代码高度松散耦合.人们可以更进一步实施类似黑板系统的东西,但我没有亲自尝试过.