浅析 MVC

MVC

MVC模式（Model–view–controller）是软件工程中的一种软件架构模式。

把软件系统分为三个基本部分：数据模型（Model）、视图（View）和控制器（Controller）。

• Model：数据模型，负责操作所有数据
• View：视图，负责所有UI界面
• Controller：控制器，负责其他 Model:

const model={
    //数据
    data:{ },  
    // 数据的增删改查函数
    create(){ },
    delete(){ },
    update(){ },
    get() { }
}

View：

  el: null,
  //存放HTML代码
  html: ` `,
  //初始化函数
  init(){ },
  //4、渲染函数
  render(x){ }

Controller：

const c = {
  //初始化函数
  init(){ },
  //绑定事件
  //把事件写成哈希表
  events: {},
  //每个事件要执行的函数写出来
  add() {},
  minus() {},
  mul() {},
  div() {},
  //自动绑定事件
  autoBindEvents() {}
}

EventBus

EventBus 主要用于对象间通信

EventBus 常用API

• 监听事件 eventBus.on()
• 触发事件 eventBus.trigger()
• 取消监听 eventBus.off()

例子：

//数据发生改变时，触发事件
eventBus.trigger("m:updated"); 
eventBus.on("m:updated", () => {
      //监听事件，触发则重新渲染
      v.render(m.data.n);
    })

表驱动编程

表驱动编程是一种很重要的编程思想。 它的理念是从大量相似的代码中抽取出本质的东西，组成哈希表，利用表进行编程，以减少重复代码。

例子：

//监听多个元素
$('#a').on('click', ()=>{ })
$('#b').on('click', ()=>{ })
$('#c').on('click', ()=>{ })
$('#d').on('click', ()=>{ })
$('#e').on('click', ()=>{ })

使用表驱动编程：

//创建哈希表
const events = {
    '#a click': 'fn1',
    '#b click': 'fn2',
    '#c click': 'fn3',
    '#d click': 'fn4',
    '#e click': 'fn5'
}
//声明对应函数
fn1(){}
fn2(){}
fn3(){}
fn4(){}
fn5(){}

然后遍历哈希表，给指定元素绑定事件函数

function autoBindEvents(){
    //遍历哈希表
    for(let key in events){
        //得到空格的索引
        const spaceIndex = key.indexOf(' ')
        //得到各个 '#a'
        const part1 = key.slice(0, spaceIndex)
        //得到各个事件名 'click'
        const part2 = key.slice(spaceIndex + 1)
        //得到各个fn
        const fn = eventFunctions[events[key]] 
        $(part1).on(part2, fn) //绑定事件
    }
}

上面代码中，除去了所有重复代码，虽然看起来比之前更复杂了，但是当事件变得很多时，代码就非常简洁，添加新事件也非常方便。

模块化

现代的前端应用程序功能越来越强大，代码量也越来越庞大。 因此，将网页应用分为各个独立的模块单独开发，每个模块之间互不影响，可以使程序的结构更加清晰，方便维护。

使用 export (导出) 和 import (导入) 就可以实现模块化。

在 main.js 中 import 导入各个模块的 js ，各个模块 的 js 导入自己的 css 和 html ，那么各个模块之间都是独立的，虽然文件变多了，但代码结构更加清晰，也更方便维护，哪个模块有问题之间找对应的文件即可。

export 常用用法

// 导出变量
export const name = 'Clearlove';
export const year = '2021';

// 导出一个对象
const name = 'Clearlove';
const year = '2021';
export { name, year}


// 导出函数或类
export function add(a, b) {
  return a + b;
}

// export default 命令
export default function() {
  console.log('foo')
}

import 常用用法

// 导入app.js 文件
import '.app.js'
// 导入 module.js 中的名为 name 和 year 变量
import { name, year } from './module.js';

// 如果遇到export default命令导出的模块
import a from './export-default.js';