参考-基于组件的架构前端

参考-基于组件的架构

我不了解 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/...