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

标签 javascript design-patterns

我主要是一名 PHP 开发人员,但最近我一直在使用 JavaScript,主要是在 jQuery 中。

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

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

最佳答案

Separation of concerns

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

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

只需将所有内容分开并且从不使用内联 javascript 或内联 CSS,您就可以解决大部分代码组织问题。

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

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

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

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

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

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

关于javascript - 如何组织项目中的 JavaScript 代码以实现可维护性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7542424/

相关文章:

javascript - 1 秒后隐藏元素

.net - JavaScript 代码注入(inject)我的网站页面

Java 方法无界类型或类返回

design-patterns - 抽象工厂和构建器之间的区别?

javascript - Highcharts 主从图表的问题

javascript - 检测用户在浏览器上的不活动状态 - 纯粹通过 JavaScript

ios - 跟踪对象是否发布到服务器(例如 snapchat)

ruby - heroku 如何将其身份验证存储在其命令行应用程序中?

多用户网络应用程序的数据库结构

javascript - 在手持/智能设备上使用不同浏览器时的屏幕宽度问题