浅析 MVC

九月Acker
245 阅读2分钟

一、MVC的三个对象

MVC 模式代表 Model-View-Controller（模型-视图-控制器） 模式。这种模式用于应用程序的分层开发。

M：Model数据管理，主要负责和服务器进行交互。将请求到的数据传给Controller。

V：View视图,负责所有UI界面，HTML 渲染等。

C：Controller 负责监听并处理View 的事件，更新和调用 Model；也负责监听 Model的变化（Model从服务器获得数据），并更新 View。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.on（）监听事件

EventBus.trigger（）触发事件

EventBus.off（）取消事件

例如：当一个事件执行，eventBus 触发 m:updated

   eventBus.trigger('m:updated')

监听 m:updated，当 m:updated 触发时，执行事件

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

三、表驱动编程

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

如下列代码简化前：

$('#add').on('click', ()=>{
number += 1
$number.text(number)
localStorage.setItem('number', number)
})
$('#minus').on('click', ()=>{
number -= 1
$number.text(number)
localStorage.setItem('number', number)
})
$('#mult).on('click', ()=>{
number *= 2
$number.text(number)
localStorage.setItem('number', number)
})
$('#divide).on('click', ()=>{
number /= 2
$number.text(number)
localStorage.setItem('number', number)
})

简化后

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})
  },

四、对于模块化的理解

将一个复杂的程序依据一定的规则（规范）封装成几个块（文件）并进行组合。模块的内部数据的实现是私有的，只是向外部暴露一些接口（方法）与外部其他模块通信，这就是模块化。

模块化可以降低代码耦合度，减少重复代码，提高代码重用性，并且在项目结构上更加清晰，便于维护。

模块可以理解为这个世界上有不同的行业，也可以理解为一个家里也有不同的分工，所以分模块可大可小，可以在大的模块里去区分子模块。总之模块是为了解决业务的耦合。就像分行业也是为了解决社会的耦合，但模块之间并不会区分的很彻底，就像各行各业总会有所关联，所以这也需要程序设计者们把握好度了。

avatar
文章
阅读
粉丝