优化上次的组件化小demo

上次的组件化demo只是为了简单的实现前端组件化的思想，这次我们稍微优化一下抽离公共类

下面代码

html

<div id="wrapper"></div>
复制代码

js

/* DOM字符串转DOM节点 */
const createStringToDom = str => {const ele = document.createElement('div');ele.innerHTML = str;return ele;
}/* Mount */
const mount = (component, wrapper) => {wrapper.appendChild(component._renderDom());component.changeState = (oldEl, newEl) => {wrapper.insertBefore(newEl, oldEl);wrapper.removeChild(oldEl);}
}/* Components */
class Components {constructor (props = {}) {this.props = props;}setState (context) {const oldEl = this.el;Object.assign(this.state, context)this._renderDom();if (this.changeState) {this.changeState(oldEl, this.el)}}_renderDom () {this.el = createStringToDom(this.render());this.el.addEventListener('click', this.clickEvent.bind(this), false);return this.el;}
}/* ZanButton */
class ZanButton extends Components {constructor (props) {super(props);this.state = {isLike: false}}clickEvent () {this.setState({isLike: !this.state.isLike})}render () {return (`<button style="background-color: ${ this.props.bgColor }">${ this.state.isLike ? '取消' : '点赞' }</button>`)}
}const wrapper = document.getElementById('wrapper');
mount(new ZanButton(), wrapper);
mount(new ZanButton({bgColor: 'red'
}), wrapper);
复制代码

通过抽离公共类继续拆分代码，使得组件复用更简单容易，DOM操作也是自动完成的无需我们的介入，不过这里还有一个问题就是不断的删除，插入DOM节点会引起页面的重排，加大开销，这个问题通过 Virtual DOM 可以解决。