前端框架设计
2020-05-18 13:37:44 0 举报AI智能生成
前端框架设计，尤雨溪
作者其他创作
大纲/内容
框架的共同目标
尽可能高效构建 Web 应用程序
框架设计需要取舍
职责范围
(React，Vue 和 Angular 之间的根本区别)
(React，Vue 和 Angular 之间的根本区别)
框架可以为用户做多少事情
小职责范围
react
接近原生库
专注于提供一个非常基础的 UI 模型，专注于提供更底层的原生实现，基于此用户可以构建出一套属于自己的抽象。
有意缩小职责范围，这也是 react 生态系统非常活跃的原因所在。
react 生态就像一个商城。
有意缩小职责范围，这也是 react 生态系统非常活跃的原因所在。
react 生态就像一个商城。
优点
刚开始需要理解的概念少
更好的灵活性 -> 活跃的生态系统，构建任意复杂的系统
团队拥有更小的维护层面，可以专注于他们认为重要的东西
缺点
用一个简单的概念去解决一个本来就很复杂的问题时需要做更多的钻研工作
模式自然会随着时间的推移而出现，但通常没有在官方文档中提到
用 react 的过程中必须了解 redux，高阶组件，render props，hooks 以及在 js 中使用 css 的各种方式
生态系统发展太快可能会导致碎片化和使用者流失
大职责范围
angular
提供更多抽象概念
在设计过程中，用户可能会遇到的问题都被考虑在内，如表单验证，动画效果等等。
有意扩大职责范围。
有意扩大职责范围。
优点
大多数常见问题可以被内置的抽象解决
集中式的设计流程确保了它与其生态系统的一致性：遇到具体问题的时候，不必去找一些不同的解决方案，只要看看框架让你做什么。
缺点
更高学习门槛
如果内置解决方案不适合当前用例，它会变得不灵活
引入一些底层新想法的成本更高，因为太多的地方都要保持一致性
维护负担大
渐进式框架
Vue
优点
使用分层设计，允许以渐进式的方式选择特性: 如果不需要路由、状态管理、构建步骤，可以使用没有任何特性的 Vue，只需要将 Vue.js 加载进页面中，就可以使用
低学习门槛
允许更多的人参与 Web 开发并专注开发，而不是先要学习一堆当前开发可能不需要的概念
对于常见问题文档上有解决方案
缺点
维护负担大
生态系统不会像小职责范围框架那样多样化
渲染机制
如何通过框架来表现UI结构以及该框架时如何进行渲染的
JSX vs Templates
动态渲染函数 vs 基于静态字符串的 Vue 表达式
JSX / Virtual DOM
优点
JavaScript 的完整表现力
将视图层视为数据，返回当前状态的 vdom 节点，用户可以根据虚拟 dom 获取快照，可以将其渲染到需要替换的目标，比如渲染到终端、pdf、canvas、webgl 等等
缺点
成本高
渲染函数的动态特性使得它难以优化
运行时调度提高了可见性能，但需要很长的运行时间，并且无论何时加载 React ，都必须加载那些处理复杂的运行时调度工作的所有必需代码，会使初始加载时间变长
模版编译
优点
生成更加直接的渲染指令，有更好的原生性能
静态和非常严格的模版限制允许编译器对用户意图做更多的预判，从而有更多优化的空间
根据策略的不同，可以使得 runtime 基础代码更轻量
缺点
受限于模板语法，从而失去 JavaScript 的表达能力
更轻量的 runtime 可能是以更详细的模板输出为代价的
运行时编译成本或者构建步骤上有硬性要求
Vue 有 Virtual DOM 和 模板编译
性能
模板 diff
vue2 vs vue3
vue2 vs vue3
vue2
完整的 diff 操作
vue3
只使用一个单一扁平化数组
（比 vue2 快了6倍）
（比 vue2 快了6倍）
block tree
以结构化指令作为界限将模板分割成嵌套的块。每个块中node结构是静态的，动态的节点被放入扁平数组中追踪。
js 表现力
可以跳过模板直接使用渲染函数
表现力 vs 原生性能
运行时调度 vs 提前优化
状态机制
可变 vs 不可变
脏检查 vs 依赖追踪
总结
框架领域就像一个多维空间，有多个不断变化的实体，每个框架都在试图寻求平衡，找出最佳的方式
作为使用者需要了解框架所做的内部权衡，要往什么方向发展，与自己构建的东西是否一致
参考
https://www.bilibili.com/video/av61099876?from=search&seid=9877507458293185806
职业：本科
0 条评论
下一页
