MVC

概念

MVC是一种架构设计模式，它通过关注点分离鼓励改进应用程序组织。在过去，MVC被大量用于构建桌面和服务器端应用程序，如今Web应用程序的开发已经越来越向传统应用软件开发靠拢，Web和应用之间的界限也进一步模糊。传统编程语言中的设计模式也在慢慢地融入Web前端开发。由于前端开发的环境特性，在经典MVC模式上也引申出了诸多MV*模式，被实现到各个Javascript框架中都有多少的衍变。

MVC三个对象

M(model)

• 就是用来处理数据的

V(view)

• 就是用来渲染页面的

C(controller)

• 就来干一些杂七杂八的活儿的，比如收发请求，数据验证

代码实例

const m = {
    data: {},
    create() {增 },
    delete() { 删},
    update() {改},
    get() {查}
}

const v = {
    el: null,
    // 初始化html
    html: `代码`
    ,
    init(container) {
        v.el = $(container)
    },
    render(n) { }
}

const c = {
    init(container) {})
    }, 
    events: { 事件}, 
    add() {详细执行},
    minus() {详细执行},
    mul() {详细执行},
    div() {详细执行},
    autoBindEvents() {逻辑}
    }
}

EventBus

当一个事件执行，eventBus 触发 m:updated eventBus.trigger('m:updated')

eventBus 监听 m:updated，当 m:updated 触发时，执行一些内容

eventBus.on('m:updated',()=>{
     v.render(m.data.n)
 })

表驱动编程

• 表驱动方法编程（Table-Driven Methods）是一种编程模式,适用场景:消除代码中频繁的if else或switch case的逻辑结构代码,使代码更加直白.
• 代码

c = {
     events:{
         'click #add1':'add',
         'click #minus1':'minus',
         'click #mul2':'mul',
         'click #divide2':'div'
     },
     autoBindEvents(){
         for(let key in c.events){
             const value = c[c.events[key]]
             const spaceIndex = key.indexOf(' ')
             const part1 = key.slice(0, spaceIndex)
             const part2 = key.slice(spaceIndex + 1)
             v.el.on(part1,part2,value)
         }
     }
 }

我是如何理解模块化的

• 模块化就是把各个技能之间尽可能的细分，弱化功能之间的联系，降低他们的耦合度，提高程序的拓展性，可以把现在签后端分离也看成是一种模块化，前端不管后端是啥实现，我要的数据你给我就行，后端不管前端是怎么渲染，我要的参数你给我就行。两者没有特别紧密的联系，但开发效率和程序稳定性，拓展性都会比耦合度高的项目要好(学java的时候还在jsp里面写过java代码 汗 = =)。