数据驱动的视图渲染 - 造个标签输入组件 - [: '编程的套路 - JavaScript设计模式' |cut:tmp.cut_limit :]

<meta charset="utf-8">
<main>
  <h2>商品标签</h2>
  <div id="a"></div>
  <h2>评价标签</h2>
  <div id="b"></div>
</main>

:root {
  font-family: sans-serif;
  color: #444;
  font-size: 15px;
}

body {
  margin: 0;
}

input, button {
  padding: .6rem;
  border: 1px solid rgba(0, 0, 0, .1);
  outline: 0;
  font-size: .8rem;
}

input:focus,
button:focus {
  outline: 2px solid #cfa8ff;
}

form label,
form input {
  display: block;
  width: 100%;
  margin: .3rem 0;
}

main {
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;
  padding: 1em;
}

[hidden] {
  display: none !important;
}

.tag-wrapper {
  padding: .4em;
  border: 2px solid royalblue;
  -webkit-box-shadow: inset 0 0 4px royalblue;
  -moz-box-shadow: inset 0 0 4px royalblue;
  box-shadow: inset 0 0 4px royalblue;
}

.tag-wrapper * {
  display: inline-block;
}

.tag-input input {
  border: 0;
  outline: 0;
}

.tag-input input,
.tag {
  padding: .5em 1em;
  font-size: 1rem;
}

.tag {
  margin-right: .2em;
  background: royalblue;
  color: #fff;
  -webkit-border-radius: 1em;-moz-border-radius: 1em;border-radius: 1em;
}

.tag.danger {
  background: tomato;
}

/*
|--------------------------------------------------------------------------
| 视图部分开始
|--------------------------------------------------------------------------
*/

class Tagger {
  /**
   * @param {string} selector
   */
  constructor (selector) {
    this.$list = [];
    this.el    = document.querySelector(selector);
    this.prepare();
    this.bindEvents();
  }

  /**
   * 绑定必要初始事件
   */
  bindEvents () {
    // 绑定表单提交事件
    this.form.addEventListener('submit', e => {
      e.preventDefault();
      let val = this.input.value;
      this.addTag(val);
      this.form.reset();
      this.render();
    });
  }

  /**
   * 渲染所有标签
   */
  render () {
    // 清空上次渲染的标签
    this.tagList.innerHTML = '';

    // 循环标签列表
    this.$list.forEach(tag => {

      // 创造标签元素
      let el = document.createElement('div');

      // 指定类名tag
      el.classList.add('tag');

      // 如果是消极标签就指定danger类
      if (tag.type == 'negative')
        el.classList.add('danger');

      // 指定标签内容
      el.innerText = tag.text;

      // 将造好的标签添加到<div class="tag-list">中
      this.tagList.appendChild(el);
    });
  }

  /**
   * 添加Tag对象
   * @param text
   */
  addTag (text) {
    this.$list.push(factory(text));
  }

  /**
   * 准备标签容器
   */
  prepare () {
    // 指定内容
    this.el.innerHTML = `
    <form class="tag-wrapper">
      <div class="tag-list"></div>
      <div class="tag-input">
        <input type="text" autofocus autocomplete="off">
      </div>
    </form>
    `;

    // 将input, form, .tag-list公用，方便后续调用
    this.input   = this.el.querySelector('input');
    this.form    = this.el.querySelector('form');
    this.tagList = this.el.querySelector('.tag-list');
  }
}


/*
-------------------
数据部分开始
------------------
*/

/**
 * 标签
 */
class Tag {
  /**
   * @param {string} text 标签文字
   * @param {string} type 标签类型
   */
  constructor (text, type) {
    this.text = text;
    this.type = type;
  }
}

/**
 * 用于生产标签实例
 * @param text
 * @return {Tag}
 */
function factory (text) {
  // 如果是消极标签
  if (text.startsWith('!')) {
    // 其类型就应该是'negative'
    type = 'negative';

    // 既然类型确定了，'!'就没有意义了，应该去掉
    text = text.substring(1);
  } else // 否则就是积极标签
    type = 'positive';

  // 返回标签实例
  return new Tag(text, type);
}

/*数据部分结束*/

new Tagger('#a');
new Tagger('#b');