export class Module {
data = { count: 1 }
element= null
container = null
constructor(container){
this.container = container
this.element = this.render()
this.bindEvent()
this.mount()
}
render() {//将html + data = 一个有数据的html
return createElement(`
<div class="module1">
<h1>模块1</h1>
<div id="count">${this.data.count}</div>
<div><button>+1</button></div>
</div>
`)
}
bindEvent() {//绑定事件
const button = this.element.querySelector('button')
button.addEventListener('click', () => {
this.data.count += 1
this.update()
})
}
mount(container) {
this.container.append(this.element)
}
update() {
const newElement = this.render()//创建新的div 重新渲染
this.element.replaceWith(newElement)//将页面中的element改变
this.element = newElement//将渲染好的div赋给this.element
this.bindEvent()
}
}
使用class组织代码
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- Chapter: 6.页面和服务器通信代码的开发 title:6.5代码优化-使用ES6+promise组织异步代...
