使用Core(Mediator)/ Sandbox(Facade)/ Module模式创建松散耦合和多页面的JS应用程序 - 建议？

Question

我正在构建一个多页面的javascript应用程序.我已经阅读了很多设计模式,并使用Core/Facade/Module方法创建应用程序w /松散耦合(pub/sub scribing to events).

我有一个非常好的系统,可以在部署时将所有模块文件和相关的依赖项缩小并组合成一个外部javascript文件.最小化我的应用程序的额外HTTP请求是一个设计目标 - 因此我对AMD(异步模块定义)不太感兴趣.

我正在使用Nicholas Zakas的可扩展JavaScript应用程序架构演示文稿中指出的指南

http://www.youtube.com/watch?v=vXjVFPosQHw

&&

Addy Osmani的大规模JavaScript应用程序架构模式 http://addyosmani.com/largescalejavascript/

&&

这个高级教程,来自Nettuts的Andrew Burgess,编写模块化JavaScript http://marketplace.tutsplus.com/item/writing-modular-javascript/128103/?ref=addyosmani&ref=addyosmani&clickthrough_id=90060087&redirect_back=true

我的问题是关于如何管理此应用程序的不同页面及其相关模块的建议.我还使用Backbonejs的Router类w/ballupton的History.js库来操作HTML5历史/状态API并动态加载页面而不刷新,同时保持不支持HTML状态API的旧浏览器的向后兼容性.我的所有页面都共享一个公共代码库(单个缩小和压缩的js文件).

这是我想在我的应用程序中使用的结构的大纲:

它本质上是一种混合方法.上半部分包含Core/Facade/Module模式,其中包含不相互直接交互并通过外观发布/订阅通知的离散模块.

下半部分由我提出的应用程序结构组成,当状态/ url发生更改时通知"主控制器",主控制器执行任何全局操作(如初始化我的UI的标题和侧边栏菜单,如果尚未初始化)并指示相关的子控件运行它的init()方法(以及在之前加载的任何控制器上调用destroy();).每个子控制器(与ex:主页,日历页面,预订页面等相关)从可用模块池中挑选模块并初始化它们.

这是一个很好的方法,还是我处于糟糕的轨道？我可以看到模块仍然彼此独立,这有利于可伸缩性.

我还考虑将路由器和控制器视为离散模块并让它们发布/订阅Core,并且每个控制器以某种方式初始化它所需的模块页面.

Answer 1

我们为保持历史平稳运行所做的一件事是首先更改URL.在更改URL时会触发事件,路由器将解析该URL然后找出要执行的操作.此事件也会在页面加载时自动触发.如果单击一个链接,它只会更改URL,这非常简单,并且完全将链接/按钮与应用程序逻辑分离.这似乎适用于我们的应用程序.我们使用了JQM,但是我们放弃了大部分路由器,因为我们从一些XML文件中读取了大部分指令,并且没有一堆HTML页面加载到主视口区域.

我经常看到骨干应用程序使用路由器作为核心/中介.这是一个好主意.您只需监听URL的更改事件,然后适当地更改页面.虽然单身人士难以进行单元测试,但这个中介人应该是单身人士.

我不一定同意Backbone的观点是它对"观点"的定义.视图类似于控制器中的动作(从某些角度来看).此时我们在应用程序中添加了一个更高级别的分离.我们的视图向模板文件发出了ajax请求,这些文件填充了一些JSON和handlebars.js.我会说你的标题/侧边栏应该只是模板.如果你需要刷新它们,那么看看你如何能够做到非常简单,否则你正在寻找创建4个新模块:列表集合,每个项目的模型,集合视图和模型视图.我将模板与更高级别的视图结合得更紧密,直到需要进一步细分(例如,某些"应用程序/主视图").

拥有此模板层允许您进行表面更改,而无需重新编译,这很好.任何时候你都可以把东西放到"元"中,这是一个胜利(除非它要求你阅读XML(ha)).作为奖励,您可以单独缓存模板(或者就此而言单独缓存它).

您的架构看起来确实很好,并且是解决您问题的有效方法.我给出的一个提示是不要过度设计.迭代是最好的.你需要重构.无法预见什么会使您的应用程序提前3-6个月更流畅.

2013年12月18日更新

现在有一天我们正在使用木偶和更多的奥斯玛尼技巧.除上述项目外,我们还使用了AMD的备用格式:

define(function(require) {
    var myTemplate = require('hb!mytemplate.handlebars'),
        view = require('myview');
    ...
});

我们还将marionette应用程序类与提供请求/响应层的wreqr结合使用.这允许我们干净地设置应用程序范围的对象.它还允许我们在没有明确声明类名的情况下定义类.这是一个非常好的沙箱方式.例如:

this.app.setHandler('CanvasClass', function() {
    return RaphaelCanvasView;
});

// elsewhere

this.app.request('CanvasClass').text('123', {x:1, y:2});

这一切似乎都很顺利.

您还应该检查光环js和Web组件.我们的目录结构类似于模仿/预测这些概念而无需投资.