浅谈MVC

浅谈MVC

MVC是什么？

MVC (Model-View-Controller) 是一种软件设计模式.它强调分离软件的业务逻辑和显示. 这种“分离”提供了更好的分工和改进的维护. 一些其他的模式也是基于MVC来设计的, 像 MVVM (Model-View-Viewmodel), MVP (Model-View-Presenter), 和 MVW (Model-View-Whatever).

对MVC软件设计模式的三个部分可以被描述如下：

1. Model: 模型持有所有的数据、状态和程序逻辑.
2. View: 负责界面的布局和显示.
3. Controller: 负责模型和界面之间的交互.

m（nodel数据模型）负责操作所有数据

//m model 负责操作数据的
const m = {
    data: {
        n: parseInt(localStorage.getItem('n'))
    },
    create() { },
    delete() { },
    update(data) {
        Object.assign(m.data, data)
        eventBus.trigger('m:update')
        localStorage.setItem('n', m.data.n)
    },
    get() { }
}

v（view视图）负责界面的布局和显示.

//v view 负责所有ui界面
const v = {
    el: null,
    html: `
    <div>
    <div class="output">
        <span id="number">{{n}}</span>
    </div>
    <div class="count">
        <button id="puls">+1</button>
        <button id="reduce">-1</button>
        <button id="ride">*2</button>
        <button id="except">/2</button>
    </div>
    </div>
    `,
    init(selector) {
        v.el = $(selector)
    },
    reader(n) {
        if (v.el.children().length !== 0) {
            v.el.empty()
        }
        $(v.html.replace('{{n}}', parseInt(n) ||)).appendTo(v.el)
    }
}

C（Controller 控制器） 负责模型和界面之间的交互.

/c 控制器 负责模型和界面之间的交互
const c = {
    init(selector) {
        v.init(selector)
        v.reader(m.data.n)
        c.addEventListeners()
        eventBus.on('m:update', () => {
            v.reader(m.data.n)
        })
    },
    events: {
        "click #puls": 'puls',
        "click #reduce": 'reduce',
        "click #ride": 'ride',
        "click #except": 'except'
    },
    puls(e) {

        m.update({ n: m.data.n + 1 })
    },
    reduce() {

        m.update({ n: m.data.n - 1 })

    },
    ride() {

        m.update({ n: m.data.n * 2 })

    },
    except() {

        m.update({ n: m.data.n / 2 })
    },
    addEventListeners() {
        for (let key in c.events) {
            const fn = c[c.events[key]]
            const spanIndex = key.indexOf(' ')
            const event = key.slice(0, spanIndex)
            const node = key.slice(spanIndex + 1)
            v.el.on(event, node, fn)
        }
    }
}

eventBusAPI

eventBustAPI
on(event,fn)//注册事件和处理函数
trigger(event)//触发事件
off(event,fn)//注销事件
//创建eventBus对象
const eventBus = $(window)
//注册事件和处理函数
eventBus.on("m:pudate",()=>{
    console.log(666)
})
//触发事件
eventBus.trigger("m:pudate")
//注销事件
eventBus.off("m:pudate")

表驱动编程

• 什么是表驱动编程

  表驱动法，又称之为表驱动、表驱动方法。 “表”是几乎所有数据结构课本都要讨论的非常有用的数据结构。表驱动方法是一种使你可以在表中查找信息，而不必用很多的逻辑语句（if else）来把它们找出来的方法。事实上，任何信息都可以通过表来挑选。在简单的情况下，逻辑语句往往更简单而且更直接。但随着逻辑链的复杂，表就变得越来越富有吸引力了。

• 在JS中，表就是指的哈希表结构，使用表驱动编程，能使重复冗余的代码变的稳定简洁。

代码示例

比如我们给多个元素添加click事件，正常的写法

<div id="parent">
    <section id="app1"></section>
    <section id="app2"></section>
    <section id="app3"></section>
    <section id="app4"></section>
</div>
<script>
    const app1 = document.querySelector('#app1')
    const app2 = document.querySelector('#app2')
    const app3 = document.querySelector('#app3')
    const app4 = document.querySelector('#app4')
    app1.addEventListener("click",()=>{
        console.log(1)
    })
    app2.addEventListener("click",()=>{
        console.log(2)
    })
    app3.addEventListener("click",()=>{
        console.log(3)
    })
    app4.addEventListener("click",()=>{
        console.log(4)
})
</script>

从上面的代码就可以看见，仅仅为了表达这个简单的意思，代码重复和冗余竟然这么严重。表驱动法就是为了解决上面的问题

用表驱动方法

修改上面的例子

const eventList = ['#app1','#app2','#app3','#app4']
for(let i = 0; i< eventList.length;i++){
   const node =  document.querySelector(eventList[i])
   node.addEventListener(	'click',()=>{
           console.log(i+1)
   })
}

同样的意思，却只用简洁的几行代码就搞定了，这就是表驱动编程的优点。

总结

事不过三

• 同样的代码写三遍，就应该抽成一个函数。
• 同样的属性写三遍，就应该做成共有属性（原型或类）
• 同样的原型写三遍，就应该用继承

模块化

定义： 模块化是一种处理复杂系统分解为更好的可管理模块的方式。

模块化就是一个项目中不同的功能抽离出来划分模块，不同的模块实现不同的功能，模块之间互不影响。需要哪个模块就引入哪个模块，如果哪个功能要要修改，直接在对应的模块修改就好了，不需要关注其他模块。这样能够提升开发效率，方便修改和维护。