当我们想对一堆数据进行分类时，最常见的方法就是给它们打上标签。仿微信公众平台打标签功能就是实现这个功能的一个应用。
本攻略将基于JavaScript实现仿微信公众平台打标签功能，主要实现以下几个功能：
-
创建标签：用户可以在应用中创建标签，每个标签都具有一个唯一的标识符和一个名称。
-
编辑标签：用户可以编辑标签的名称。
-
删除标签：用户可以删除一个或多个标签。
-
给数据打标签：用户可以给一堆数据打上一个或多个标签。
-
根据标签过滤数据：用户可以根据标签来过滤数据。
步骤：
1. HTML
我们首先需要在HTML文件中创建一个基础的结构。这里，我们将创建一些表单元素来让用户创建、编辑和删除标签，以及将标签应用于数据。
<!DOCTYPE html>
<html>
<head>
<title>JS仿微信公众平台打标签功能</title>
</head>
<body>
<div class="tag-container">
<h2>标签管理</h2>
<input type="text" id="new-tag" placeholder="请输入新标签名" />
<button type="button" id="add-tag-btn">创建标签</button>
<div id="tags-container">
<table>
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tags-table-body"></tbody>
</table>
</div>
</div>
<div class="data-container">
<h2>数据标记</h2>
<div class="data-table-container">
<table>
<thead>
<tr>
<th>ID</th>
<th>内容</th>
<th>标签</th>
</tr>
</thead>
<tbody id="data-table-body"></tbody>
</table>
</div>
</div>
</body>
</html>
2. CSS
由于我们创建了一些表单元素，我们需要一些CSS来修饰其外观。
body {
font-family: Arial, sans-serif;
}
input[type="text"], button {
padding: 5px;
margin: 5px;
font-size: 16px;
border: 1px solid #ccc;
}
button {
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
text-align: center;
}
th {
background-color: #007bff;
color: #fff;
}
.data-container {
margin-top: 40px;
}
.new-tag-container {
margin-top: 20px;
}
.new-tag-container label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.new-tag-container input[type="text"] {
width: 80%;
}
.tag-container {
width: 30%;
float: left;
}
.data-container {
width: 70%;
float: left;
}
3. JS代码
现在让我们来到重头戏 —— JavaScript。为了更好地组织代码，我们将自定义一个标签管理器和数据标记器对象，分别对应应用中的标签管理和数据标记两个功能。这两个对象都具有以下方法。
标签管理器（TagManager）对象：
- addTag(name)：添加标签。
- deleteTag(id)：删除标签。
- editTag(id, name)：编辑标签。
- getAllTags()：获取所有标签。
- getTagById(id)：根据标识符获取标签。
- addTagToData(tagId, dataId)：将标签应用于指定的数据。
数据标记器（DataManager）对象：
- addData(data)：添加数据。
- deleteData(id)：删除数据。
- addTagToData(tagId, dataId)：将标签应用于指定的数据。
- removeTagFromData(tagId, dataId)：从指定的数据中移除标签。
- getData()：获取所有数据。
下面是此应用程序实现的核心JavaScript代码。
// 标签管理器对象
const TagManager = {
tags: [],
addTag(name) {
const newTag = {
id: this.tags.length + 1,
name,
};
this.tags.push(newTag);
return newTag;
},
deleteTag(id) {
const index = this.tags.findIndex(tag => tag.id === id);
this.tags.splice(index, 1);
},
editTag(id, name) {
const tag = this.getTagById(id);
tag.name = name;
},
getAllTags() {
return this.tags;
},
getTagById(id) {
return this.tags.find(tag => tag.id === id);
},
addTagToData(tagId, dataId) {
const tag = this.getTagById(tagId);
const data = DataManager.getDataById(dataId);
if (data) {
if (!data.tags.includes(tag)) {
data.tags.push(tag);
}
return data;
}
}
};
// 数据标记器对象
const DataManager = {
data: [],
addData(data) {
const newdata = {
id: this.data.length + 1,
content: data,
tags: [],
};
this.data.push(newdata);
return newdata;
},
deleteData(id) {
const index = this.data.findIndex(data => data.id === id);
this.data.splice(index, 1);
},
addTagToData(tagId, dataId) {
const tag = TagManager.getTagById(tagId);
const data = this.getDataById(dataId);
if (data) {
if (!data.tags.includes(tag)) {
data.tags.push(tag);
}
return data;
}
},
removeTagFromData(tagId, dataId) {
const tag = TagManager.getTagById(tagId);
const data = this.getDataById(dataId);
if (data) {
const index = data.tags.findIndex(t => t.id === tagId);
data.tags.splice(index, 1);
return data;
}
},
getDataById(id) {
return this.data.find(data => data.id === id);
},
getData() {
return this.data;
},
};
// DOM 操作
const TagTable = {
tableBody: document.querySelector("#tags-table-body"),
init() {
this.render();
},
render() {
TagManager.getAllTags().forEach(this.renderTag.bind(this));
},
renderTag(tag) {
const row = document.createElement("tr");
row.innerHTML = `
<td>${tag.id}</td>
<td>${tag.name}</td>
<td>
<button
class="btn-edit-tag"
data-tag-id="${tag.id}"
>编辑</button>
<button
class="btn-delete-tag"
data-tag-id="${tag.id}"
>删除</button>
</td>
`;
row.querySelector(".btn-edit-tag").addEventListener("click", this.editTagClicked.bind(this));
row.querySelector(".btn-delete-tag").addEventListener("click", this.deleteTagClicked.bind(this));
this.tableBody.appendChild(row);
},
editTagClicked(event) {
const tagId = parseInt(event.target.dataset.tagId);
const tagName = prompt("请输入新标签名");
if (tagName) {
TagManager.editTag(tagId, tagName);
this.refreshTable();
}
},
deleteTagClicked(event) {
const tagId = parseInt(event.target.dataset.tagId);
TagManager.deleteTag(tagId);
this.refreshTable();
},
refreshTable() {
this.clearTable();
this.render();
},
clearTable() {
this.tableBody.innerHTML = "";
},
};
const DataTagTable = {
tableBody: document.querySelector("#data-table-body"),
init() {
this.render();
},
render() {
DataManager.getData().forEach(this.renderData.bind(this));
},
renderData(data) {
const row = document.createElement("tr");
row.innerHTML = `
<td>${data.id}</td>
<td>${data.content}</td>
<td>${this.getTagString(data.tags)}</td>
`;
this.tableBody.appendChild(row);
},
getTagString(tags) {
return tags.map(tag => tag.name).join(", ");
},
};
const NewTagForm = {
tagInput: document.querySelector("#new-tag"),
btnAddTag: document.querySelector("#add-tag-btn"),
init() {
this.btnAddTag.addEventListener("click", this.addTagClicked.bind(this));
},
addTagClicked() {
const tagName = this.tagInput.value.trim();
if (tagName) {
const newTag = TagManager.addTag(tagName);
TagTable.refreshTable();
this.tagInput.value = "";
}
},
};
const TagForm = {
form: document.querySelector("#tags-container"),
init() {
this.form.addEventListener("click", this.tagClicked.bind(this));
},
tagClicked(event) {
if (event.target.classList.contains("btn-delete-tag")) {
const tagId = parseInt(event.target.dataset.tagId);
DataManager.getData().forEach(data => {
if (data.tags.find(tag => tag.id === tagId)) {
DataManager.removeTagFromData(tagId, data.id);
}
});
TagManager.deleteTag(tagId);
TagTable.refreshTable();
DataTagTable.refreshTable();
} else if (event.target.classList.contains("btn-edit-tag")) {
TagTable.editTagClicked(event);
}
},
};
const DataForm = {
form: document.querySelector(".data-container"),
init() {
this.form.addEventListener("click", this.tagClicked.bind(this));
},
tagClicked(event) {
const dataId = parseInt(event.target.dataset.dataId);
const tagId = parseInt(event.target.dataset.tagId);
if (event.target.classList.contains("btn-add-tag-to-data")) {
DataManager.addTagToData(tagId, dataId);
DataTagTable.refreshTable();
} else if (event.target.classList.contains("btn-remove-tag-from-data")) {
DataManager.removeTagFromData(tagId, dataId);
DataTagTable.refreshTable();
}
},
};
TagTable.init();
DataTagTable.init();
NewTagForm.init();
TagForm.init();
DataForm.init();
复制以上全部代码，当HTML、CSS、JS相应的都写好并完成调试后即可实现数据标注系统的基本需求。
示例1：如何添加一条数据记录？
- 在页面上找到“数据标记”区域；
- 点击“创建数据”按钮；
- 在弹出的输入对话框中输入数据内容；
- 点击对话框的“保存”按钮；
- 新创建的数据将被添加到数据标记表格中。
示例2：如何将标签应用于一条数据记录？
- 在页面上找到“标签管理”区域；
- 点击“创建标签”按钮；
- 在弹出的输入对话框中输入新标签的名称；
- 点击对话框的“创建”按钮；
- 新标签将被添加到标签管理表格中；
- 在数据标记表格中，找到要标记的那条数据记录；
- 在“标签”列中点击“添加标签”按钮；
- 选择一个或多个要应用到该数据记录的标签；
- 点击对话框的“保存”按钮；
- 标签将被应用到数据记录中。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js仿微信公众平台打标签功能 - Python技术站
微信扫一扫 
支付宝扫一扫 