`,init(container){v.el=$(container)},render(n){if(v.el.children.length!==0)v.el.empty()$(v.html.replace('{{n}}',n)).appendTo(v.el)}}//其他都cconstc={init(container){v.init(container)v.render(m.data.n)//view=render(data)c.autoBindEvents()eventBus.on('m:updated',()=>{console.log('here')v.render(m.data.n)})},事件：{'click#add1':'add','click#minus1':'minus','click#mul2':'mul','click#divide2':'div',}，添加（）{m.update({n:m.data.n+1})},minus(){m.update({n:m.data.n-1})},mul(){m.update({n:m.data.n*2})},div(){m.update({n:m.data.n/2})},autoBindEvents(){for(letkeyinc.events){constvalue=c[c.events[key]]constspaceIndex=key.indexOf('')constpart1=key.slice(0,spaceIndex)constpart2=key.slice(spaceIndex+1)v.el.on(part1,part2,value)}}}exportdefaultc2.EventBus2.1什么是EventBus？EventBus主要用于对象之间的通信。比如上面的例子，Model数据模型和View视图模型并不知道彼此的存在，但是需要进行通信，所以使用了EventBus。总结：使用eventBus可以满足最少的知识原则上m和v不知道对方的底细，但是可以互相调用对方的函数2.2EventBus有哪些API？eventBus提供了on,off,trigger等API，on用于监听事件，trigger用于触发事件如上面在MVC模型中，当M数据模型更新时，triggerconst会触发一个事件m={....update(data){Object.assign(m.data,data)eventBus.trigger('m:updated')//通知视图层我更新了数据，视图应该启动workinglocalStorage.setItem('n',m.data.n)},....}然后在controller中，controller会使用on来监听事件，然后通知viewmodel重新渲染页面constc={init(container){v.init(container)v.render(m.data.n)//view=render(data)c.autoBindEvents()eventBus.on('m:updated',()=>{//控制器将使用on来监听事件，//然后通知视图模型重新渲染页面console.log('here')v.render(m.data.n)})},...}3.表驱动编程当我们需要判断3种以上的情况并做相应的事情时，往往需要写很多Ifelse，这样的代码可读性不是很好。为了增强代码的可读性，我们表驱动编程可以将If条件判断用到的值存储到一个哈希表中，然后从表中获取值实例：在上面的例子中，我需要判断点击的是加减乘除四个按钮中的哪个按钮，然后修改输出的值。按照传统的方式，我们会分别给四个按钮绑定点击事件，然后分别写四个回调函数修改值$button1.on('click',()=>{letn=parseInt($number.text())n+=1localStorage.setItem('n',n)$number.text(n)})$button2.on('click',()=>{让n=parseInt($number.text())n-=1localStorage.setItem('n',n)$number.text(n)})$button3.on('click',()=>{让n=parseInt($number.text())n=n*2localStorage.setItem('n',n)$number.text(n)})$button4.on('click',()=>{让n=parseInt($number.text())n=n/2localStorage.setItem('n',n)$number.text(n)})--------使用事件委托后--------constc={init(container){v.init(容器)v.render(m.data.n)c.BindEvents()}BindEvents(){v.el.on('click','#add1',()=>{m.data.n+=1v.render(m.data.n)})v.el.on('click','#minus1',()=>{m.data.n-=1v.render(m.data.n)})v.el.on('click','#mul2',()=>{m.data.n*=2v.render(m.data.n)})v.el.on('click','#divide2',()=>{m.data.n/=2v.render(m.data.n)})}}但是这样太麻烦了，更新措施：1.绑定加减法为乘除法按钮的父元素，只使用一个事件监听器2.使用哈希表保存按钮和按钮对应的操作constc={events:{'click#add1':'add','click#minus1':'minus','click#mul2':'mul','click#divide2':'div',},add(){m.update({n:m.data.n+1})},minus(){m.update({n:m.data.n-1})},mul(){m.update({n:m.data.n*2})},div(){m.update({n:m.data.n/2})},autoBindEvents(){for(letkeyinc.events){constvalue=c[c.events[key]]constspaceIndex=key.indexOf('')constpart1=key.slice(0,spaceIndex)constpart2=key.slice(spaceIndex+1)v.el.on(part1,part2,value)}}4.模块化模块化就是把一大段代码中相对独立的代码提取成短小精悍的模块。各模块相对独立，便于日后维护和修改。ES6的语法引入了Import和export用于实现模块化。当我们在app1.js中封装controller模型，然后exportcontroller:exportdefaultc//defaultexportexport{c}//另一种导出方式。记得在我们要使用控制器的Main.js中添加花括号：importxfrom'./app1.js'等同于import{defaultasx}from'./app1.js'x.init('#app1')更多关于重命名导出的例子：//insidemodule.mjsexport{function1,function2};//insidemain.mjsimport{function1asnewFunctionName,function2asanotherNewFunctionName}from'/modules/module.mjs';