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

本文深入探讨现代前端技术,涵盖DOM操作、AJAX跨域请求、MV*模式、VirtualDOM及MNV*模式,解析各技术原理与应用场景,助力前端开发者提升技能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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


  • 笔记章节目录

  • 2019/11/11

4.1 直接DOM操作时代

DOM的propertyattribute的区别:property通常是指DOM元素对象的属性,比如id、style等自有的、通用的属性(其实是DOM对象的属性);而attribute是指HTML标签的文本标记属性,一般用于自定义的属性。(p170)

createDocumentFragmentcreateElement的区别: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)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值