参考 - 基于组件的架构
我不理解 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
变化检测周期
- 变化检测周期 (略)
- 组件操作机会
基于组件的架构：对框架的要求
组件会被翻译成什么 (组件是如何变成 DOM 树的)
- 组件树 tree 和 DOM 树
- 组件会被翻译成什么 1 2
expensive tree
- expensive tree 为什么会是一个性能威逼
- expensive tree 的例子 1 2
基于组件的架构：对框架的要求
代理式时序问题解决方案
- 框架提供了一个代理式时序问题解决方案 (框架自身负责时序问题, 软件编写只须要恪守框架的约定)
- 下一个变化检测周期是如何发动的
- 如何获得上一个变化检测周期里的旧数据
- interception system (组件生命周期)
基于组件的架构：对组件的要求
对组件的要求 / 组件类型
- 纯函数 1 (component as a function)
- 纯函数长处 (节约内存 但减少程序可预测性 减少组件状态可预测性)
- 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 常见说法
元素 element tag
projection (API ng-content) (yield)
参考 2
https://ruby-china.github.io/…