现代前端技术解析-第4章 现代前端交互框架

《现代前端技术解析》第4章阅读笔记

---

• 笔记章节目录

• 第1章 Web前端技术基础
• 第2章 前端与协议
• 第3章 前端三层结构与应用
• 第4章 现代前端交互框架
• 第5章 前端项目与技术实践
  • 一（5.1 前端开发规范）
  • 二（5.2 前端组件规范 & 5.3 自动化构建）
  • 三（5.3 自动化构建）
  • 四（5.5 前端用户数据分析 & 5.6 前端搜索引擎优化基础 & 5.7 前端协作）
• 第6章 前端跨栈技术
• 第7章 未来前端时代

---

• 2019/11/11

4.1 直接DOM操作时代

DOM的property和attribute的区别：property通常是指DOM元素对象的属性，比如id、style等自有的、通用的属性（其实是DOM对象的属性）；而attribute是指HTML标签的文本标记属性，一般用于自定义的属性。（p170）

createDocumentFragment和createElement的区别：createDocumentFragment创建节点的时候可以将多个文档的片段先缓存起来，最后通过父节点的appendChild()方法一次性插入到DOM中，可以减少DOM的操作次数。(p170)

• 2019/11/12

AJAX跨域请求： AJAX跨域请求时默认不会带有Cookie信息，需要在请求头添加xhrFields:{withCredentials:true}才能将Cookie发送到浏览器。（p173）

**正确使用jQuery：**p175

4.2 MV*交互模式

*MV：**主要有MVC、MVP、MVVM。（p176-184）

• 2020/02/17

MVVM的执行逻辑： 使用Directive识别渲染和绑定事件。具体逻辑Demo：p183

数据变更检测： 双向数据绑定中的一个方面，通常是指双向数据绑定中Model/ViewModel（数据）修改触发View修改的一种实现方法。（p185）

实现数据变更检测的方法（4种）： p185-p193

• 手动触发绑定；
• 脏数据检测机制；
• 前端数据对象劫持（Hijacking）；
• ES6 Proxy；

4.3 Virtual DOM交互模式

• 2020/02/18

一般MVVM的缺点： 当VirtualModel改变时，MVVM会重新渲染整个被改变的部分，不管那些没有改变的部分，没有减少甚至增加了DOM操作。

Vritual DOM： Virtual DOM是一个能够直接描述一段HTML DOM结构的JS对象，浏览器可以根据他的结构按照一定的规则创建出确定的唯一的HTML DOM结构。（p196）

Virtual DOM的优点： 减少了其他框架对DOM的扫描或操作次数，并且在数据发生改变之后只在合适的地方根据JS对象来进行最小化的页面DOM操作，避免大量重新渲染。（p196）

Virtual DOM核心操作步骤：（p196）

• 创建Virtual DOM；
• 对比操作前后的DOM生成差异化的Virtual DOM（多叉树结构的遍历算法）；
• 将差异化的Virtual DOM渲染到页面上；

4.4 前端MNV*时代

MNV*模式简介： Model-NativeView-*，*可以代表Virtual DOM或者ViewModel等，也可以使用Controller来实现调用的方式（相当于用NativeView代替了之前的View）。目的是实现完全不需要DOM操作的模式。（p201）