## MVC MVC全名是Model View Controller mvc可以使多个视图共同一个模型，减少代码量，提高代码的复用性，三个模块互相独立，当一个模块发生改变时，不会影响其他两个模块 * model 模型，用于封装业务逻辑相关的数据和处理数据的方法 ```` const m = { data: { n: parseInt(localStorage.getItem(v.key)) || 100 }, update(data) { Object.assign(m.data, data); eventBus.trigger('m:update'); localStorage.setItem(v.key, m.data.n); } } ```` * view 视图，用于展示数据，当模型数据发生变化时，视图相应地得到刷新自己的机会 ```` const v = { el: null, key: 'num', html: `

`, render(n) { v.el.html($(v.html.replace('{{n}}', n))); } } ```` * controller 控制器，用于控制应用程序的流程，处理用户的行为，和model的数据变化 ```` const c = { init(container) { v.el = $(container); v.render(m.data.n); c.bindEvents(); eventBus.on('m:update', () => { v.render(m.data.n); }) }, eventEls: { 'click #add': 'add' }, add() { m.update({ 'n': m.data.n += 1 }) }, bindEvents: function () { for (let keys in c.eventEls) { let arr = keys.split(' '); v.el.on(arr[0], arr[1], c[c.eventEls[keys]]); } } } ```` ## EventBus eventBus主要用于对象通信，eventBus 提供了 on、off 和 trigger 等 API，on 用于监听事件，trigger 用域触发事件 * on ```` const c = { init(container) { eventBus.on('m:update', () => { }) } } ```` * trigger ```` const m = { update(data) { eventBus.trigger('m:update'); } } ```` * off ```` eventBus.off('m:update'); ```` ## 表驱动编程表驱动法是一种编程模式，从表里面查找信息而不使用逻辑语句逻辑语句 ```` if(str ==="a"){ console.log("a"); }else if{str ==="b"}{ console.log("b"); }else if{str ==="c"}{ console.log("c"); } ```` 表驱动 ```` let table = { 'a' : 'a', 'b' : 'b', 'c' : 'c' } console.log(table['a']); ```` ## 模块化模块是指职责单一的一段程序，随着前端发展的越来越强大，代码也越复杂，模块化可以使得代码方便维护，按需加载，减少加载不必要的代码，复用性高

浅析 MVC