Riot - 设计模式

2017-11-24 本文已影响10人果汁凉茶丶

提供工具，而不是策略

Riot 提供了自定义标签，事件触发器 (observable) 和 路由功能. 我们相信这些是前端应用的基本组成单元：

自定义标签用于用户界面,
事件用于模块化
路由用于 URL 管理和回退按钮支持.

Riot 不使用强制的规则，而是提供最基本的工具，因此我们能更强的定制我们的产品，发挥创意思维。Riot这种灵活的方式将应用层面的大的架构决策交还给开发者。

1. 事件触发器 - Observable

Observable 是发送和接收消息的一般化工具。
它是区分不同模块，减少依赖或“耦合”的常用模式。使用事件可以将大的程序分解成更小更简单的单元。可以添加、删除、修改各个模块而不影响应用的其它部分。

一种常用实践是将应用划分成单一的核心和多个扩展。这个核心在某些事情发生时（添加了新项，旧项被删除，或从服务端获取了数据）触发事件。

通过使用 observable，扩展部分可以监听这些事件并对其进行响应。核心并不知道这些扩展模块的存在。这称为“松耦合”。

这些扩展可以是自定义标签 (UI 组件) 或非 UI 模块.

只要慎重设计好核心部分和事件接口，团队成员就可以各自独立开发，而互相不打扰。

2. 路由功能 - Routing

路由器是管理URL和浏览器后退按钮的一般化工具。

修改 URL 的 hash 部分
hash 变化时进行通知
查看当前 hash

路由的逻辑可以放在任何地方; 在自定义标签中或非UI模块中. 有些应用框架将路由器作为一个中央模块，由它将任务派发给应用的其它部分。而有些则采取更温和的方式，将URL事件象键盘事件一样处理，不影响整体的架构。
任何浏览器应用都需要路由，因为在地址栏里总是有一个URL的。

3. 模块化

自定义标签构成了应用的视图部分。在模块化的应用中，这些标签不应知晓互相之间的存在，应被隔离。理想情况下，你可以在整个项目中使用同一个标签，而不论外部的HTML布局如何变化。
如果两个标签知晓彼此的存在，则称它们互相依赖，造成了“紧耦合”。这样的标签就无法在系统中四处重用
为了减少耦合，让标签之间互相监听消息而不是进行直接调用. 你都要好好的是用 riot.observable 构建的发布/订阅系统。

Riot 应用设计实例

1. Observable

// Login API
var auth = riot.observable()

auth.login = function(params) {
  $.get('/api', params, function(json) {
    auth.trigger('login', json)
  })
}

2. 视图层

<!-- login 视图 -->
<login>
  <form onsubmit="{ login }">
    <input name="username" type="text" placeholder="username">
    <input name="password" type="password" placeholder="password">
  </form>

  login() {
    opts.login({
      username: this.username.value,
      password: this.password.value
    })
  }

  // any tag on the system can listen to login event
  opts.on('login', function() {
    $(body).addClass('logged')
  })
</login>

3. 加载

<body>
  <login></login>
  <script>riot.mount('login', auth)</script>
</body>

这样，系统中其它的标签不需要知道彼此的存在，只需要监听 “login” 事件，在处理器里实现自己需要的逻辑。

Observable 是实现松耦合（模块化）应用的经典模式。