参考-基于组件的架构

参考-基于组件的架构

我不了解 angular 我也不了解 react , 但就我对 vue 文档的观察, 我认为基于组件的架构提供了一些常见办法 来应对日常的编程任务。有很多基于组件的架构的框架，除了 AVR ，还有老牌框架 backbone.js AngularJS 和新鲜框架 crank ，各个框架都实现了这一套 API / 约定 / 协议，虽然实现办法各不相同。未来框架也会提供这些方法。使用这些工具，面对经典需求的软件开发者将消费以基于组件的架构为基本架构的框架所提供的典型 API ，消费这框架提供的性能检测和优化办法，来完成软件设计、软件实现、软件交付(delivery)。这些软件的基本功能有很多，比如样式展示 按钮事件 partial view 等。
通过纯 js 也可以实现这些功能。

---

初始化

• 根组件 根视图
• 组件载入 / 脚本载入到 html 页面

---

模板相关 / 视图层

页面基础

• 模板 (string literal)
• 模板渲染
• 供模板渲染的变量（通过 variable interpolation 载入模板，可以定义在模板里 也可以定义在模板外）

页面自定义 / 页面组合

• 模板片段 partial

页面自定义方法

• 页面组合办法 require
• 页面组合办法 yield

---

页面控制

• 数据组装 (变量, 数组, 对象 object)
• 根据数据渲染模板 (partial view)

数据和模板关系

• 向页面传入数据
• 绑定数据和模板 data binding (单向绑定 双向绑定)

---

基于组件的架构：元素

元素

• 元素 element in HTML
• 使用元素就是消费组件

组件

• 组件状态
• 组件状态决定了元素内容
• 更新组件状态 就可以更改元素内容, 在下一个变化检测周期 组件就可以按照新的组件状态完成渲染

---

基于组件的架构：随时间变化的数据

模板载入新数据

• runtime 检测到新数据 (略)
• runtime 给出新的渲染结果

新数据来源

• 用户事件 DOM 事件 如按钮 键入
• url 事件 如新 url
• 异步网络数据 1

处理思路： GUI 多线程与异步调度

• 多线程 (可能在 web component 里?)
• 监听 (监听 DOM 事件)
• 约定 (约定刷新时刻) 1

变化检测周期

• 变化检测周期 (略)
• 组件操作时机

---

基于组件的架构：对框架的要求

代理式时序问题解决方案

• 框架提供了一个代理式时序问题解决方案 (框架本身负责时序问题)
• 下一个变化检测周期是如何发起的
• 如何取得上一个变化检测周期里的旧数据
• interception system (组件生命周期)

---

基于组件的架构：对组件的要求

对组件的要求 / 组件类型

• 纯函数
• 纯函数优点 (浪费内存 但增加程序可预测性 增加组件状态可预测性)
• fallback (如果不让用纯函数该怎么办)

组件操作

• 纯函数副作用 (用纯函数方式构建组件更新组件)

组件性能

• 纯函数方式提升性能 (纯函数方式构建组件更新组件)(强烈依赖组件刷新机制)
• 指针方式提升性能 (指针方式创建组件修改组件对象)

---

基于组件的架构：同步和异步

同步时序

• DOM 事件 如按钮

异步时序

• 异步操作 如网络数据

异步操作注意事项

• 数据请求的发起
• 新数据的获取
• 数据格式
• 等待信息如何展示 (作为组件状态的一部分)

异步操作与纯函数

• 纯函数副作用 新数据改变组件状态
• async 方法放在哪里

---

基于组件的架构：数据流 组件作用域

内存数据

• 组件作用域 / 类作用域

内存数据操作办法

• 扩大作用域
• 缩小作用域

硬盘数据

• local storage

数据赋值和控制

• 控制器(层)
• 服务(层)
• smart component

数据展示

• dumb component

数据控制器构建经验

• reducer

---

DOM property 特性

模板流程控制

• 打印变量
• 打印列表
• 追踪列表项目 (item's key)

---

DOM event 特性

事件

• 事件监听器 (addEventListener)
• 事件触发之后的处理 (event handler)

---

js 语言特性应用：变量是变量，函数也是变量

数据部署

• 组件自定义数据 (组件状态)
• 组件状态管理
• 向子组件传入状态

事件部署

• 组件自定义事件处理器
• 向子组件传入事件处理器

内存管理特例

• 不可变对象
• 优点 (浪费内存 但增加程序可预测性 增加组件状态可预测性)
• fallback (如果不允许用不可变对象 那么该怎么办) 1

---

---

参考1
https://developer.mozilla.org...
https://v2ex.com/t/294276?p=1...

参考
模板相关 react 常见说法
component composition (require)
子组件 props.children (yield)
子元素 pass as props

模板相关 angular 常见说法
子
projection (API ng-content) (yield)

参考2
https://ruby-china.github.io/...