浅析 MVC

STApril
156 阅读3分钟

MVC 概念

M-Model | 数据模型

  • M 代表数据模型，负责操作所有数据；
  • 模型数据用于封装与应用程序的业务逻辑相关的数据，以及对数据的处理方法，会有一个或多个视图监听此模型，一旦模型的数据发生变化，模型将通知有关的视图

V-View | 视图

  • V 代表视图，负责所有的 UI 界面；
  • 视图是它在屏幕上的表示，描绘的是模型数据当前的状态，当模型的数据发生变化时，视图相应地得到刷新的机会

C-Controller | 控制器

  • C 代表控制器，负责 M V 以外的其他；
  • 控制器定义 UI 界面对用户输入的数据的响应方式，起到不同层间的组织作用，用于控制应用程序的流程，处理用户的行为和数据模型上的改变

伪代码演示

const m = {
  data: {
    n: parseInt(localStorage.getItem('number') || 100)
  }, //  增
  delete: function(data) {
  }, //  删
  update: function(data) {
  }, //  改
  get: function(data) {
  }  //  查
}    //  M 部分

const v = {
  el: '载点'
  html: '需要插入元素内的 HTML 内容'
  render('需要渲染的 HTML 内容')
}  //  V 部分

const c = {
  const a = $('触发了a事件')
  const b = $('触发了b事件')
  b.on('onclick', function(){
  })
}  //  C 部分

EventBus

API

  • eventBus.getListenerCountOfEvent(eventName): 返回一个给定事件的监听数量
  • eventBus.once(eventName, listenerFunction): 给一个事件添加一个监听，该监听只能被调用一次，一次调用以后，它将会被移出该事件的监听组
  • eventBus.on(eventName, listenerFunction): 给一个事件添加一个监听，该监听可以被调用多次，每次触发事件后都会被调用
  • eventBus.off(eventName, listenerFunction): 取消事件的一个监听
  • eventBus.emit(eventName, args): 处理一个事件，从而让所有的监听函数都被调用
  • eventBus.getAllListenersName(): 返回eventBus中的所有事件的名称
  • eventBus.getAllListenersOfEvent(eventName): 返回给定事件中的所有监听
  • eventBus.removeAllListenersOfEvent(eventName): 取消给定事件中的所有监听

伪代码演示 on/trigger/off

class EventBus{
 constructor(){
    this._eventBus = $(window)
 }
 on(eventName, fn){
    this._eventBus.on(eventName, fn)
 }
 trigger(eventName, data){
    return this._eventBus.trigger(eventName, data)
 }
 off(eventName, fn){
    return this._eventBus.off(eventName, fn)
 }
  
 export default EventBus
  
 const e = new EventBus()
  e.on()
  e.tirgger()
  e.off()
}

表驱动编程

通过哈希表的形式来构建编程逻辑和层次，对冗长的代码进行优雅改写

举例

//  原代码
const day = new Date().getDay()
let day_zh;
if (day === 0) {
    day_zh = '星期日'
} else if (day === 1) {
    day_zh = '星期一'
} else if (day === 2) {
    day_zh = '星期二'
} else if (day === 3) {
    day_zh = '星期三'
} else if (day === 4) {
    day_zh = '星期四'
} else if (day === 5) {
    day_zh = '星期五'
}
else{
    day_zh = '星期六'
}
//  表驱动编程优化
const week = ['星期日', '星期一',..., '星期六']
const day = new Date().getDay(
const day_zh = week[day]

怎样理解模块化

  • 在解决问题时，解决方案需要的知识越少，越好理解、操作起来越高
  • 冗长的代码容易产生bug，且不利于优化
  • 模块化是通过优化代码结构，达到“用最少知识解决问题”的效果
  • 模块化使得模块之间结成对子，比如A引入了B和，他们两个模块不需要知道互相对方在做什么，只需要有引入，即可解决问题。如果需要优化代码，在不影响引入关系的前提下各自修改即可

Reference List | 参考文章
jiango的掘金博客
Perdugames' GitHub Repositories:

avatar
文章
阅读
粉丝