核心结构 - 造个标签输入组件 - [: '编程的套路 - JavaScript设计模式' |cut:tmp.cut_limit :]

<main>
  <form class="tag-wrapper">
    <div class="tag-list">
      <div class="tag">胖胖drr</div>
      <div class="tag">我佛慈悲</div>
      <div class="tag danger">辣鸡</div>
    </div>
    <div class="tag-input">
      <input type="text" autofocus autocomplete="off">
    </div>
  </form>
</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 {
  margin-top: 10em;
  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 {
  background: royalblue;
  color: #fff;
  -webkit-border-radius: 1em;-moz-border-radius: 1em;border-radius: 1em;
}

.tag.danger {
  background: tomato;
}

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

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

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

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

console.log(factory('!Yo'));