前端組件化

對於學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