js仿微信公众平台打标签功能

当我们想对一堆数据进行分类时，最常见的方法就是给它们打上标签。仿微信公众平台打标签功能就是实现这个功能的一个应用。

本攻略将基于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技术站