HTML的Custom Elements：生命周期回调函数（LCC）的精确执行时机与陷阱 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

HTML Custom Elements：生命周期回调函数深度剖析

大家好，今天我们深入探讨HTML Custom Elements的生命周期回调函数（Lifecycle Callbacks，LCC）。理解这些回调函数的精确执行时机，是编写健壮、高性能的自定义元素的关键。同时，我们也会揭示一些常见的陷阱，帮助大家避免掉入坑里。

什么是生命周期回调函数？

Custom Elements API允许我们创建自己的HTML标签。这些标签的行为可以通过JavaScript来定义，而生命周期回调函数就是定义这些行为的关键。它们提供了一系列钩子，让我们可以在元素的不同阶段执行特定的代码，例如元素被添加到DOM、从DOM中移除、属性发生变化等等。

核心生命周期回调函数

Custom Elements API定义了四个核心的生命周期回调函数：

connectedCallback
disconnectedCallback
attributeChangedCallback
adoptedCallback

我们将逐一分析它们的执行时机、参数，以及使用示例。

1. connectedCallback

执行时机： 当自定义元素第一次被连接到文档的DOM时被调用。这意味着元素被插入到页面中，或者从一个断开的DOM子树移动到连接的DOM子树。
参数： 无参数。
用途： 非常适合执行元素的初始化操作，例如设置初始属性、添加事件监听器、渲染初始内容等。
陷阱：
- 不要假设元素已完全渲染： connectedCallback在元素被连接到DOM后立即执行，但浏览器可能还没有完成元素的渲染。如果需要访问元素的确切尺寸或位置，最好使用requestAnimationFrame来延迟执行相关代码。
- 避免重复初始化： 如果元素被从DOM中移除并重新添加，connectedCallback会被再次调用。确保你的初始化代码是幂等的，或者使用标志来避免重复执行。
- 影藏 DOM 的 ready 状态： connectedCallback 执行的时候，Shadow DOM 可能还没有完全准备好。如果你的初始化代码依赖于 Shadow DOM 中的元素，务必检查 Shadow DOM 是否已经创建完成。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>Connected Callback Example</title>
</head>
<body>
    <my-element></my-element>

    <script>
    class MyElement extends HTMLElement {
        constructor() {
            super();
            this.shadow = this.attachShadow({ mode: 'open' }); // 创建 Shadow DOM
        }

        connectedCallback() {
            console.log('Element connected to the DOM!');
            this.shadow.innerHTML = `<p>Hello from my-element!</p>`; // 初始化内容
            this.addEventListener('click', this.handleClick); // 添加事件监听器
        }

        handleClick() {
            alert('Element clicked!');
        }
    }

    customElements.define('my-element', MyElement);
    </script>
</body>
</html>

在这个例子中，connectedCallback会在 <my-element> 被添加到DOM时执行。它会输出一条消息到控制台，并在元素的Shadow DOM中渲染一段文本，以及添加一个点击事件监听器。

2. disconnectedCallback

执行时机： 当自定义元素从文档的DOM中断开连接时被调用。这发生在元素被移除、移动到另一个文档，或者整个包含元素的文档被卸载时。
参数： 无参数。
用途： 适合执行清理操作，例如移除事件监听器、释放资源、取消未完成的异步操作等。
陷阱：
- 不要依赖于元素的状态： 在disconnectedCallback执行时，元素可能已经处于不确定的状态。避免访问元素的属性或状态，除非你确定它们仍然有效。
- 避免内存泄漏： 如果你在connectedCallback中添加了事件监听器，一定要在disconnectedCallback中移除它们，以防止内存泄漏。
- 不要创建新的 DOM 操作： 在 disconnectedCallback 中创建新的 DOM 操作可能会导致意外的行为，因为元素已经从 DOM 中移除。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>Disconnected Callback Example</title>
</head>
<body>
    <my-element></my-element>

    <script>
    class MyElement extends HTMLElement {
        constructor() {
            super();
            this.shadow = this.attachShadow({ mode: 'open' });
        }

        connectedCallback() {
            this.shadow.innerHTML = `<p>Hello from my-element!</p>`;
            this.addEventListener('click', this.handleClick);
        }

        disconnectedCallback() {
            console.log('Element disconnected from the DOM!');
            this.removeEventListener('click', this.handleClick); // 移除事件监听器
        }

        handleClick() {
            alert('Element clicked!');
        }
    }

    customElements.define('my-element', MyElement);

    // 移除元素
    setTimeout(() => {
        const element = document.querySelector('my-element');
        element.remove();
    }, 3000);
    </script>
