MVC的三个对象

  • 模型model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法，会有一个或多个视图监听此模型。一旦模型的数据发生变化，模型将通知有关的视图。
  • 视图view是它在屏幕上的表示，描绘的是model的当前状态。当模型的数据发生变化，视图相应地得到刷新自己的机会。
  • 控制器controller定义用户界面对用户输入的响应方式，起到不同层面间的组织作用，用于控制应用程序的流程，它处理用户的行为和数据model上的改变。

MVC - 图1

  1. var model = {
  2.     data: null,
  3.     init(){}
  4.     fetch(){}
  5.     save(){}
  6.     update(){}
  7.     delete(){}
  8. }
  9. view = {
  10.     init(){}
  11.     template:'<h1>hello</h1>'
  12. }
  13. controller = {
  14.     view: null,
  15.     model: null,
  16.     init(view, model){
  17.         this.view = view
  18.         this.model = model
  19.         this.bindEvents()
  20.     }
  21.     render(){
  22.         this.view.querySelector('name').innerText = this.model.data.name
  23.     },
  24.     bindEvents(){}
  25. }

EventBus

1.$on 事件的订阅

  1. $on(eventName,callback)  
  2. //参数1:事件名称  参数2:事件函数
  3. //判断当前事件名称是否存在，如果不存在则创建一个key值为事件名称
  4. //value为一个数组 将callback push到数组中
  6. const eventList = {};
  7. const $on = (eventName,callback)=>{
  8.      if(!eventList[eventName]){
  9.          eventList[eventName] = [];
  10.      }
  11.      eventList[eventName].push(callback)
  12. }

2.$off 事件的解绑

  1. $off(eventName,[callback])  
  2. //参数1:事件名称  参数2:[事件函数]
  3. //判断当前事件名称是否存在，如果存在继续判断第二个参数是否存在，如果存在则找到相//对应的下标 然后将函数在数组中移除
  4. //如果不存在则将整个数组清空
  6. const eventList = {};
  7. const $off = (eventName,callback)=>{
  8.     if(eventList[eventName]){
  9.           if(callback){
  10.                  let index = eventList[eventName].indexOf(callback);
  11.                  eventList[eventName].splice(index,1)
  12.            }
  13.     }else{
  14.            eventList[eventName].length = 0; 
  15.     }
  16. }
  18. export default = {
  19.      $on,
  20.      $emit,
  21.      $off
  22.  }

3.$emit 事件的触发

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

表驱动编程

  1. function age(name){
  2.     if(name==="小明"){
  3.         console.log("年龄是"+10)
  4.     }else if(name==="小白"){
  5.         console.log("年龄是"+14)
  6.     }else if(){
  8.     }
  9.     //....等等
  10. }

改写代码

  1. const list={
  2.     "小明":10,
  3.     "小白":14,
  4.     //等等...
  5. }
  6. function age2(name){
  7.     if(name in list){
  8.         console.log(name+"的年龄是"+list[name])
  9.     }else{
  10.         console.log("查无此人")
  11.     }
  12. }

简单来说，就是像查字典一样，将数据部分与代码部分分离，函数主体只是去表中查找然后输出，减少代码的重复性。

模块化

正如现在所有框架所做的事情一样，模块化代表着人与人之间代码分离和协作的必然趋势，使用模块化编程可以加强团队协作化编程，也可以让整个编程过程变得明晰，把页面上的不同功能分离，把一个功能的mvc分离，把前端和后端分离，这都是模块化的一种体现，模块化也是编程发展的必然趋势。