现代 Web 应用程序需要响应能力、效率和动态交互性。原生 JavaScript API（例如 MutationObserver、IntersectionObserver 和 History API）使开发人员能够直接应对这些挑战，而无需外部库。让我们详细探索这些 API，了解它们的用例，并学习如何有效地利用它们的功能。
概述：
MutationObserver 接口监视 DOM 树中的更改，替换现已弃用的 Mutation Events。它可以检测节点何时添加、删除或修改，使其成为动态应用程序的必备工具。
主要特点：
问。 MutationObserver 是如何工作的？
MutationObserver 实例是使用回调函数创建的，每当 DOM 中发生指定的更改时就会触发该回调函数。
MutationObserver 中的选项
子树：观察目标节点及其所有后代。
childList：监视子节点的添加或删除。
属性：跟踪目标节点属性的更改。
attributeFilter：限制对指定属性的监控。
attributeOldValue：捕获属性更改之前的先前值。
characterData：观察节点文本内容的变化。
characterDataOldValue：捕获文本内容修改前的先前值。
HTML 语法
<div>
<p><strong>JS Syntax</strong><br>
</p>
<pre class="brush:php;toolbar:false">
const target = document.querySelector('#something')
const observer = new MutationObserver(function(mutations){
mutations.forEach(function(mutation){
console.log('Mutation detected:', mutation)
})
})
const config = {attributes:true, childList:true, characterData:true, subtree:true}
observer.observe(target,config)
//observer.disconnect() - to stop observing
用例：
概述：
IntersectionObserver 是一个异步观察目标元素相对于根容器或视口的可见性变化的接口。它通常用于延迟加载、无限滚动和分析。
主要特点：
问。路口观察器如何工作？
Intersection Observer API 会在发生以下任一情况时触发回调：
目标元素与设备的视口或指定的根元素相交。
观察者第一次开始观察目标元素。
路口观察器中的选项
root：用作检查可见性的视口的元素。如果未指定，则默认为浏览器的视口。
rootMargin：根周围的边距，指定为字符串（例如“10px 20px”）。扩大或缩小可观察区域。
阈值：0 到 1 之间的值（或值数组），指示触发回调所需的可见性百分比。
问。交集是如何计算的？
Intersection Observer API 使用矩形来计算交叉区域：
不规则形状的元素被视为适合完全包围它们的最小矩形。
对于部分可见的元素，使用包含所有可见部分的最小矩形。无论元素形状或可见性如何，这都可以确保测量的一致性。
基本语法
<div>
<p><strong>JS Syntax</strong><br>
</p>
<pre class="brush:php;toolbar:false">
const target = document.querySelector('#something')
const observer = new MutationObserver(function(mutations){
mutations.forEach(function(mutation){
console.log('Mutation detected:', mutation)
})
})
const config = {attributes:true, childList:true, characterData:true, subtree:true}
observer.observe(target,config)
//observer.disconnect() - to stop observing
用例：
高级功能：
概述：
History API 使 Web 应用程序能够操作浏览器的会话历史记录。它允许添加、替换或修改条目，而无需重新加载页面，这是单页应用程序 (SPA) 的基石。
主要特点：
基本语法：
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('Element is visible in the viewport.')
// Optionally stop observing
observer.unobserve(entry.target)
}
})
})
// Target elements to observe
const targetElement = document.querySelector('.lazy-load')
// Start observing
observer.observe(targetElement)
用例：
组合这些 API
这些 API 可以协同工作来创建复杂的 Web 应用程序。例如：
示例用例：
当用户向下滚动（无限滚动）时，博客应用程序会动态加载帖子。它还会更新 URL 以反映当前帖子，而无需重新加载页面，从而确保更好的用户体验并改进 SEO。
<div>
<p><strong>JS Syntax</strong><br>
</p>
<pre class="brush:php;toolbar:false">
const target = document.querySelector('#something')
const observer = new MutationObserver(function(mutations){
mutations.forEach(function(mutation){
console.log('Mutation detected:', mutation)
})
})
const config = {attributes:true, childList:true, characterData:true, subtree:true}
observer.observe(target,config)
//observer.disconnect() - to stop observing
结论
MutationObserver、IntersectionObserver 和 History API 为动态和交互式 Web 应用程序提供了强大的本机解决方案。通过了解它们的功能并有效地集成它们，开发人员可以构建高性能且功能丰富的应用程序，而无需严重依赖外部库。
以上是原生 JavaScript API 简介：MutationObserver、IntersectionObserver 和 History API的详细内容。更多信息请关注PHP中文网其他相关文章！