</body>
</html>

在这个例子中，disconnectedCallback会在 <my-element> 从DOM中移除时执行。它会输出一条消息到控制台，并移除之前添加的点击事件监听器。

3. attributeChangedCallback

执行时机： 当自定义元素的一个监听属性的值发生变化时被调用。要使attributeChangedCallback生效，你需要使用 static get observedAttributes() 方法声明要监听的属性。
参数：
- attributeName: 发生变化的属性的名称（字符串）。
- oldValue: 属性之前的旧值（字符串）。如果属性之前没有设置，则为 null。
- newValue: 属性的新值（字符串）。
用途： 允许你响应属性的变化，例如更新元素的内部状态、重新渲染内容等。
陷阱：
- 必须声明监听属性： attributeChangedCallback只有在你使用 static get observedAttributes() 方法声明要监听的属性后才会生效。
- 避免无限循环： 在attributeChangedCallback中修改属性的值可能会导致无限循环。确保你只在必要时才修改属性，并且避免在修改属性后立即再次修改它。
- 注意类型转换： 属性值总是字符串。如果需要使用数字或其他类型，需要在attributeChangedCallback中进行类型转换。
- 性能问题： 频繁地改变属性可能会导致性能问题。尽量减少属性变化的次数，或者使用节流或防抖技术来优化性能。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>Attribute Changed Callback Example</title>
</head>
<body>
    <my-element my-attribute="initial value"></my-element>

    <script>
    class MyElement extends HTMLElement {
        constructor() {
            super();
            this.shadow = this.attachShadow({ mode: 'open' });
        }

        static get observedAttributes() {
            return ['my-attribute']; // 声明要监听的属性
        }

        attributeChangedCallback(attributeName, oldValue, newValue) {
            console.log(`Attribute ${attributeName} changed from ${oldValue} to ${newValue}`);
            this.shadow.innerHTML = `<p>My attribute is now: ${newValue}</p>`; // 更新内容
        }

        connectedCallback() {
            this.shadow.innerHTML = `<p>My attribute is: ${this.getAttribute('my-attribute')}</p>`;
        }
    }

    customElements.define('my-element', MyElement);

    // 修改属性
    setTimeout(() => {
        const element = document.querySelector('my-element');
        element.setAttribute('my-attribute', 'new value');
    }, 3000);
    </script>
</body>
</html>

在这个例子中，attributeChangedCallback会在 my-attribute 属性的值发生变化时执行。它会输出一条消息到控制台，并更新元素的Shadow DOM中的文本。

4. adoptedCallback

执行时机： 当自定义元素被移动到新的文档时被调用。这通常发生在 document.adoptNode() 方法被调用时。
参数：
- oldDocument: 元素之前所在的文档。
- newDocument: 元素现在所在的文档。
用途： 允许你处理元素被移动到新文档后的情况，例如更新对外部资源的引用、重新初始化状态等。
陷阱：
- 使用场景有限： adoptedCallback 的使用场景相对较少，通常只在处理跨文档的元素移动时才会用到。
- 注意文档上下文： 在adoptedCallback中，你需要注意元素现在所在的文档上下文，并相应地更新对外部资源的引用。

示例：

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Adopted Callback Example</title>
</head>
<body>
    <my-element></my-element>
    <button id="moveButton">Move to New Document</button>

    <script>
    class MyElement extends HTMLElement {
        constructor() {
            super();
            this.shadow = this.attachShadow({ mode: 'open' });
        }

        connectedCallback() {
            this.shadow.innerHTML = `<p>Hello from my-element!</p>`;
        }

        adoptedCallback(oldDocument, newDocument) {
            console.log('Element adopted to a new document!');
            console.log('Old document:', oldDocument);
            console.log('New document:', newDocument);
        }
    }

    customElements.define('my-element', MyElement);

    document.getElementById('moveButton').addEventListener('click', () => {
        const newDoc = document.implementation.createHTMLDocument('New Document');
        const element = document.querySelector('my-element');
        newDoc.body.appendChild(element); // 移动元素到新文档
        console.log(newDoc); // 控制台查看新文档内容
        //document.body.appendChild(newDoc.documentElement); // 如果要显示新文档，可以将新文档添加到当前文档
    });
    </script>
</body>
</html>

