Web 原生组件化方案：Web Components

沐爸muba

已于 2024-10-09 17:00:21 修改

阅读量1.3k

点赞数 29

文章标签：前端 javascript

于 2024-09-09 22:00:56 首次发布

本文链接：https://blog.csdn.net/m0_37943716/article/details/142070312

版权

你好，我是沐爸，欢迎点赞、收藏、评论和关注。

Web 组件化是一种将Web应用的UI部分拆分成可复用的独立组件的架构方法。这种方法有助于提高代码的可维护性、可重用性和可测试性。
而Web Components 标准则提供了一套原生的API，允许开发者创建可复用的自定义元素，这些元素封装了HTML、CSS和JavaScript，并且可以在任何现代浏览器中作为标准的HTML元素来使用。

Web Components 标准主要包括以下几个部分：

Custom Elements（自定义元素）：允许开发者定义自己的HTML元素。
Shadow DOM（影子DOM）：为元素提供了一个封装的DOM和样式作用域，使得元素内部的样式和行为不会影响到外部，反之亦然。
HTML Templates（HTML模板）：<template>标签允许开发者定义一段不会立即渲染的HTML内容，可以稍后通过JavaScript来实例化并插入到文档中。
Slots（插槽）：虽然不是Web Components标准的一部分，但经常与Shadow DOM一起使用，用于在父组件中指定子组件内容插入的位置。

下面通过3个示例，对 Web Components 的用法进行展示。

示例1：Hello World 组件

以下是一个简单的Web组件示例，它创建了一个自定义的<hello-world>元素，该元素在屏幕上显示“Hello, World!”：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web Components Example</title>
</head>
<body>
    <hello-world></hello-world>

    <script>
        // 自定义元素类
        class HelloWorld extends HTMLElement {
            constructor() {
                super()
                // 创建一个影子DOM
                const shadow = this.attachShadow({ mode: 'open' })

                // 定义并插入HTML模板
                shadow.innerHTML = `
                    <style>
                        p { color: blue; }
                    </style>
                    <p>Hello, World!</p>
                `
            }
        }

        // 注册自定义元素
        customElements.define('hello-world', HelloWorld)
    </script>
</body>
</html>

在这个例子中，我们首先定义了一个名为HelloWorld的类，它继承自HTMLElement。在constructor方法中，我们调用super()来调用父类的构造函数，并创建了一个影子DOM。然后，我们通过设置shadow.innerHTML来定义元素的内部结构和样式。最后，我们使用customElements.define方法来注册这个自定义元素，使其可以在HTML文档中使用。

在HTML文档中，我们通过<hello-world></hello-world>标签来使用这个自定义元素。当浏览器解析到这个标签时，它会创建一个HelloWorld类的实例，并将其插入到DOM中。由于我们使用了影子DOM，所以<hello-world>元素内部的样式和结构不会影响到外部的其他元素，也不会被外部样式所影响。

审查元素看下自定义元素长什么样：

示例2: 简单的计数器组件

以下示例创建了一个自定义元素，它显示一个计数器，用户可以通过点击按钮来增加计数。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Counter Web Component</title>  
</head>  
<body>  
    <counter-element></counter-element>  
  
    <script>  
        class CounterElement extends HTMLElement {  
            constructor() {  
                super();  
                this.count = 0;  
  
                // 创建影子DOM  
                const shadow = this.attachShadow({ mode: 'open' });  
  
                // 样式  
                shadow.innerHTML = `  
                    <style>  
                        button { margin: 5px; }  
                    </style>  
                    <p>Count: <span>${this.count}</span></p>  
                    <button οnclick="this.parentNode.host.increment()">Increment</button>  
                `;  
  
                // 获取元素引用  
                this.countDisplay = shadow.querySelector('span');  
            }  
  
            increment() {  
                this.count++;  
                this.countDisplay.textContent = this.count;  
            }  
  
            // 静态getter，允许外部访问increment方法  
            static get observedAttributes() {  
                return []; // 本例不观察属性变化  
            }  
  
            connectedCallback() {  
                // 元素被添加到DOM时执行  
                // 可以在这里添加事件监听器等  
            }  
  
            disconnectedCallback() {  
                // 元素从DOM中移除时执行  
                // 可以在这里移除事件监听器等  
            }  
        }  
  
        // 注册自定义元素  
        customElements.define('counter-element', CounterElement);  
    </script>  
</body>  
</html>

注意：在上面的示例中，我直接在按钮的onclick属性中使用了this.parentNode.host.increment()，这虽然可以工作，但通常不是最佳实践。更好的做法是使用addEventListener来添加事件监听器，并在回调函数中调用increment方法。然而，为了保持示例的简洁性，我选择了这种方式。

示例3：插槽（Slots）

下面的示例创建了一个 <custom-card> 元素，它使用slot 元素来允许用户插入自定义内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Custom Card Web Component</title>
    <style>
        /* 全局样式，不会影响组件样式 */
        .card-content {
            padding: 10px;
            border: 1px solid red;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <custom-card>
        <h2 slot="header">Card Title</h2>
        <p>This is the content of the card.</p>
    </custom-card>

    <script>
        class CustomCard extends HTMLElement {
            constructor() {
                super()

                // 创建影子DOM
                const shadow = this.attachShadow({ mode: 'open' })

                // 样式和HTML结构
                shadow.innerHTML = `
                    <style>
                        :host {
                            display: block;
                            margin: 20px;
                        }
                        .header {
                            background-color: #f0f0f0;
                            padding: 5px;
                            text-align: center;
                        }
                        .card-content {
                            padding: 20px;
                        }
                    </style>
                    <div class="header">
                        <slot name="header"></slot>
                    </div>
                    <div class="card-content">
                        <slot></slot>
                    </div>
                `
            }
        }

        // 注册自定义元素
        customElements.define('custom-card', CustomCard)
    </script>
</body>
</html>