什么是 Custom Elements？
Custom Elements 是 Web Components 规范的一部分，它允许开发者自定义 HTML 元素，并在页面上使用它们。Custom Elements 使得开发者可以创建自己的 UI 组件，而无需依赖外部库或框架。
Custom Elements 的基本结构
一个 Custom Element 由以下几部分组成：
- Element 类：定义 Custom Element 的行为和属性。可以通过继承 HTMLElement 来创建自己的 Element 类。
- 注册：将 Element 类注册为 Custom Element，使得它可以在页面上使用。
- 生命周期回调函数：在 Custom Element 的生命周期中，浏览器会调用一系列回调函数，开发者可以在这些函数中执行自己的逻辑。
下面我们将演示如何使用 Custom Elements 构建一个完整的 UI 框架，包括按钮、输入框和表单组件。
按钮组件
首先，我们需要创建一个按钮组件。按钮组件需要有以下属性和行为：
- text：按钮的文本内容。
- disabled：按钮是否禁用。
- click：按钮被点击时触发的事件。
我们可以通过继承 HTMLElement 类来创建一个 Button 类：
// javascriptcn.com 代码示例
class Button extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
button {
display: inline-block;
padding: 8px 16px;
font-size: 14px;
font-weight: bold;
text-align: center;
cursor: pointer;
border: none;
border-radius: 4px;
background-color: #4CAF50;
color: #FFFFFF;
}
button[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
</style>
<button>${this.getAttribute('text')}</button>
`;
this.button = this.shadowRoot.querySelector('button');
this.button.addEventListener('click', () => {
this.dispatchEvent(new Event('click'));
});
}
static get observedAttributes() {
return ['text', 'disabled'];
}
attributeChangedCallback(name, oldValue, newValue) {
switch (name) {
case 'text':
this.button.textContent = newValue;
break;
case 'disabled':
if (newValue !== null) {
this.button.setAttribute('disabled', '');
} else {
this.button.removeAttribute('disabled');
}
break;
default:
break;
}
}
get text() {
return this.getAttribute('text');
}
set text(value) {
this.setAttribute('text', value);
}
get disabled() {
return this.hasAttribute('disabled');
}
set disabled(value) {
if (value) {
this.setAttribute('disabled', '');
} else {
this.removeAttribute('disabled');
}
}
}
customElements.define('my-button', Button);在上面的代码中，我们重写了 Button 类的 constructor 函数，使用 Shadow DOM 创建了一个包含样式和按钮元素的根元素。我们还监听了按钮的 click 事件，并在事件中触发了一个自定义的 click 事件。这个自定义事件可以让外部代码监听按钮被点击的事件。
我们还定义了 observedAttributes 函数，它返回一个数组，包含了需要监听的属性名。当这些属性发生变化时，浏览器会调用 attributeChangedCallback 函数。
最后，我们定义了 text 和 disabled 的 getter 和 setter 函数，使得外部代码可以获取和设置按钮的属性值。
在 HTML 中，我们可以像这样使用自定义按钮组件：
<my-button text="Click me" disabled></my-button>
输入框组件
接下来，我们需要创建一个输入框组件。输入框组件需要有以下属性和行为：
- value：输入框的值。
- placeholder：输入框的占位符。
- disabled：输入框是否禁用。
- change：输入框的值被改变时触发的事件。
我们可以通过继承 HTMLElement 类来创建一个 Input 类：
// javascriptcn.com 代码示例
class Input extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
input {
display: block;
width: 100%;
padding: 8px;
font-size: 14px;
border: 1px solid #CCCCCC;
border-radius: 4px;
background-color: #FFFFFF;
}
input[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
</style>
<input type="text" placeholder="${this.getAttribute('placeholder')}">
`;
this.input = this.shadowRoot.querySelector('input');
this.input.addEventListener('input', () => {
this.dispatchEvent(new Event('change'));
});
}
static get observedAttributes() {
return ['value', 'placeholder', 'disabled'];
}
attributeChangedCallback(name, oldValue, newValue) {
switch (name) {
case 'value':
this.input.value = newValue;
break;
case 'placeholder':
this.input.placeholder = newValue;
break;
case 'disabled':
if (newValue !== null) {
this.input.setAttribute('disabled', '');
} else {
this.input.removeAttribute('disabled');
}
break;
default:
break;
}
}
get value() {
return this.input.value;
}
set value(newValue) {
this.setAttribute('value', newValue);
}
get placeholder() {
return this.getAttribute('placeholder');
}
set placeholder(newValue) {
this.setAttribute('placeholder', newValue);
}
get disabled() {
return this.hasAttribute('disabled');
}
set disabled(newValue) {
if (newValue) {
this.setAttribute('disabled', '');
} else {
this.removeAttribute('disabled');
}
}
}
customElements.define('my-input', Input);在上面的代码中，我们重写了 Input 类的 constructor 函数，使用 Shadow DOM 创建了一个包含样式和输入框元素的根元素。我们还监听了输入框的 input 事件，并在事件中触发了一个自定义的 change 事件。这个自定义事件可以让外部代码监听输入框的值被改变的事件。
我们还定义了 observedAttributes 函数，它返回一个数组，包含了需要监听的属性名。当这些属性发生变化时，浏览器会调用 attributeChangedCallback 函数。
最后，我们定义了 value、placeholder 和 disabled 的 getter 和 setter 函数，使得外部代码可以获取和设置输入框的属性值。
在 HTML 中，我们可以像这样使用自定义输入框组件：
<my-input placeholder="Enter your name"></my-input>
表单组件
最后，我们需要创建一个表单组件。表单组件需要有以下属性和行为：
- values：表单的值。
- submit：表单提交时触发的事件。
- reset：表单重置时触发的事件。
我们可以通过继承 HTMLElement 类来创建一个 Form 类：
// javascriptcn.com 代码示例
class Form extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
form {
display: block;
width: 100%;
}
</style>
<form></form>
`;
this.form = this.shadowRoot.querySelector('form');
this.form.addEventListener('submit', (event) => {
event.preventDefault();
this.dispatchEvent(new Event('submit'));
});
this.form.addEventListener('reset', () => {
this.dispatchEvent(new Event('reset'));
});
}
static get observedAttributes() {
return ['values'];
}
attributeChangedCallback(name, oldValue, newValue) {
switch (name) {
case 'values':
const values = JSON.parse(newValue);
for (const key in values) {
if (this.form[key]) {
this.form[key].value = values[key];
}
}
break;
default:
break;
}
}
get values() {
const values = {};
const inputs = this.form.querySelectorAll('input');
inputs.forEach((input) => {
values[input.name] = input.value;
});
return JSON.stringify(values);
}
set values(newValue) {
this.setAttribute('values', newValue);
}
submit() {
this.form.submit();
}
reset() {
this.form.reset();
}
}
customElements.define('my-form', Form);在上面的代码中，我们重写了 Form 类的 constructor 函数，使用 Shadow DOM 创建了一个包含样式和表单元素的根元素。我们还监听了表单的 submit 和 reset 事件，并在事件中触发了自定义的 submit 和 reset 事件。这些自定义事件可以让外部代码监听表单被提交和重置的事件。
我们还定义了 observedAttributes 函数，它返回一个数组，包含了需要监听的属性名。当这些属性发生变化时，浏览器会调用 attributeChangedCallback 函数。
最后，我们定义了 values、submit 和 reset 的 getter 和 setter 函数，使得外部代码可以获取和设置表单的属性值，并调用表单的提交和重置方法。
在 HTML 中，我们可以像这样使用自定义表单组件：
<my-form> <my-input name="name" placeholder="Enter your name"></my-input> <my-input name="email" placeholder="Enter your email"></my-input> <my-button text="Submit" type="submit"></my-button> <my-button text="Reset" type="reset"></my-button> </my-form>
总结
使用 Custom Elements 可以方便地创建自定义的 UI 组件，而无需依赖外部库或框架。在本文中，我们演示了如何使用 Custom Elements 构建一个完整的 UI 框架，包括按钮、输入框和表单组件。这些组件可以在页面上使用，并提供了丰富的属性和事件，使得开发者可以灵活地定制和使用它们。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657a53d5d2f5e1655d497a10