Riot - 设计模式

作者: 果汁凉茶丶 | 来源:发表于2017-11-24 15:07 被阅读10次

提供工具,而不是策略

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

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

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

1. 事件触发器 - Observable

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

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

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

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

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

2. 路由功能 - Routing

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

  1. 修改 URLhash 部分
  2. hash 变化时进行通知
  3. 查看当前 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 是实现松耦合(模块化)应用的经典模式。

相关文章

  • Riot - 设计模式

    提供工具,而不是策略 Riot 提供了自定义标签,事件触发器 (observable) 和 路由功能. 我们相信这...

  • Riot - Observable

    该文提炼了 Riot 中最为关键的几个 Observable,用熟它们,你,就是Riot大神! riot.obse...

  • RIOT

    随着加密货币牛市的加速,在美股上市的比特币矿业股也陷入了疯狂,典型的三大标的RIOT、BTBT和MARA均上涨10...

  • 漫威 | 毒液要和暴乱抢宿主(04)

    第四章 Riot “祝你一生愉快!” 毒液去引爆火箭的瞬间,riot也反应了过来。但在严密封锁的火箭内,riot...

  • LOL御用画师Joon Ahn的场景概念设计大师课开始预售了

    -在RIOT(拳头)工作是什么体验? -LOL的原画是怎么设计出来的? -遇到瓶颈感觉进步不了怎么办? -到底怎么...

  • 设计模式

    常用的设计模式有,单例设计模式、观察者设计模式、工厂设计模式、装饰设计模式、代理设计模式,模板设计模式等等。 单例...

  • 设计模式笔记汇总

    目录 设计原则 “依赖倒置”原则 未完待续... 设计模式 设计模式——策略模式 设计模式——装饰者模式 设计模式...

  • 设计模式

    《C#设计模式》 《C#设计模式》-设计模式概述 《C#设计模式》-面向对象设计原则 《C#设计模式》-单例模式 ...

  • 浅谈JS的一些设计模式

    @(书籍阅读)[JavaScript, 设计模式] 常见设计模式 设计模式简介 设计模式概念解读 设计模式的发展与...

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

网友评论

    本文标题:Riot - 设计模式

    本文链接:https://www.haomeiwen.com/subject/jsqfbxtx.html