famo.us - 如何构建大型应用程序

Question

我想知道如何构建我的应用程序。我是否应该使用自定义视图和一个将对其进行控制的主视图。或者将我的观点保存在灯箱中更好。我发现的所有示例都在某种程度上受到功能的限制，并且仅显示一个或几个屏幕。什么是组织更大应用程序的正确方法？

Answer 1

我也想知道

初始点：


Famo.us应用程序以分层渲染树的形式进行构造。
Famo.us使用RequireJS模块。
Famo.us鼓励使用Views

视图是可重用的组件。
视图封装了功能（以及渲染树的一部分）。
视图使用事件进行通信。
视图由选项对象初始化。



我们需要添加结构来管理：


商业逻辑
非UI功能，例如REST api调用，音频，本地存储等。
数据流：

根据用户输入更新数据
更新数据更改视图



模块，事件和松散耦合

目标：


可扩展的应用程序结构。
小型，独立，可测试的模块。
促进代码的重用。
轻松共享模块（只需将文件拖放到您的项目中）
不依赖其他Javascript框架。


通常，模块之间紧密耦合：


模块实例化并保留对另一个模块的引用
模块跨越其语义边界

知道特定REST API的视图
使用特定模型代码（例如Backbone）的视图（请参阅Taasky示例）



这是避免这种情况的方法：


当发生有趣的事情（用户输入，数据更改等）时，模块会发出事件。
调解员收听事件
介体调用另一个模块的公共API。


因此，它没有让View-module知道Backbone模型的东西，而是发出了这样的用户输入事件：


Todo-Edit-View发出“用户输入”事件："todo-update",{id:1,title:'Code'}
Todo-Mediator收听事件。
Todo-Mediator调用Todo模块的tasks.find({id:1}).update({title:'Code'})（例如使用Backbone）


规则


有模块和调解器
模块具有公共API并发出事件
API和事件保持其语义范围；即“ updateTitle（）”而不是“ onBackboneModelChange（）”
中介器将应用程序耦合，即将主干模型更改为待办事项标题更新。
调解人是单身人士
一个应用程序可以具有多个介体。


例如，像GMail这样的电子邮件应用程序可能具有用于


聊天功能
待办事项列表功能
阅读电子邮件
撰写和发送电子邮件


文件结构：

/src
   /lib
   /services
   /mediators
   /layout
   /content
   /config
   /main.js

模块类型：


服务：封装非UI功能的独立模块，例如：LocalStorage，Ajax，Web Audio等。
布局：内容的布局，动画和位置，例如：ScrollView，HeaderFooterView等
内容：应用程序的实际内容：渲染树的叶子节点（表面）。


注意布局和内容之间的区别。通过将UI组件和布局与实际内容分离，可以轻松重用UI模式，例如侧面板，弹出窗口，导航栏，粘滞标题，滚动视图等。

另外，我建议为每个仅包含结构和最小主题的布局创建一个 *.css。所有主题都可以在 config/theme.css中覆盖/扩展，因此很容易重新设计应用程序。

其他代码：


介体：使用事件和公共API耦合模块。
配置：包含初始化时整个应用程序中使用的所有选项。
main.js：引导应用程序。


Main.js中的Bootstrap应用


创建调解人
创建服务
构造渲染树


模块生命周期


模块必须包含在一个文件中，即不要依赖外部库！


创建模块后，它将向所有中介者宣布其存在。我们使用Famo.us Engine发出一个全局事件。这将是唯一需要的依赖项！

 Engine.trigger('created',this)

当模块被销毁时，它将向所有调解员宣布其销毁。

 Engine.trigger('destroyed',this)

介体侦听 created和 destroyed事件并将模块粘合在一起：

 var someDataModule; // Backbone or whatever
 Engine.on('create',function(module){
    if(module instance of SomeDataModule) {
        var someDataModule = module;
    }
    if(module instanceof TodoView) {
      module.on('change-title',function({id:id,title:title}){
          someDataModule.find({id:id}).set('title',title);
      })
    }
 }) 

在简单的介体中，您可以按顺序初始化模块（即 SomeDataModule在 TodoView之前）。但是，在更复杂的场景中，您可能需要使用 Promise耦合所有内容。

注意依赖项

“自包含”模块有三个例外：


布局和内容模块允许具有层级依赖性。父母可以初始化孩子，并期望这些孩子发生某些事件。 ListView可能会初始化 ItemView并处理 ItemRemoved事件。
服务可以是其他服务的外观/适配器。例如， DataService可能为 RestApiService提供简化，抽象和安全层。
当然，调解员之间存在依赖关系，因为他们耦合了应用程序！