/*
*缺点
* 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>
