现代前端技术解析：现代前端交互框架

本文链接：https://blog.csdn.net/baidu_27438681/article/details/82598198

直接 DOM 操作时代

DOM API分为：节点查询型、节点创建型、节点修改型、节点关系型、节点属性型、内容加载型

类型	方法	jQuery 方法
节点查询型	getElementById、getElementByName、getElementsByClassName、getElementsByTagName、querySelector、querySelectorAll	$(selector).find()等
节点创建型	createElement、createDocumentFragment、createTextNode、cloneNode	$(selector).clone()等
节点修改型	appendChild、replaceChild、removeChild、insertBefore、innerHTML	html()、replace()、remove()、append()、before()、after()等
节点关系型	parentNode、previousSibling、childNodes	parent()、siblings()、closest()、next()、children()等
节点属性型	innerHTML、attributes、getAttribute、setAttribute、getComputedStyle	attr()、data()、css()、hide()、show()、slideDown()、slideUp()、animate()等
内容加载型	XMLHttpRequest、ActiveX	ajax()、get()、post()等

DOM的property和attribute区别

property通常是指DOM元素对象的（固有）属性，例如style
attribute是指HTML标签的文本标记属性，一般是可见的，如自定义的data-status属性

JQuery

简化选择器、DOM 操作方法、Ajax、事件绑定、延时对象、兼容性处理

主流前端页面加载模式

DOM 加载 => JS 等脚本加载 => 脚本执行发送请求 => DOM 操作进行数据渲染 => 事件绑定

MVC（Model-View-Controller）数据模型、试图、事件控制函数

MVP（Model-View-Presenter）

MVVM可认为是一个自动化的MVP，使用ViewModel代替了Presenter。数据Model的调用和模板内容的渲染不需要主动操作，而是ViewModel自动来触发完成，任何用户的操作也是通过ViewModel的改变驱动的。

设计思想：

在内容发生变化时，不改变整个列表，只对变化的部分重新渲染
Visual DOM 是一段能够直接描述 HTML DOM 结构的 JS 对象

核心实现：

创建 Visual DOM
把一段 HTML 字符串文本解析成一个能够描述它的 JS 对象
根据标签之间的关系，进行词法分析，自己实现解析方式
（由于 Visual DOM 的使用目的是避免直接进行 DOM 操作，所以我们不能用 DOM API 扫描生成 JS 对象，这样效率很低）
对比 Visual DOM
将改变后的 Visual DOM 结构与改变前的对比，生成差异树对象（对于多叉树的遍历，DFS/BFS）
渲染差异化 Visual DOM