框架设计里到处体现了权衡的艺术
框架本身的各个模块之间并不是相互独立,而是相互关联,相互制约的,需要全局把控和权衡

1.命令式和声明式

1.命令式

代表:JQuery 代码本身描述的是做事的过程
特点:关注过程,命令式理论上可以做到极致优化,但是用户需要承受巨大的心智负担,

2.声明式

代表:vue 特点:关注结果,声明式能够有效减轻用户的心智负担,但性能上有一定牺牲

vue内部实现一定是命令式的,而暴露给用户的是声明式,

2.性能与可维护性的权衡

声明式代码的性能不优于命令式代码的性能
声明式代码的更新性能消耗=找出差异的性能消耗+命令式代码的更新性能消耗
命令式需要维护实现目标的整个过程
声明式代码展示的就是结果,过程vue内部给解决

3.虚拟DOM的性能

虚拟DOM就是为了最小化找出差异这一步的性能消耗而出现的
绝对的命令式代码,性能高,可维护成本也高并且消耗精力巨大,投入产出比不高,所以才使用虚拟DOM
javascript层面计算和DOM层面计算两者差距不大,虚拟DOM的主要优势在于局部更新
虚拟DOM在javascript层面的运算要比创建页面时多出一个Diff的性能消耗,但不会产生数量级的差异
综合考虑心智负担,可维护性,性能等综合考虑才使用虚拟DOM

4.运行时和编译时

既声明式地描述UI,又具备原生的javacript性能

框架三种选择:纯运行时,运行时+编译时,纯编译时

1.纯运行时框架

Object+render

提供一个render函数,用户可以为该函数提供一个树形结构的数据对象,然后render函数会根据对象的递归将数据渲染成DOM元素 缺点:显示不直观,树形结构可维护性不高 没有编译过程,没法分析用户提供的内容

2.运行时+编译时

html+compiler+render

1.把HTML标签编译成树形结构对象,compiler函数把HTML字符串编译成树形结构的数据对象
2.构建的时候就执行compiler函数将用户提供的内容编译好(性能优化),也可以运行时编译 分析用户提供的内容,编译的时候提取这些消息,然后传递给render函数,render函数进一步优化

3.纯编译时

html+compiler
1.直接把HTML字符串编译成命令式代码,因为不支持任何运行时内容,用户的代码通过编译器编译后才能运行

直接分析用户提供内容,性能更好,用户提供的内容必须编译后才能用,缺乏灵活性