How Javascript works (Javascript工作原理) (十) 使用 MutationObserver 监测 DOM 变化
个人总结:
这篇文章介绍了几种监测DOM变化的方法,重点介绍的是一个新浏览器API叫做MutationObserver。
注意:不要和Vue.js种 Object.defineProperty() 的Getter,Setter弄混,还有proxy...那些是监测对象的变化,这个说的是监测DOM的变化。
附:
1.Object.defineProperty(obj, props) (其实还有Object.defineProperties这个api..).
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
使用:
var obj = {};
Object.defineProperty(obj,'a', { set:function(){ console.log(1) }}); //setter
obj.a = 3 // 输出了1
2.Proxy
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
示例:
网络应用在客户端日益复杂,这是由很多因素的造成的,比如需要更加丰富的界面交互以提供更加复杂的应用功能,实时计算等等。
网络应用的日益复杂导致无法知晓其生命周期中指定时刻准确的交互界面状态。
如果你正在构建一些框架或者一个库,这会更加的困难,比如,你无法通过监测 DOM 来响应并执行一些特定的操作。
概述
MutationObserver 是现代浏览器提供的用来检测 DOM 变化的网页接口。你可以使用这个接口来监听新增或者删除节点,属性更改,或者文本节点的内容更改。
可以干点啥好呢?
你可以在以下几种情况信手拈来 MutationObserver 接口。比如:
- 通知用户当前所在的页面所发生的一些变化。
- 通过使用一些很棒的 JavaScript 框架来根据 DOM 的变化来动态加载 JavaScript 模块。
- 可能当你在开发一个所见即所得编辑器的时候,使用 MutationObserver 接口来收集任意时间点上的更改,从而轻松地实现撤消/重做功能。
这只是几个 MutationObserver 的使用场景。
如何使用 MutationObserver
在应用中集成 MutationObserver 是相当简单的。通过往构造函数 MutationObserver
中传入一个函数作为参数来初始化一个 MutationObserver 实例,该函数会在每次发生 DOM 发生变化的时候调用。MutationObserver
的函数的第一个参数即为单个批处理中的 DOM 变化集。每个变化包含了变化的类型和所发生的更改。
var mutationObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation);
});
});
创建的实例对象拥有三个方法:
observe
-开始进行监听。接收两个参数-要观察的 DOM 节点以及一个配置对象。disconnect
-停止监听变化。takeRecords
-触发回调前返回最新的批量 DOM 变化。
以下为开始监听的代码片段:
// 开始监听页面根元素 HTML 变化。
mutationObserver.observe(document.documentElement, {
attributes: true,
characterData: true,
childList: true,
subtree: true,
attributeOldValue: true,
characterDataOldValue: true
});
现在,假设你写了一个简单的 div
元素:
<div id="sample-div" class="test"> Simple div </div>
可以使用 jQuery 来移除 div 的 class
属性:
$("#sample-div").removeAttr("class");
当调用 mutationObserver.observe(…)
就可以开始监听 DOM 变化。
当每次发生 DOM 变化的时候,会打印出各个 MutationRecord 日志信息:
这一变化是由移除 class
属性所引起的。
最后,如果想停止监听 DOM 变化可以使用如下方法:
// MutationObserver 停止监听 DOM 变化
mutationObserver.disconnect();
现在,MutationObserver
浏览器兼容情况很好:
替代方法
然而,之前 MutationObserver
并没有被广泛使用。那么,当没有 MutationObserver
的时候,开发者是如何解决监听 DOM 变化的呢?
有几下几种可用的方法:
- 轮询
- MutationEvents
- CSS 动画
轮询
最简单且粗糙的方法即使用轮询。使用浏览器内置的 setInterval 网页接口你可以创建一个定时任务来定时检查 DOM 的变化。当然了,这个方法会显著地减弱网络应用/网站的性能。
其实,这是可以理解为脏检查,如果有使用过 AngularJS 应该会有看过其脏检查所导致的性能问题。在我的另一个系列里面有稍微介绍了下,具体可以查看这里。
CSS 动画
依靠 CSS 动画 是一个有点令人感到新奇的替代方案。这听起来会让人有些困惑。大体上,实现思路是这样的,创建一个动画,一旦在 DOM 中添加一个元素就会触发该动画。开始执行 CSS 动画的时候就会触发 animationstart
事件:假设为该事件添加事件监听器,就可以准确知晓 DOM 中添加元素的时机。动画的运行时间周期必须非常的短以便让用户感知不到,即体验更佳。
首先,需要一个父级元素,在里面监听节点添加事件:
<div id=”container-element”></div>
为了处理节点的添加,需要创建关键帧序列动画,该序动画在添加节点的时候启动:
@keyframes nodeInserted {
from { opacity: 0.99; }
to { opacity: 1; }
}
创建好关键帧之后,在需要监听的元素上应用动画。注意到那个短暂的持续时间-在浏览器端动画痕迹会非常平滑(即用户会感觉不到有动画发生):
#container-element * {
animation-duration: 0.001s;
animation-name: nodeInserted;
}
这样会为 container-element
的所有后代节点添加动画。当动画结束,触发 insertion 事件。
我们需要创建一个函数作为事件监听器。在函数内部,开始必须使用 event.animationName
代码进行检查,确保是我们所监听的动画。
var insertionListener = function(event) {
// 确保是所监听的动画
if (event.animationName === "nodeInserted") {
console.log("Node has been inserted: " + event.target);
}
}
为父元素绑定事件监听器:
document.addEventListener(“animationstart”, insertionListener, false); // standard + firefox
document.addEventListener(“MSAnimationStart”, insertionListener, false); // IE
document.addEventListener(“webkitAnimationStart”, insertionListener, false); // Chrome + Safari
这里采用了事件委托。
CSS 动画浏览器支持情况:
MutationObserver
有几点优势。本质上,它会监听 DOM 可能发生的每个变化并且性能更优,因其会批量 DOM 变化之后才触发回调事件。总之,MutationObserver
的兼容性很好,并且还有一些垫片,这些垫片底层是基于 MutationEvents
的。How Javascript works (Javascript工作原理) (十) 使用 MutationObserver 监测 DOM 变化的更多相关文章
- JavaScript 工作原理之十-使用 MutationObserver 监测 DOM 变化
原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十章. 网络 ...
- JavaScript是如何工作的:使用MutationObserver跟踪DOM的变化
摘要: 掌握MutationObserver. 这是专门探索 JavaScript 及其所构建的组件的系列文章的第10篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工 ...
- How Javascript works (Javascript工作原理) (一) 引擎,运行时,函数调用栈
个人总结:该系列文章对JS底层的工作原理进行了介绍. 这篇文章讲了 运行时:js其实是和AJAX.DOM.Settimeout等WebAPI独立分离开的 调用栈:JavaScript的堆内存管理 和 ...
- How Javascript works (Javascript工作原理) (四) 事件循环及异步编程的出现和 5 种更好的 async/await 编程方式
个人总结: 1.讲解了JS引擎,webAPI与event loop合作的机制. 2.setTimeout是把事件推送给Web API去处理,当时间到了之后才把setTimeout中的事件推入调用栈. ...
- JavaScript定时器的工作原理(翻译)
JavaScript定时器的工作原理(翻译) 标签(空格分隔): JavaScript定时器 最近在看ajax原理的时候,看到了一篇国外的文章,讲解了JavaScript定时器的工作原理,帮助我很好的 ...
- [中英对照]How PCI Works | PCI工作原理
How PCI Works | PCI工作原理 Your computer's components work together through a bus. Learn about the PCI ...
- [中英对照]How PCI Express Works | PCIe工作原理
How PCI Express Works | PCIe工作原理 PCI Express is a high-speed serial connection that operates more li ...
- How Javascript works (Javascript工作原理) (十四) 解析,语法抽象树及最小化解析时间的 5 条小技巧
个人总结:读完这篇文章需要15分钟,文章介绍了抽象语法树与js引擎解析这些语法树的过程,提到了懒解析——即转换为AST的过程中不直接进入函数体解析,当这个函数体需要执行的时候才进行相应转换.(因为有的 ...
- How Javascript works (Javascript工作原理) (十五) 类和继承及 Babel 和 TypeScript 代码转换探秘
个人总结:读完这篇文章需要15分钟,文章主要讲解了Babel和TypeScript的工作原理,(例如对es6 类的转换,是将原始es6代码转换为es5代码,这些代码中包含着类似于 _classCall ...
随机推荐
- ZBrush软件中的笔触类型
在ZBrush® 中我们通过各种笔触类型,确定在使用ZBrush®画笔进行绘制时画笔的变化方式及状态.使用多种画笔绘制根据选择不同的笔触组合绘制,能够得到繁多变化丰富的制作效果. 选择笔触的类型 点击 ...
- ajax请求及遍历
$(".btn").click(function(){ $.ajax({ type:"POST", url:"../../js/info.json&q ...
- Java 实现简单的RPC框架
0 引言 RPC,全称为Remote Procedure Call,即远程过程调用,它是一个计算机通信协议.它允许像调用本地服务一样调用远程服务.它可以有不同的实现方式.如RMI(远程方法调用).He ...
- vector的resize与reserve的区别
- [学习笔记] CS131 Computer Vision: Foundations and Applications:Lecture 2 颜色和数学基础
大纲 what is color? The result of interaction between physical light in the environment and our visual ...
- centos7最小化安装图形界面
1.安装X Window System命令 yum groupinstall "X Window System" 选择y直接安装就可以了 2.安装图形界面软件 GNOME yum ...
- Uboot优美代码赏析1:目录结构和malkefile分析
Uboot优美代码赏析1:目录结构和malkefile分析 关于Uboot自己选的版本是目前最新的2011.06,官方网址为:http://www.denx.de/wiki/U-Boot/WebHom ...
- 标题:u-boot 移植步骤详解
1 U-Boot简介U-Boot,全称Universal Boot Loader,是遵循GPL条款的开放源码项目.从FADSROM.8xxROM.PPCBOOT逐步发展演化而来.其源码目录.编译形式与 ...
- python 添加自定义库
首先,写一个库文件aaa.py 格式,在python安装目录下面创建一个空的文件夹命名Function 或者其他文件名, 然后将文件保存在python 安装目录下面的一个Function文件夹下面. ...
- 树形dp复习 树上依赖背包问题
选课 今天又看了一下这道题,竟然AC不了了 自己的学习效率有点低下 要明白本质,搞透彻 #include<bits/stdc++.h> #define REP(i, a, b) for(r ...