概述
Custom Elements 是 Web Components 的一部分，可以帮助我们定义自己的 HTML 元素，并将其作为标准的 HTML 标签来使用。这为前端开发者提供了更多的自定义组件的能力，帮助我们更好地构建 CRUD 应用。
在本篇文章中，我将详细介绍如何使用 Custom Elements 来构建一个基础的 CRUD 应用，包含创建、读取、更新和删除操作。
准备工作
首先，我们需要准备一些开发工具。我使用的是 Visual Studio Code 编辑器，配合 Live Server 插件来进行开发。
为了使用 Custom Elements，我们还需要一个浏览器支持它们。目前，Chrome、Firefox 和 Safari 都已经支持了 Custom Elements，而 Edge 和 IE 则需要使用 JS Polyfills 来支持。
实现步骤
1. 定义 Custom Element
在开始之前，让我们先了解一下 Custom Elements 的语法。
// www.javascriptcn.com code example
class CustomElement extends HTMLElement {
constructor() {
super();
}
// 方法和属性
}
customElements.define('custom-element', CustomElement);我们首先定义一个 JavaScript 类，并继承了 HTMLElement 类。然后定义了一个构造函数和一些方法和属性。
最后，我们使用 customElements.define 来注册自定义元素和它的类名。这样定义之后，我们就可以在 HTML 中直接使用这个自定义元素了。
2. 创建 HTML 模板
我们需要创建一个 HTML 模板来表示 CRUD 应用中的每个部分，比如列表视图、表单视图等等。这里我使用了 <template> 标签来创建模板。
// www.javascriptcn.com code example
<template id="list-template">
<div class="list">
<!-- 列表的 HTML 元素 -->
</div>
</template>
<template id="form-template">
<div class="form">
<!-- 表单的 HTML 元素 -->
</div>
</template>3. 添加自定义元素
接下来，我们可以将模板添加到自定义元素中。在这个案例中，我们创建了两个元素 crud-list 和 crud-form。
// www.javascriptcn.com code example
class CrudList extends HTMLElement {
constructor() {
super();
// 获取模板元素
const template = document.getElementById('list-template');
// 导入模板内容
const templateContent = template.content.cloneNode(true);
// 添加模板元素
this.appendChild(templateContent);
}
// 方法和属性
}
customElements.define('crud-list', CrudList);
class CrudForm extends HTMLElement {
constructor() {
super();
// 获取模板元素
const template = document.getElementById('form-template');
// 导入模板内容
const templateContent = template.content.cloneNode(true);
// 添加模板元素
this.appendChild(templateContent);
}
// 方法和属性
}
customElements.define('crud-form', CrudForm);在构造函数中，我们获取了 HTML 模板，并通过 appendChild 方法将其添加到自定义元素中。这样一来，在 HTML 中使用这些自定义元素时，就会呈现出我们定义好的模板。
4. 设计数据结构
在设计数据结构时，我们需要考虑我们的应用需要保存哪些数据。在 CRUD 应用中，我们通常需要保存一些常规数据，比如字符串、数字、日期等等。
在这个案例中，我们将需要保存以下数据：
- 成员列表，包含每个成员的 ID、姓名、位置、雇佣时间。
- 被选中的成员。
我们使用一个数组来保存所有成员，然后使用一个变量来保存被选中的成员。
// www.javascriptcn.com code example
let members = [
{
id: 1,
name: 'Tom',
position: 'Developer',
hiredDate: '2021-01-01'
},
// ...
];
let selectedMember = null;5. 显示成员列表
在 CrudList 自定义元素中，我们需要显示成员列表。这时我们可以使用模板字符串和 innerHTML 属性来生成 HTML，并将其添加到元素中。
// www.javascriptcn.com code example
class CrudList extends HTMLElement {
constructor() {
super();
// ...
// 添加成员列表
this.innerHTML = `
<ul class="member-list">
${members.map(member => `
<li class="member-item" data-id="${member.id}">
${member.name}, ${member.position}
</li>
`).join('')}
</ul>
`;
// ...
}
// ...
}
customElements.define('crud-list', CrudList);在这个例子中，我们使用了 map 方法来遍历每个成员，并使用模板字符串来生成 HTML。最后，我们使用 join('') 将每个成员的 HTML 连接起来，然后将其添加到元素中。
6. 响应事件
现在我们需要给每个成员列表项添加点击事件。当用户在列表中选择一个成员时，我们需要在 selectedMember 变量中保存选中的成员，并向 CrudForm 元素发送一个事件，以更新表单视图。
// www.javascriptcn.com code example
class CrudList extends HTMLElement {
constructor() {
super();
// ...
// 绑定成员列表项的点击事件
this.querySelectorAll('.member-item').forEach(item => {
item.addEventListener('click', () => {
// 保存选中的成员
selectedMember = members.find(member => member.id === parseInt(item.dataset.id));
// 触发自定义事件，更新表单视图
this.dispatchEvent(new CustomEvent('memberSelected'));
});
});
// ...
}
// ...
}
customElements.define('crud-list', CrudList);在构造函数中，我们使用 querySelectorAll 找到所有列表项，然后使用 forEach 和 addEventListener 方法为每个列表项绑定点击事件。当列表项被点击时，我们需要找到此项对应的成员，然后将其保存到 selectedMember 变量中。
接着，我们使用 dispatchEvent 方法向元素发送一个 memberSelected 事件。这样我们就可以在 CrudForm 自定义元素中监听此事件，以更新视图。
// www.javascriptcn.com code example
class CrudForm extends HTMLElement {
constructor() {
super();
// ...
// 监听 memberSelected 事件，更新表单
this.addEventListener('memberSelected', () => {
if (selectedMember) {
this.nameInput.value = selectedMember.name;
this.positionInput.value = selectedMember.position;
this.dateInput.value = selectedMember.hiredDate;
} else {
this.nameInput.value = '';
this.positionInput.value = '';
this.dateInput.value = '';
}
});
// ...
}
// ...
}
customElements.define('crud-form', CrudForm);在 CrudForm 自定义元素中，我们监听 memberSelected 事件，然后根据 selectedMember 变量的值来更新表单内容。如果 selectedMember 为 null，则将表单的输入框清空。
7. 更新成员信息
当用户在表单中提交修改后，我们需要更新对应的成员数据。这时，我们可以给表单中的提交按钮添加 click 事件，并从输入框中获取数据，然后将其更新到 members 数组中。
// www.javascriptcn.com code example
class CrudForm extends HTMLElement {
constructor() {
super();
// ...
// 绑定提交按钮的点击事件
this.submitButton.addEventListener('click', event => {
event.preventDefault();
// 获取表单数据
const name = this.nameInput.value.trim();
const position = this.positionInput.value.trim();
const date = this.dateInput.value.trim();
if (!name || !position || !date) {
alert('Please fill in all fields');
return;
}
if (selectedMember) {
// 修改成员信息
const index = members.findIndex(member => member.id === selectedMember.id);
members[index].name = name;
members[index].position = position;
members[index].hiredDate = date;
// 触发自定义事件，更新列表视图
this.dispatchEvent(new CustomEvent('memberUpdated'));
} else {
// 创建新成员
const id = members.length + 1;
members.push({
id,
name,
position,
hiredDate: date
});
// 重置表单
this.nameInput.value = '';
this.positionInput.value = '';
this.dateInput.value = '';
// 触发自定义事件，更新列表视图
this.dispatchEvent(new CustomEvent('memberCreated'));
}
});
// ...
}
// ...
}
customElements.define('crud-form', CrudForm);在 CrudForm 自定义元素中，我们使用 addEventListener 方法给提交按钮添加一个 click 事件处理程序。首先，我们获取表单中每个输入框的值，然后进行一些验证。如果有必填字段未填写，则提示用户。
接着，我们根据 selectedMember 变量的值，来判断用户是要修改成员信息，还是要添加新成员。如果 selectedMember 不为空，则说明用户要修改一个已有的成员信息，我们需要在 members 数组中更新对应成员的信息，并向列表视图发送一个 memberUpdated 事件；如果 selectedMember 为空，则说明用户要添加新成员，我们需要创建一个新成员对象，将其添加到 members 数组中，重置表单，然后向列表视图发送一个 memberCreated 事件。
8. 删除成员信息
最后，我们需要给列表项添加删除操作。当用户点击删除按钮时，我们需要将该成员从 members 数组中移除。
// www.javascriptcn.com code example
class CrudList extends HTMLElement {
constructor() {
super();
// ...
// 绑定删除按钮的点击事件
this.querySelectorAll('.delete-button').forEach(button => {
button.addEventListener('click', event => {
event.stopImmediatePropagation();
const id = parseInt(button.closest('.member-item').dataset.id);
members = members.filter(member => member.id !== id);
selectedMember = null;
this.dispatchEvent(new CustomEvent('memberDeleted'));
});
});
// ...
}
// ...
}
customElements.define('crud-list', CrudList);在 CrudList 自定义元素中，我们使用 querySelectorAll 找到所有的删除按钮，然后使用 forEach 和 addEventListener 为每个按钮绑定一个 click 事件处理程序。当用户点击删除按钮时，我们需要找到对应的成员 ID，然后使用 filter 方法将其从 members 数组中移除。最后，我们将 selectedMember 重置为 null，并向自定义事件 memberDeleted 发送事件，更新视图。
结语
在这篇文章里，我们深入了解了如何使用 Custom Elements 构建一个简单的 CRUD 应用，包括定义自定义元素、创建 HTML 模板、保存数据、显示列表和表单视图、响应事件、更新成员信息，以及删除成员信息等。Custom Elements 让前端开发者在构建网页应用时更加灵活和自由。希望这篇文章对您有所帮助，也欢迎在评论区分享您的经验和观点。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d67d24a941bf7134c43aad