HTML5 特性之 Mutation Observer_html/css_WEB-ITnose

前言

上周某业务 App 中页面被劫持,看到这个我想到两个分享,一个是第一届 FEDay 上石玉磊 @ 腾讯有分享如何做的问题,第二个是在朋友圈看到 @ 糖饼分享的方案。 结合这两个有了今天的这个 API 的分享。感谢 @ 草根程序猿 的博文。文末有疑惑解答!!

正文从这开始~

1 、概述

Mutation Observer (变动观察器)是监视 DOM 变动的接口。当 DOM 对象树发生任何变动时, Mutation Observer 会得到通知。

要概念上,它很接近事件。可以理解为,当 DOM 发生变动会触发 Mutation Observer 事件。但是,它与事件有一个本质不同:事件是同步触发,也就是说 DOM 发生变动立刻会触发相应的事件; Mutation Observer 则是异步触发, DOM 发生变动以后,并不会马上触发,而是要等到当前所有 DOM 操作都结束后才触发。

这样设计是为了应付 DOM 变动频繁的情况。举例来说,如果在文档中连续插入 1000 个段落( p 元素),会连续触发 1000 个插入事件,执行每个事件的回调函数,这很可能造成浏览器的卡顿;而 Mutation Observer 完全不同,只在 1000 个段落都插入结束后才会触发,而且只触发一次。

注:在控制台可看到 log

Mutation Observer 有以下特点:

  • 它等待所有脚本任务完成后,才会运行,即采用异步方式

  • 它把 DOM 变动记录封装成一个数组进行处理,而不是一条条地个别处理 DOM 变动。

  • 它即可以观察发生在 DOM 节点的所有变动,也可以观察某一类变动

目前, Firefox(14+) 、 Chrome(26+) 、 Opera(15+) 、 IE(11+) 和 Safari(6.1+) 支持这个 API 。 Safari 6.0 和 Chrome 18-25 使用这个 API 的时候,需要加上 WebKit 前缀( WebKitMutationObserver )。可以使用下面的表达式检查浏览器是否支持这个 API 。

2 、使用方法

首先,使用 MutationObserver 构造函数,新建一个实例,同时指定这个实例的回调函数。

2.1 observer 方法

observer 方法指定所要观察的 DOM 元素,以及要观察的特定变动。

上面代码首先指定,所要观察的 DOM 元素提 article ,然后指定所要观察的变动是子元素的变动和属性变动。最后,将这两个限定条件作为参数,传入 observer 对象的 observer 方法。

MutationObserver 所观察的 DOM 变动(即上面代码的 option 对象),包含以下类型:

  • childList :子元素的变动

  • attributes :属性的变动

  • characterData :节点内容或节点文本的变动

  • subtree :所有下属节点(包括子节点和子节点的子节点)的变动

想要观察哪一种变动类型,就在 option 对象中指定它的值为 true 。需要注意的是,不能单独观察 subtree 变动,必须同时指定 childList 、 attributes 和 characterData 中的一种或多种。

除了变动类型, option 对象还可以设定以下属性:

  • attributeOldValue :值为 true 或者为 false 。如果为 true ,则表示需要记录变动前的属性值。

  • characterDataOldValue :值为 true 或者为 false 。如果为 true ,则表示需要记录变动前的数据值。

  • attributesFilter :值为一个数组,表示需要观察的特定属性(比如 ['class', 'str'] )。

2.2 disconnect 方法和 takeRecord 方法

disconnect 方法用来停止观察。发生相应变动时,不再调用回调函数。

takeRecord 方法用来清除变动记录,即不再处理未处理的变动。

2.3 MutationRecord 对象

DOM 对象每次发生变化,就会生成一条变动记录。这个变动记录对应一个 MutationRecord 对象,该对象包含了与变动相关的所有信息。 Mutation Observer 进行处理的一个个变动对象所组成的数组。

MutationRecord 对象包含了 DOM 的相关信息,有如下属性:

  • type: 观察的变动类型( attribute 、 characterData 或者 childList )。

  • target: 发生变动的 DOM 对象。

  • addedNodes: 新增的 DOM 对象。

  • removeNodes: 删除的 DOM 对象。

  • previousSibling: 前一个同级的 DOM 对象,如果没有则返回 null 。

  • nextSibling: 下一个同级的 DOM 对象,如果没有就返回 null 。

  • attributeName: 发生变动的属性。如果设置了 attributeFilter ,则只返回预先指定的属性。

  • oldValue: 变动前的值。这个属性只对 attribute 和 characterData 变动有效,如果发生 childList 变动,则返回 null 。

3 、实例

3.1 子元素的变动

下面的例子说明如果读取变动记录。

上面代码的观察器,观察 body 元素的所有下级元素( childList 表示观察子元素, subtree 表示观察子元素的下级元素)的变动。回调函数会在控制台显示所有变动的类型和目标元素。

3.2 、属性的变动

下面的例子说明如何追踪属性的变动。

上面代码先设定追踪属性变动( 'attributes':true ),然后设定记录变动前的值。实际发生变动时,会将变动前的值显示在控制台。

后语

更多可以参考 MDN : https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

关于本文

作者: @ 草根程序员

原文链接: http://www.cnblogs.com/jscode/p/3600060.html

昨天早读君有发了三个问题,@豆腐童鞋针对@小幸运问题进行解答,非常感谢。

@ 小幸运。: 我是在公司实习了两个月了,但是由于刚出学校,技术,经验都不是很好,慢慢喜欢的前端都觉得有些不太喜欢了。这种情况怎么办?

@豆腐( 华农大学、百度前端实习生 ):实习两个月的也有时有这样想法的 +1 。其实这种情况我自己总结了一下觉得大概有两点。一是刚进公司的新奇感消失了,每天都在做业务久而久之就觉得无聊不想做,另一个可能是在业务上遇到自己太多不会的,对自己的技术水平产生了怀疑,想放弃实习回去进一步进修。 我自己的解决办法是周末的时候做一些自己想做的事情,抛下业务去寻找前端的乐趣。比如画一个动画,看看博客分享然后对里面的疑问实践一下,找一些面试题笔试题看看有什么不会的去学习下 … 然后内心给自己打一针鸡血,告诉自己要奋斗要努力要好好打代码,这样大概周一上班的时候就会想,好!这周要好好奋斗!嗯

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: