从一个简单的组件化封装写优化DOM操作

2018-06-24 00:15:59来源：未知阅读 ()

/*
*缺点
* 1. 还需要我们自己手工维护dom状态，以数据的思想去思考
*2. 数据改变后，还需要我们自己手动改变dom
*3.
* */
class LikeButton{
    constructor(){
        //定义一个状态
        this.state={
            liked:false
        }
    }
    createDOMFromString(domStr){
        let div=document.createElement('div');
        div.innerHTML=domStr;
        return div.children[0];
    }
    //如果原来有，现在没有，添加这个属性
    //如果原来有，现在有，覆盖这个属性
    setState(newState){
        this.state=Object.assign(this.state,newState);
        //先缓存老的dom对象
        let oldEle=this.ele;
        //生成一个新的dom对象
        let newEle=this.render();
        //替换老的dom对象
        oldEle.parentNode.replaceChild(newEle,oldEle);
    }
    //render返回值决定了此组件长什么样子
    // dom字符串永远只有一个顶级元素
    //因为我们dom字符串是又state决定的，所以只需要在修改了state之后从新reader一下
    //事件处理函数需要绑定this为组件的实例
    handleClick(event){
        //修改状态
       this.setState({liked:!this.state.liked})

    }
    render(){
        this.ele=this.createDOMFromString(
            `
            <button id="like-button">
                <span id="like-text" style="color:red">${this.state.liked?'取消':'点赞'}</span>
             </button>
            `
        );
        this.ele.addEventListener('click',this.handleClick.bind(this));
        return this.ele;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="wrapper">

</div>
</body>
<script src="LikeButton.js"></script>
<script>
    let likeButton=new LikeButton();
    let wrapper=document.querySelector(".wrapper");
    wrapper.appendChild(likeButton.render())
</script>
</html>