《 浅析 MVC 》

127 阅读3分钟

MVC 是一种将应用程序的逻辑层和表现层进行分离的方法,MVC 只是一个抽象的概念,并没有特别明确的规定.

每个模块都可以写成三个对象,分别是 M , V , C

M - Model (数据模型)负责操作所有数据

const m = {
  data:{数据源},
  create:{增加数据},
  delete:{删除数据},
  update(data){
     Object.assign(m.data,data)//用新数据替换旧数据
     eventBus.trigger('m:update')//eventBus触发'm:update'信息,通知View刷新界面
}
   get:{获取数据}
}

V - View (视图) 负责所有 UI 界面

const v = {
     el:要刷新的元素,
     html:'要显示在页面上的内容'
 init(){
    v.el:需要刷新的元素
},
   render(){ 刷新页面
 }
}

C - Controller (控制器) 负责其他

 const c = {
 init(){
     v.init()//初始化View
     v.render()//第一次渲染页面
     c.autoBindEvents()//自动的事件绑定
     eventBus.on('m:update',()=>{v.render()}) //当enentsBus触发'm:update'是View刷新 },
        events:{事件以哈希表的方式记录存储},
    method(){
        data=新数据
        m.update(data)
  },
       autoBindEvents(){自动绑定事件}
}

EventBus

EventBus 可以称作观察者设计模式,在 Android 下可以高效的发布/订阅事件。作用是可以代替传统Intent , Handler, Broadcast 或接口函数在 Fragment , Activity , Service ,线程之间传递数据,执行方法。解决模块之间通信的问题,view 组件层面,父子组件、兄弟组件通信都可以使 eventbus 处理。特点就是代码简洁

EventBus基本的api

  • on(监听事件)

  • trigger(emit)(触发事件)

  • off(取消监听)方法。 用于模块间的通讯,view组件层面,父子组件、兄弟组件通信都可以使eventbus处理

    on(监听事件)
    

    on(eventName,callback)//参数1:事件名称参数2:事件函数//判断当前事件名称是否存在,如果不存在则创建一个key值为事件名称//value为一个数组将callbackpush到数组中consteventList=;conston(eventName,callback) //参数1:事件名称 参数2:事件函数 //判断当前事件名称是否存在,如果不存在则创建一个key值为事件名称 //value为一个数组 将callback push到数组中 const eventList = {}; const on = (eventName,callback)=>{ if(!eventList[eventName]){ eventList[eventName] = []; } eventList[eventName].push(callback) }


  trigger(emit)(触发事件)
  
$emit(eventName,[params]) 
//参数1:事件名称 参数2:[需要传递的参数]
//判断当前事件的名称是否存在,如果存在则遍历数组,得到所有的函数,
//并执行。然后将params当做实参传递到函数中去
const eventList = {};
const $emit = (eventName,params)=>{
if(eventList[eventName]){
     let arr = eventList[eventName];
     arr.map((cb)=>{
         cb(params)
     })
}
}

off(取消监听)方法。

$off(eventName,[callback])  
//参数1:事件名称  参数2:[事件函数]
//判断当前事件名称是否存在,如果存在继续判断第二个参数是否存在,如果存在则找到相//对应的下标     然后将函数在数组中移除
//如果不存在则将整个数组清空

  const eventList = {};
 const $off = (eventName,callback)=>{
 if(eventList[eventName]){
      if(callback){
             let index = eventList[eventName].indexOf(callback);
             eventList[eventName].splice(index,1)
       }
}else{
       eventList[eventName].length = 0; 
}
}

export default = {
 $on,
 $emit,
 $off
 }
 

表驱动编程

表驱动法是一种编程模式,从表里面查找信息而不是使用逻辑语句(if…else…switch),当是很简单的情况时,用逻辑语句很简单,但如果逻辑很复杂,再使用逻辑语句就很麻烦了。表驱动编程主要是用来减少代码的重复。

示例代码

function age(name){
  if(name==="小啊giao"){
    console.log("年龄是"+18)
 }else if(name==="亚索"){
    console.log("年龄是"+16)
 }else if(){
   
}
....
}
如果用if else代码量是线性增长的。但用哈希表来记录这些映射关系会简单很多
const list={
"啊giao":18,
"亚索":16,
//等等...
}
function age2(name){
if(name in list){
    console.log(name+"的年龄是"+list[name])
}else{
    console.log("查无此人")
}
}
数据部分被抽离了,分工明确。函数主体只是去表中查找然后输出结果,这就是表编程的基本思想。

模块化

模块化程序设计是指在进程序设计时将一个大程序按照功能划分为若干小程序模块,每个小程序模块完成一个确定的功能,并在这些模块之间建立必要的联系,通过模块的互相协作完成整个功能的程序设计方法.

模块就是实现特定功能的一组方法。 只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。

在一个完整的页面应用中,不同的节点功能,不同的结构可以规划为多个模块,每个模块的实现的方式以及用到的技术大不相同,使用模块化编程可以减小各个模块之间的影响和联系,可以更方便的优化代码和重构代码,提高我们代码的重用性,便于后期维护。


学习小计,代码借鉴了 浅析 MVC_baidulixueqin的博客-CSDN博客这里