前端组件化-抽象公共组件类

优化上次的组件化小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 (
            `
                ${ this.props.bgColor }">
                    ${ this.state.isLike ? '取消' : '点赞' }
                
            `
        )
    }
}

const wrapper = document.getElementById('wrapper');
mount(new ZanButton(), wrapper);
mount(new ZanButton({
    bgColor: 'red'
}), wrapper);
复制代码

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