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