在这个例子中，adoptedCallback会在 <my-element> 被移动到新的文档时执行。它会输出一条消息到控制台，并显示旧文档和新文档的信息。注意：这里我们使用 document.implementation.createHTMLDocument 创建了一个新的文档，并使用 appendChild 将元素移动到新文档中。

生命周期回调函数的执行顺序

了解生命周期回调函数的执行顺序对于理解自定义元素的行为至关重要。一般来说，执行顺序如下：

constructor：元素被创建时调用。
connectedCallback：元素被添加到DOM时调用。
attributeChangedCallback：当监听的属性发生变化时调用。
adoptedCallback：元素被移动到新的文档时调用。
disconnectedCallback：元素从DOM中移除时调用。

示例：更复杂的场景

让我们考虑一个更复杂的场景，其中自定义元素包含子元素，并且属性的变化会影响子元素的渲染。

<!DOCTYPE html>
<html>
<head>
    <title>Complex Custom Element Example</title>
</head>
<body>
    <my-container title="Initial Title"></my-container>

    <script>
    class MyContainer extends HTMLElement {
        constructor() {
            super();
            this.shadow = this.attachShadow({ mode: 'open' });
        }

        static get observedAttributes() {
            return ['title'];
        }

        attributeChangedCallback(name, oldValue, newValue) {
            if (name === 'title') {
                this.render();
            }
        }

        connectedCallback() {
            this.render();
        }

        render() {
            const title = this.getAttribute('title') || 'Default Title';
            this.shadow.innerHTML = `
                <h1>${title}</h1>
                <my-item message="Hello from MyItem"></my-item>
            `;
        }
    }

    customElements.define('my-container', MyContainer);

    class MyItem extends HTMLElement {
        constructor() {
            super();
            this.shadow = this.attachShadow({ mode: 'open' });
        }

        connectedCallback() {
            const message = this.getAttribute('message') || 'Default Message';
            this.shadow.innerHTML = `<p>${message}</p>`;
        }
    }

    customElements.define('my-item', MyItem);

    setTimeout(() => {
        const container = document.querySelector('my-container');
        container.setAttribute('title', 'New Title');
    }, 3000);
    </script>
</body>
</html>

在这个例子中，MyContainer 包含一个 MyItem 子元素。 MyContainer 的 title 属性的变化会触发 attributeChangedCallback，进而调用 render 方法重新渲染整个容器，包括 MyItem。

表格总结生命周期回调函数

回调函数	执行时机	参数	主要用途	常见陷阱
`connectedCallback`	元素被添加到 DOM 时	无	初始化元素，添加事件监听器，渲染初始内容等。	不要假设元素已完全渲染，避免重复初始化，影藏 DOM 的 ready 状态。
`disconnectedCallback`	元素从 DOM 中移除时	无	清理资源，移除事件监听器，取消未完成的异步操作等。	不要依赖于元素的状态，避免内存泄漏，不要创建新的 DOM 操作。
`attributeChangedCallback`	监听的属性发生变化时	`attributeName`, `oldValue`, `newValue`	响应属性变化，更新内部状态，重新渲染内容等。	必须声明监听属性，避免无限循环，注意类型转换，性能问题。
`adoptedCallback`	元素被移动到新的文档时	`oldDocument`, `newDocument`	处理元素被移动到新文档后的情况，更新对外部资源的引用，重新初始化状态等。	使用场景有限，注意文档上下文。

其他考量因素

Shadow DOM: 如果你的自定义元素使用了 Shadow DOM，生命周期回调函数会作用于宿主元素（host element）。你需要通过 this.shadowRoot 来访问 Shadow DOM 中的元素。
升级时机： 当自定义元素在解析 HTML 时遇到，但其定义尚未注册，这称为“升级（upgrade）”。浏览器会等待元素的定义被注册，然后执行 connectedCallback。
错误处理： 在生命周期回调函数中进行错误处理非常重要，以防止错误导致整个页面崩溃。使用 try...catch 语句来捕获异常，并采取适当的措施。

总结：掌握生命周期，驾驭自定义元素

深刻理解Custom Elements的生命周期回调函数，能让你更加灵活和高效地控制自定义元素的行为。通过合理地利用这些回调函数，你可以创建出功能强大、性能优良的Web组件。记住，谨慎处理初始化和清理操作，避免常见的陷阱，才能编写出健壮的自定义元素。

HTML Custom Elements：生命周期回调函数深度剖析

发表回复 取消回复

发表回复取消回复