MutationObserver 是用于监视 DOM 树内的特定节点的 Web API 接口，一旦监测到节点发生变化，就会通知回调函数执行相应的逻辑。该 API 的兼容性很好，但由于如今流行的 JS 框架都旨在“数据驱动视图”，使得这个 API 容易被大众遗忘。
本文将介绍 MutationObserver 的基本原理、使用方法和应用场景，帮助读者更好地理解和应用这个灵活且强大的 API。
事情是这样的，某天我想给文档网站加个访问量统计的插件，这个插件是第三方的，工作原理是将数据填充到页面中特定 id 的节点上，例如有一个 <span id="pv"></span> 的节点，插件加载完成后就会通过 dqS (document.querySelect) 找到 id 为 pv 的节点然后把 pv 数据渲染上去。问题就在于，我这个文档网站并不是静态的，所有工作都是在运行时完成，类似一个用 Vue 驱动的网页，一开始只有 #app 节点，所以这个第三方脚本不能直接放在 index.html 文档中加载，否则可能页面还没渲染完，脚本就已经开始 dqS 了，结果肯定是没有数据显示。而页面真正渲染完成并不在 DOMContentLoaded 阶段，使得 defer 异步加载也失去用处。
如果你的网站是自己用例如 Vue 这样的框架编写的，那你自然会想到在 onMounted 生命周期里加载脚本，但在这个场景下页面真正渲染完成是在一个黑盒当中，那么我要如何才能获知这个本“不存在”的 DOM 节点出现的时机呢？
起初我想到的是一个笨拙但有用的解决方案，那就是使用定时器函数，我们只需要轮询节点是否存在，等到它出现的时候，便可以开始加载第三方脚本：
const timer = setInterval(() => {
if (document.getElementById('xxxx')) {
// TODO: 此时开始加载第三方脚本
clearInterval(timer) // 清除定时器
}
}, 1000)效果如下所示：
这种方式虽然可以有效运作，但是很明显的缺陷是不够灵活，定时器的间隔时间难以定义，设置长了生效慢，设置短了又产生太多不必要的开销。
有没有什么方法可以避免无意义的轮询，又能在渲染完成第一时间加载脚本呢？这就要提到 MutationObserver 这个浏览器 API 了。
MutationObserver 是Web API 中的一个接口，用于监测 DOM 树中的变化。
它可以观察特定节点或其子节点的任何更改，例如添加、删除或修改子节点、属性变化、文本变化等等。
当 MutationObserver 绑定到一个节点上时，它会创建一个观察器实例，该实例会监听其绑定的节点及其子节点的变化，并在发生变化时触发一个回调函数。
这个 API 的使用非常简单，我们以上面的场景为例，只需要监听文档树的根节点，然后在其子节点每次发生变化时进行 dqS 就可以了，代码如下：
// 选择一个要监听的节点
const targetNode = document.body
// 创建一个新的 MutationObserver
const observer = new MutationObserver(() => {
if (document.getElementById('xxx')) {
// TODO: 此时开始加载第三方脚本
observer.disconnect(); // 销毁监视者
}
})
const config = { childList: true, subtree: true } // 对哪些更改做出反应
// 绑定目标节点并启动监视者
observer.observe(targetNode, config)在完成对应逻辑后应该及时调用 observer.disconnect() 销毁监视者，否则第三方脚本里如果也操作了 DOM 就会不断递归。
在上面代码的回调函数中打印 dqS 信息，这里前三次 DOM 发生变动时特定节点还不存在，直到第四次变动出现了特定节点，于是加载第三方脚本，渲染数据，并关闭监视者。
config 对象有如下这些值，这些布尔选项表示会“对哪些更改做出反应”：
除了上文的第三方脚本场景，还有哪些场景可以使用呢？
当我们给一个普通的 div 添加 contentEditable 属性时，它便具有了可编辑的能力，这时我们可以通过 MutationObserver 来监听文本内容的变动，并执行某些逻辑，例如在发生改动时触发自动保存等。
// 使用以下简单的代码片段，修改文本并观察控制台的输出：
<div contentEditable id="editor">
点击开始 <b>编辑文本</b>。
</div>
<style>
#editor {
height: 200px;
padding: 1rem;
}
</style>
<script>
const observer = new MutationObserver(mutationRecords => {
for (mutation of mutationRecords) {
console.log(mutation.type); // 输出属性变化的类型
console.log('oldValue: '+mutation.oldValue)
console.log(mutation.target.data) // 文本变动
}
});
// 观察除了特性之外的所有变动
observer.observe(editor, {
childList: true, // 观察直接子节点
subtree: true, // 及其更低的后代节点
characterData: true,
characterDataOldValue: true // 将旧的数据传递给回调
});
</script>MutationRecord 对象有如下一些属性：
在上面的文本编辑器例子中，除了在文本框修改会触发监听回调，打开控制台在文档树中直接修改也能触发回调：
这就给我们提供了一种保护 DOM 结构的思路：例如在页面中打水印的场景，只需要用最简单的 div 覆盖最上层实现，然后监听这些水印节点，无论水印被何种方式删除，都可以监听到然后把它还原回去~
同理，如果页面中插入第三方广告，也可以用来检查广告是否被屏蔽等。
MutationObserver 的优点在于它可以捕获多种类型的 DOM 变化，包括元素的添加、删除、属性更改、文本内容变化等，而不需要显式地监听每一种变化类型，这意味着它更灵活、更可靠，并且可以适应各种应用场景。
从架构的角度上来看，MutationObserver 可以构建更高效、更灵活的代码，因为它符合设计模式中最基本的“开闭原则”，即对扩展开放，对修改关闭。该原则提倡当需要添加新的功能时，不应修改已有的代码，而是应该通过扩展已有的代码来实现新的功能。当已存在的代码成为黑盒时，有效地监听 DOM 变化并做出相应的扩展逻辑，可以更优雅地完成需求。
以上就是文章的全部内容，感谢看到这里！本人知识水平有限，如有错误望不吝指正，如果觉得写得不错，对你有所帮助或启发，可以点赞收藏支持一下，也欢迎关注，我会更新更多实用的前端知识与技巧。我是茶无味de一天(公众号：品味前端)，希望与你共同成长~
对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl
我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此
我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r
刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？ 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr
我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R
是否可以在应用程序中包含的gem代码中知道应用程序的Rails文件系统根目录？这是gem来源的示例:moduleMyGemdefself.included(base)putsRails.root#returnnilendendActionController::Base.send:include,MyGem谢谢，抱歉我的英语不好 最佳答案 我发现解决类似问题的解决方案是使用railtie初始化程序包含我的模块。所以，在你的/lib/mygem/railtie.rbmoduleMyGemclassRailtie使用此代码，您的模块将在
无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD
导读：随着叮咚买菜业务的发展，不同的业务场景对数据分析提出了不同的需求，他们希望引入一款实时OLAP数据库，构建一个灵活的多维实时查询和分析的平台，统一数据的接入和查询方案，解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型，最终引入ApacheDoris作为最终的OLAP分析引擎，Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图，在叮咚买菜数十个业务场景中广泛应用。作者｜叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月，是一家专注美好食物的创业公司。叮咚买菜专注吃的事业，为满足更多人“想吃什么”而努力，通过美好食材的供应、美好滋味的开发以及美食品牌的孵
在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList()Obt
?博客主页：https://xiaoy.blog.csdn.net?本文由呆呆敲代码的小Y原创，首发于CSDN??学习专栏推荐：Unity系统学习专栏?游戏制作专栏推荐：游戏制作?Unity实战100例专栏推荐：Unity实战100例教程?欢迎点赞?收藏⭐留言?如有错误敬请指正！?未来很长，值得我们全力奔赴更美好的生活✨------------------❤️分割线❤️-------------------------