const model={
const data:{数据},
create:{},
delete:{},
updata(data):{
object.assign(新数据,旧数据)//用新数据替换旧数据
eventBus.trigger('新数据')//eventBus触发"新数据信息",通知view刷新页面
},
getdata:{数据a}
}
const v={
el:要刷新的元素
html:`这里是HTML或者其他需要添加进去的元素`,
init(container)
v.el=$(conrainer)
},
render(n){刷新页面}
}
const c = {
init(container) {
v.init()//初始化View
v.render()//第一次渲染页面
c.autoBindEvents()//自动的事件绑定
eventBus.on('m:update',()=>{v.render()}//当enentsBus触发'm:update'是View刷新
},
events: {事件 }, //事件以哈希表的方式记录存储
add() {+具体实现},
minus() {-具体实现},
mul() {*具体实现},
div() {/具体实现},
autoBindEvents() {自动绑定事件}
}
像一个触发器的概念
一个开 EventBus.on
一个关 EventBus.off
一个监听 EventBus.trrger
利用继承,在需要知道是否被触发,触发了要做什么,是一个可以全局都用的一个方式,可以重写覆盖相关事件处理
events: {
'click #add1' : 'add',
'click #minus1' : 'minus',
'click #mul2' : 'mul',
'click #divide2' : 'div'
},
add() {
m.update( data: {n: m.data.n +1})
},
minus() {
m.update( data: {n: m.data.n -1})
},
mul() {
m.update( data: {n: m.data.n *2})
},
div() {
m.update( data: {n: m.data.n /2})
}
1,方便代码维护,升级,互不干扰
2,更好合作
3,要注意命名,在导入的时候,不要重复而冲突
4.’.mjs.js’会比较好,
网速不可控在加载前的用户体验感的优化
1,加一个动画,加载完毕用JS删掉它
加一个骨架
加占位内容
2,在服务器端渲染计数。SSR