console
const stringToDOM = (str)=>{
const oDiv = document.createElement('div');
oDiv.innerHTML = str;
return oDiv
}
class Component{
setState(state){
const oldEl = this.el;
this.state = state;
this.el = this._renderDOM();
if(this.onStateChange) this.onStateChange(this.el,oldEl)
}
_renderDOM(){
this.el = stringToDOM(this.render())
if(this.onClick) this.el.addEventListener('click',this.onClick.bind(this),false)
return this.el
}
}
const mount = (wrapper,component)=>{
wrapper.appendChild(component._renderDOM());
component.onStateChange = (newEl,oldEl)=>{
wrapper.insertBefore(newEl,oldEl);
wrapper.removeChild(oldEl)
}
}
class LikeBtn extends Component{
constructor(){
super()
this.state={
isLike:true
}
}
onClick(){
this.setState({
isLike:!this.state.isLike
})
}
render(){
return (`
<button class="like-btn">
<span class="like-text">
${this.state.isLike?"点赞":"取消"}
</span>
</button>
`)
}
}
mount(document.querySelector('.wrapper'),new LikeBtn())
<div class="wrapper">
</div>