《现代前端技术解析》第4章阅读笔记
- 笔记章节目录
- 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)