凉山网站建设青岛房产网首页

凉山网站建设,青岛房产网首页,建设银行的官方网站,建设网站流程图一文讲清楚DOM动态观察器MutationObserver的原理和使用场景 1. 引出 前端的童鞋都应该了然一件事，不管是借助框架像vue/react/angular，还是原生开发，就是我们开发来开发去，操作来操作去，其实本质都是在对页面上的HTML内容进行CURD 那既然我们是在对HTML进行CURD，那我们是…一文讲清楚DOM动态观察器MutationObserver的原理和使用场景1. 引出前端的童鞋都应该了然一件事，不管是借助框架像vue/react/angular，还是原生开发，就是我们开发来开发去，操作来操作去，其实本质都是在对页面上的HTML内容进行CURD那既然我们是在对HTML进行CURD，那我们是不是就可以对某个元素进行观察和监听，他是否发生了变化，从而做出相应的业务处理比如我们在做前端的时候，有时候会加入一下三方框架，比如广告插件，我们原本想的是，你就只干你插件的事，不要给我变动我们页面本来的东西，结果呢，这个广告插件就是耍小聪明，偷偷往页面上插了一个button，引导用户点击跳转，从而实现引流这可不是我能接受的，靠，我的流量怎么能跑你那边去了呢又或者这个广告插件特么的可能因为商务关系不太好，给我的站点突然加了一个播放片子的视频，我靠，这可大方了所以，我们要监测一下，这家伙有没有往页面上加东西，怎么检测呢，就用DOM动态观察器，MutationObserver他能检测到DOM节点的详细变化，并且允许指定一个回调函数，在变化发生后回调执行，同时可以通过配置项，配置需要监测的内容，如下表配置项作用childList监听目标节点的子节点增删（如新增 / 删除）attribute监听目标节点的属性变化，如class/id/src等characterData监听目标节点的文本内容变化，如textContentsubtree监听目标节点的所有后代节点，开启后，后代节点的变化也会被捕获attriubteOldValue出发回调时，返回属性变化前的值characterDataOldCalue触发回调时，返回文本变化前的值attributeFilter指定监听某下属性，如[src,class]等，减少全量不必要的监听2. 原理对设计模式比较了解的童鞋一眼就可以看出来，这是一个典型的观察者模式观察者：MutationObserver被观察者：目标DOM节点触发逻辑：当被观察者的DOM发生指定类型的变化时，浏览器会将变化事件加入到微任务队列，带主线程空闲时，触发观察者的回调函数，传递变化详情所以说，MutationObserver是异步的，属于微任务，浏览器会把短时间内的多次DOM变化合并为一次回调触发（采用防抖），避免频繁执行回调导致的性能问题同时，因为MutationObserver是异步的，如果你想在Observer里面访问修改后的DOM状态，比如获取尺寸，需要包裹requestAnimationFrame原理知道了，具体怎么用呢3. 使用分三步第一步，创建observe第二步，设置配置项，也就是你需要监听的类型第三步，绑定目标DOM，开启监听第四步，触发MutationObserve第五步，关闭监听上代码divid="target"class="unactive"/divscript//第一步：创建MutationObserver实例，传入回调函数constobserver=newMutationObserver((mutationList,observer)={/** * mutationList是所有触发的DOM变化数组，每个元素都是一个MutationRecord对象 * observer是MutationObserver实例本身，用于关闭实例等操作 */for(constmutationofmutationList){