在现代 Web 开发中，组件化已经成为了一种主流的开发方式。然而，如何创建高维护性的 Web 组件，一直是前端开发者们需要面对的难题。本文将介绍如何利用 Custom Elements 来创建高维护性的 Web 组件，并提供一些技巧和示例代码。
什么是 Custom Elements？
Custom Elements 是 Web Components 规范中的一部分，它允许开发者自定义 HTML 元素，并且能够像原生 HTML 元素一样被使用和扩展。Custom Elements 的设计思想是将 Web 组件的逻辑和样式封装在一个自定义元素里，这样可以实现更好的可维护性和可扩展性。
如何创建 Custom Elements？
要创建一个 Custom Element，需要使用 window.customElements.define() 方法来定义一个新的自定义元素，如下所示：
// www.javascriptcn.com code example
class MyElement extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
// 在元素被插入到 DOM 中时调用
}
disconnectedCallback() {
// 在元素从 DOM 中移除时调用
}
static get observedAttributes() {
return ['attribute1', 'attribute2'];
}
attributeChangedCallback(name, oldValue, newValue) {
// 在元素的属性被添加、移除、更新或替换时调用
}
}
window.customElements.define('my-element', MyElement);在上面的示例中，我们定义了一个名为 MyElement 的 Custom Element，并将其注册为 my-element 自定义元素。MyElement 继承自 HTMLElement，并且实现了一些生命周期方法，如 connectedCallback、disconnectedCallback 和 attributeChangedCallback 等。
如何使用 Custom Elements？
使用 Custom Elements 非常简单，只需要像使用原生 HTML 元素一样使用即可。例如，我们可以在 HTML 中使用 my-element 元素，如下所示：
<my-element attribute1="value1" attribute2="value2"></my-element>
在上面的示例中，我们创建了一个 my-element 元素，并设置了两个属性：attribute1 和 attribute2。
利用 Custom Elements 创建高维护性的 Web 组件
利用 Custom Elements 创建高维护性的 Web 组件，需要遵循以下几个原则：
1. 将组件的逻辑和样式封装在 Custom Element 内部
将组件的逻辑和样式封装在 Custom Element 内部，可以避免组件的逻辑和样式被外部的 CSS 或 JavaScript 影响，从而实现更好的可维护性和可扩展性。例如，我们可以在 Custom Element 内部定义样式，并使用 Shadow DOM 将样式封装在 Custom Element 内部，如下所示：
// www.javascriptcn.com code example
class MyElement extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
const style = document.createElement('style');
style.textContent = `
/* Custom Element 样式 */
`;
shadowRoot.appendChild(style);
}
connectedCallback() {
// 在元素被插入到 DOM 中时调用
}
disconnectedCallback() {
// 在元素从 DOM 中移除时调用
}
static get observedAttributes() {
return ['attribute1', 'attribute2'];
}
attributeChangedCallback(name, oldValue, newValue) {
// 在元素的属性被添加、移除、更新或替换时调用
}
}
window.customElements.define('my-element', MyElement);在上面的示例中，我们在 Custom Element 内部使用 Shadow DOM 将样式封装在 Custom Element 内部，并且使用 attachShadow() 方法将 Shadow DOM 添加到 Custom Element 中。
2. 提供清晰的 API 接口
为了提高组件的可维护性和可扩展性，需要提供清晰的 API 接口，让使用者能够方便地使用组件。例如，我们可以在 Custom Element 内部定义一些方法和属性，以便使用者可以方便地控制组件的行为，如下所示：
// www.javascriptcn.com code example
class MyElement extends HTMLElement {
constructor() {
super();
// ...
this._value = 0;
}
get value() {
return this._value;
}
set value(newValue) {
this._value = newValue;
// 更新组件的状态
}
increase() {
this._value++;
// 更新组件的状态
}
decrease() {
this._value--;
// 更新组件的状态
}
// ...
}
window.customElements.define('my-element', MyElement);在上面的示例中，我们在 Custom Element 内部定义了 value 属性和 increase()、decrease() 方法，以便使用者可以方便地控制组件的行为。
3. 保持组件的独立性
为了保持组件的独立性，需要避免组件之间的耦合。例如，我们可以在 Custom Element 内部定义一些事件，以便使用者可以监听组件的状态变化，而不需要直接操作组件的 DOM 结构，如下所示：
// www.javascriptcn.com code example
class MyElement extends HTMLElement {
constructor() {
super();
// ...
this.addEventListener('valueChange', event => {
// 处理组件状态变化的逻辑
});
}
// ...
_updateValue(newValue) {
this._value = newValue;
this.dispatchEvent(new CustomEvent('valueChange', { detail: { value: this._value } }));
}
}
window.customElements.define('my-element', MyElement);在上面的示例中，我们在 Custom Element 内部定义了 valueChange 事件，以便使用者可以监听组件的状态变化，并且在状态变化时触发该事件。
示例代码
下面是一个利用 Custom Elements 创建高维护性的 Web 组件的示例代码：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Element 示例</title>
</head>
<body>
<my-element></my-element>
<script>
class MyElement extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
const style = document.createElement('style');
style.textContent = `
:host {
display: block;
border: 1px solid #ccc;
padding: 10px;
font-size: 16px;
font-weight: bold;
}
button {
margin-right: 10px;
}
`;
const div = document.createElement('div');
div.textContent = '0';
const increaseButton = document.createElement('button');
increaseButton.textContent = '+';
increaseButton.addEventListener('click', () => {
this._updateValue(this._value + 1);
});
const decreaseButton = document.createElement('button');
decreaseButton.textContent = '-';
decreaseButton.addEventListener('click', () => {
this._updateValue(this._value - 1);
});
shadowRoot.appendChild(style);
shadowRoot.appendChild(div);
shadowRoot.appendChild(increaseButton);
shadowRoot.appendChild(decreaseButton);
this._value = 0;
}
get value() {
return this._value;
}
set value(newValue) {
this._updateValue(newValue);
}
increase() {
this._updateValue(this._value + 1);
}
decrease() {
this._updateValue(this._value - 1);
}
_updateValue(newValue) {
this._value = newValue;
this.shadowRoot.querySelector('div').textContent = this._value;
this.dispatchEvent(new CustomEvent('valueChange', { detail: { value: this._value } }));
}
}
window.customElements.define('my-element', MyElement);
const myElement = document.querySelector('my-element');
myElement.addEventListener('valueChange', event => {
console.log(event.detail.value);
});
</script>
</body>
</html>在上面的示例代码中，我们创建了一个名为 MyElement 的 Custom Element，并将其注册为 my-element 自定义元素。MyElement 实现了一个简单的计数器，包含一个数字和两个按钮，使用者可以通过点击按钮来增加或减少数字。同时，MyElement 也提供了 value 属性和 increase()、decrease() 方法，以便使用者可以方便地控制组件的行为。当数字发生变化时，MyElement 会触发 valueChange 事件，以便使用者可以监听组件的状态变化。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d99b1da941bf713414b6f3