关于如何拥有更易于维护的 JavaScript 架构，我现在有点困惑。我可能偏离了轨道，但我会说我的代码中将近 50% 涉及 DOM，因此使用我的基础库 (jQuery)。
我查看了 [1] Nicholas Zakas 的可扩展应用架构设计:http://developer.yahoo.com/yui/theater/video.php?v=zakas-architecture和 [2] 用于大型 JavaScript 应用程序架构的 Addy Osmani 模式 http://addyosmani.com/largescalejavascript/ .
我有一个单页应用程序样式，其中有很多内容是通过 ajax 获取的，并且 DOM 元素是动态添加的。我的主要问题是:如果我使用 jQuery(或任何其他基础库)来操作 DOM，我如何将代码分成小的可重用 block 。
例如，让我们选择一个任务列表模块。我知道该模块可能如下所示:
var TaskList = function() {
addTask = function() {
...
};
removeTask = function() {
...
};
return {
addTask: addTask,
removeTask: removeTask
}
}();
DOM 元素事件注册应该写在哪里，保存、加载或删除任务的 ajax 调用，将新任务附加到 DOM 元素等。
我 promise 将 jQuery 作为依赖项放在模块上没有问题，但如果有更好的方法，我想我从上面的两个资源中错过了它，我很想知道它。
我只是想有一种更优雅的方式来维护不断增长的 javascript，因为我厌倦了意大利面条；)
感谢您的宝贵时间!
最佳答案
由于您要开发单页应用程序，因此您将拥有许多可视化模块，这些模块将在当前步骤中显示，然后它们将被其他模块替换。
您可以遵循 MVC 模式(模型- Controller - View )，每个可视元素都是一个单独的实体，具有自己的 DOM 操作代码和存储在单独类中的业务逻辑。
一种方法是:
<html>
<head>
....
</head>
<body>
<div id="content">
<!--The main container view that can handle the replacement of smaller views -->
<div id="toolbar"_container">
<!-- container for menu bar or tool bar that can also has its contained
sub-views replaced -->
</div>
<div id="main_content_container">
....
</div>
<div id="properties_panel">
.....
</div>
</div>
</body>
</html>
主容器可以容纳所有较小的容器，每个容器都容纳一个具有自己的 DOM 操作代码的不同 View Controller ，(这也具有能够按需动态加载的好处，因此减少了初始化加载时间).
每个 View 都可以有一对模块来执行“操作”，并与第三个模块(可选)通信，后者负责数据库、套接字、文件等的 I/O。
希望对您有所帮助!
关于javascript - 在可扩展的 JavaScript 架构上放置 DOM 交互的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8566652/