前端组件化

对于学react前的思考，如何简单的实现前端组件化

实现一个点赞的功能，动态插入页面并绑定事件

采用面向对象的写法，以达到组件复用的效果

看下面代码
html

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

js

/* 把字符串转换成DOM节点并返回 */
function stringToDom (str) {
    const ele = document.createElement('div');
    ele.innerHTML = str;
    return ele;
}
/* ZanButton */
class ZanButton {
    constructor () {
        this.state = {
            isLike: false
        }
    }
    setState (context) {
        const oldEl = this.el;
        Object.assign(this.state, context);
        // 这边的 el 相当于新建一个DOM节点对象并返回，所以不存在引用关系
        this.el = this.render();
        if (this.onStateChange) {
            this.onStateChange(oldEl, this.el);
        }
    }
    clickController () {
        this.setState({
            isLike: !this.state.isLike
        })
    }
    render () {
        this.el = stringToDom(`
            <button class="btn-text">${ this.state.isLike ? '取消' : '点赞' }</button>
        `);
        this.el.addEventListener('click', this.clickController.bind(this), false)
        return this.el;
    }
}
const wrapper = document.getElementById('wrapper');
const zanBtn1 = new ZanButton();
// 首次插入
wrapper.appendChild(zanBtn1.render())
// 动态插入
zanBtn1.onStateChange = (oldEl, newEl) => {
    wrapper.insertBefore(newEl, oldEl);
    wrapper.removeChild(oldEl);
}
复制代码

这里有一个问题，如果我们想创建多个button component的时候会出现冗余的代码，因为要不断的去给实例化的button新增 onStateChange

这是一个很简单的组件化demo