题解 | #设置标签#

简洁带注释js代码

技巧：使用set快速检查标签是否已存在、insertBefore()

var tagInput = {
    isInited: false,
    init: init,
    bindEvent: bindEvent,
    addTag: addTag,
    removeTag: removeTag
};

tagInput.init();
// set检查是否已存在
let tagSet = new Set();

function init() {
    var that = this;
    if (that.isInited) return;
    that.isInited = true;
    // 请修改这一行代码，保存class为js-input的输入框的dom元素引用
    that.input = document.querySelector('.js-input');
    that.bindEvent();
}

function bindEvent() {
    var that = this;
    var input = that.input;
    if (!input) return;
    input.addEventListener('keydown', function (event) {
        // 判断用户是否按了回车键
        var isEnter = (event.keyCode === 13);
        // 判断用户是否按了删除键（有输入内容的前提下才删除tag）
        var isDelete = (input.value.length === 0 && event.keyCode === 8);

        (isEnter || isDelete) && event.preventDefault();
        isEnter && that.addTag();
        isDelete && that.removeTag();
    });
    input.parentNode.addEventListener('click', function () {
        input.focus();
    });
}

function addTag() {
    const that = this;
    const input = that.input;
    const inputVal = input.value.trim();
    const tagInput = document.querySelector('.tag-input');
    // 清空输入框，并添加新节点
    input.value = '';
    if (inputVal.length > 0 && !tagSet.has(inputVal)) {
        const newTag = document.createElement('span');
        newTag.innerText = inputVal;
        newTag.className = 'tag';
        tagInput.insertBefore(newTag, input);
        tagSet.add(inputVal);
    }
}

function removeTag() {
    const tags = document.querySelectorAll('.tag');
    const tagInput = document.querySelector('.tag-input');
    if (tags.length === 0) {
        return;
    }
    // 删除最后一个tag，并从set中删除
    const deletedChild = tags[tags.length - 1];
    tagSet.delete(deletedChild.nodeValue);
    tagInput.removeChild(deletedChild);
}