浅谈MVC

MVC（Model-view-controller）是一种架构设计模式

M-模型model：与数据有关的就放在M里。

const m = { 
data: {},//数据，数据的四个属性
create() {},//增 
delete() {},//删 
update(data) {},//改 
get() {}//查 }

V-视图view:与视图相关的放在V里

const v = {
            el: null, 
            html: <div></div>, 
            init(container){      //初始化
               v.el = $(container) 
               }, 
            render(n) {} }

C-控制器controller：除了M和V的内容，其他的放在C里面

const c = { 
        init(container) {}, 
        events: {}, 
        add() {}, 
        autoBindEvents() {} }

eventBus 的作用主要是用来实现对象间的通信

• on 用于监听对象
• trigger 用于触发对象
• off 用于取消监听对象 可以用eventBus在某一处触发对象trigger，比如在相关数据model里被点击触发事件，这时在controller中eventBus.on()监听触发的事件

const m={
    update(data){
    //将m.localstorage里的data替换成新的data
    object.assign(m.data,data)  
    //触发事件
     eventBus.trigger('m:updated')
  }
}
const n(){
eventBus.on('m:updated',()=>{更新M里的数据内容})
}

表驱动编程

表驱动编程就是通过一种数据结构哈希表来优化代码，是一种很重要的编程思想，它可以将大量重复的代码进行剥离，从而达到模块化的处理。

function translate(term) {
    if (term === '1') {
        return '一'
    } else if (term === '2') {
        return '二'
    } else if (term === '3') {
        return '三'
    } else {
        return '？？？'  
    }
}

// 如果想添加一个新的名词翻译，需要再添加一个if-else逻辑，例如：
function translate(term) {
    if (term === '1') {
        return '一'
    } else if (term === '2') {
        return '二'
    } else if (term === '3') {
        return '三'
    } else if (term === '4') {   
        // 此处添加了一个新的名词翻译
        return '四'
    } else {
        return '？？？'  
    }
}

若是用哈希表

function translate(term) {
    let terms = {
        '1': '一',
        '2': '二',
        '3': '三'
    }
    return terms[term];
}

// 如果想添加一个新的名词翻译，只需要在terms中添加一个新的表项，不需要修改整个逻辑
function translate(term) {
    let terms = {
        '1': '一',
        '2': '二',
        '3': '三'
        '4': '四'   // 添加一个新的名词翻译
    }
    return terms[term];
}

如何理解模块化的

个人见解，模块化的好处是将css,js 分成一块一块的，不同的功能或每一个相关模块写到一起，这样各个模块共同写到中间层再引入可以让代码之间互不干预，便于今后的维护。