AngularJSHTML5 MutationObserver检查和测试页面威迫

好久没写博客了,业务平昔在变更,陆陆续续的做了不可计数web
app,被工作流淹没就很少有空子去反省,前端技术进步这么之快,平时有种不学则退的慌乱,一种技术还没看清就出现新的技巧,然后一波人又打着各样规范去宣传,想偷懒都卓殊,大脑完全不够用。

Nodejs,AngularJS,vuejs,React,grunt,gulp,webpack…Fuck!

HTML5的水很深很深,感觉还有众多技巧尚未打通和选用。无意中发觉HTML5
DOM4级MutatioObserver方法,能够检查页面中的DOM是或不是产生变化,说到那说不定大家了解可以用来干嘛了。

的确,前段时间大家相见了web
app被运维商威吓的题材,不明白哪些环节出了难点,换了https按理说应该不会再冒出,后来想到用接近GA总括的办法去总计页面是还是不是被注入了js脚本恐怕iframe,然后经过日记去查看万分难点。

绑架难题唯有就是页面被修改了,DOM结构爆发变化了被插入了小广告。看到MutatioObserver方法有种柳暗花明的痛感,即使无法缓解被威迫的难题,可是也能查看被注入了怎么,也算涨了耳目。

概述

 MutationObserver从字面上含义正是发现突变。它能够监听页面包车型地铁DOM成分是不是发生了转移,然后交到通知。

Constructor

MutationObserver()

new MutationObserver(callback)

callback,当每一遍DOM产生变化的时候都会触发callback,大家恐怕就会问,那倘若几度修改dom,那那些callback就会频仍触发,质量上如何是好?实际上,MutationObserver并不是每趟dom产生变化的时候立即触发,如故等全部的dom操作完毕今后二次执行,也正是说它是异步的。

举个栗子:

<body>
  <ul id="container"></ul>
</body>

var callback=function(){
  console.log("Dom changed");
};
var mutationObserver=new MutationObserver(callback);
var otpions={
  subtree:true,
  childList:true
};
mutationObserver.observe(document.body,otpions);
window.onload=function(){
  for(var i=0;i<10;i++){
    var li=document.createElement("li");
    li.innerText="这是";
 document.getElementById("container").appendChild(li);
  }
};

http://jsbin.com/nimilelote/edit?html,js,console,output

笔者们像DOM成分中插入了10回,实际上oberve只举办了一次,是在颇具的dom操作完毕以往触发的。

 

mutationObserver实例有多个点子。

observe(target,options)
 //给制定的DOM注册二个轩然大波,假诺DOM爆发变化就会发送公告。target是指标成分,比如body,options是布局哪写dom发生变化时才发送公告

disconnect();    //终止监听DOM变化,直到再一次实例化

takeRecords()   //清除变动记录,即不再监听还没产生的DOM变化

 

observe实例化配置:

childList:设置为true表示监听钦赐成分的子成分的改动;

attributes:设置为true表示监听钦命成分的本性的更改;

characterData:设置为true表示监听内定元素的data变动;

subtree:设置为true表示不紧监听指标成分也还要监听其子成分变动;

attributeOldValue:在attributes属性已经设为true的前提下,如果需要将发生变化的特性节点在此之前的属性值记录下来(记录到上面MutationRecord对象的oldValue属性中),则设置为true;

characterDataOldValue:在characterData属性已经设为true的前提下,如果需要将发生变化的``characterData``节点之前的文本内容记录下来(记录到上边MutationRecord对象的oldValue属性中),则设置为true.

attributeFilter:2天性质名数组(不要求钦点命名空间),唯有该数组中隐含的质量名产生变化时才会被阅览到,其余名目标性质爆发变化后会被忽略.

// Firefox和Chrome早期版本中带有前缀
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver

// 选择目标节点
var target = document.querySelector('#some-id');

// 创建观察者对象
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// 配置观察选项:
var config = { attributes: true, childList: true, characterData: true }

// 传入目标节点和观察选项
observer.observe(target, config);

// 随后,你还可以停止观察
observer.disconnect();

 

相关文章