关于前端:参考基于组件的架构

参考 - 基于组件的架构

我不理解 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/…