写代码啦
浅析 MVC
回复数(0) 浏览数(38)
{{topic.upvote_count || 0}} 编辑 回复

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: `
    <div> 
        <div class="output">
            <span id="num">{{n}}</span>
        </div>
        <div class="actions">
            <button id="reduce">-1</button>
            <button id="add">+1</button>
            <button id="mul">*2</button>
            <button id="divide">÷2</button>
        </div>
    </div>
    `,
    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']);

模块化

模块是指职责单一的一段程序,随着前端发展的越来越强大,代码也越复杂,模块化可以使得代码方便维护,按需加载,减少加载不必要的代码,复用性高

{{topic.upvote_count || 0}}

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: `
    <div> 
        <div class="output">
            <span id="num">{{n}}</span>
        </div>
        <div class="actions">
            <button id="reduce">-1</button>
            <button id="add">+1</button>
            <button id="mul">*2</button>
            <button id="divide">÷2</button>
        </div>
    </div>
    `,
    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']);

模块化

模块是指职责单一的一段程序,随着前端发展的越来越强大,代码也越复杂,模块化可以使得代码方便维护,按需加载,减少加载不必要的代码,复用性高

38
回复 编辑