Dom*_*rre 5 javascript architecture
关于如何拥有更易维护的javascript架构,我现在有点困惑.我可能不在轨道上,但我会说我的代码中有近50%涉及DOM因此使用我的基础库(jQuery).
我已经检查了[1] Nicholas Zakas的可扩展应用程序架构设计:http://developer.yahoo.com/yui/theater/video.php？ v = zakas -architecture 和[2] Addy Osmani模式用于大规模JavaScript应用程序架构http://addyosmani.com/largescalejavascript/.
我有一个单页应用程序样式,通过ajax获取大量内容,动态添加DOM元素.我的主要问题是:如果我使用jQuery(或任何其他基础库)来操作DOM,我如何将代码分成小的可重用块.
让我们选择一个任务列表模块.我知道该模块可能如下所示:
var TaskList = function() {
addTask = function() {
...
};
removeTask = function() {
...
};
return {
addTask: addTask,
removeTask: removeTask
}
}();
应该在哪里编写DOM元素事件注册,ajax调用以保存,加载或删除任务,将新任务附加到DOM元素等.
我承诺在模块上使用jQuery作为依赖项没有问题,但如果有更好的方法,我认为我从上面的两个资源中错过了它,我很想知道它.
我只是希望有一种更优雅的方式来维护不断增长的javascript,因为我厌倦了意大利面;)
谢谢你的时间!
小智 0
由于您将开发一个单页应用程序，因此您将拥有许多可视模块，这些模块将在当前步骤中显示，然后它们将被其他模块替换。
您可以遵循 MVC 模式（模型-控制器-视图），每个可视元素都是一个单独的实体，具有自己的 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 操作代码的不同视图控制器（这还有一个好处是能够按需动态加载，从而减少初始化加载时间）。
每个视图都可以有几个模块来执行“操作”，并与第三个模块（可选）通信，第三个模块将处理数据库、套接字、文件等的 I/O。
希望有帮助！
| 归档时间： |
|
| 查看次数： |
720 次 |
| 最近记录： |