浅析 MVC

2020-08-10 23:00:16 阅读：310 来源： 互联网

标签：update number 浅析 MVC 事件 eventBus data click

MVC（Model–View–Controller）

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

//数据放在m
const m = {
 //1.有个数据本数
  data: {},
  //2.可以对数据增删改查
  create() {},
  delete() {},
  update(data) {},
  get() {}
}
//视图放在v
const v = {
  //1、一个空容器，以后就是装html的容器
  el: null,
  //2、要添加的html
  html: ,
  //3、初始化容器函数，参数是我们给的要当容器的元素（应该是index.html里就有的元素）
  init(container) {v.el = $(container);},
  //4、渲染函数，参数将是数据。也就是视图全都是对数据渲染 view = render(data)
  render(x) {}
}
//其他放在c
const c = {
  //1.总初始化函数，参数是我们给的要当容器的元素
  init(container) {},
  //2、自动绑定事件
  //(1)把所有事件写成哈希表
  events: {},
  //(2)每个事件要执行的函数写出来
  add() {},
  minus() {},
  mul() {},
  div() {},
  //(3)自动绑定事件
  autoBindEvents() {}
}

EventBus

eventBus主要用于对象间通信
监听事件 eventBus.on()

触发事件 eventBus.trigger()

//一个事件执行
eventBus.trigger("m:updated");  //在数据增删改查函数中
eventBus.on("m:updated", () => {
      //④监听m:updated事件，每次触发就执行一些内容
      v.render(m.data.n);
    })

表驱动编程

表驱动法是一种编程模式(scheme)——从表里面查找信息而不使用逻辑语句(if和case)。事实上，凡是能通过逻辑语句来选择的事物，都可以通过查表来选择。对简单的情况而言，使用逻辑语句更为容易和直白。但随着逻辑链的越来越发杂，查表法也就愈发显得更具吸引力

//不使用表的编程
$('#add').on('click', ()=>{
number += 1
$number.text(number)
localStorage.setItem('number', number)
})
$('#minus').on('click', ()=>{
number -= 1
$number.text(number)
localStorage.setItem('number', number)
})
$('#mult).on('click', ()=>{
number *= 2
$number.text(number)
localStorage.setItem('number', number)
})
$('#divide).on('click', ()=>{
number /= 2
$number.text(number)
localStorage.setItem('number', number)
})
***************************************
  //使用表的编程
events: {
    'click #add1': 'add',
    'click #minus1': 'minus',
    'click #mul2': 'mul',
    'click #divide2': 'div',
  },
  add() {
    m.update({n: m.data.n + 1})
  },
  minus() {
    m.update({n: m.data.n - 1})
  },
  mul() {
    m.update({n: m.data.n * 2})
  },
  div() {
    m.update({n: m.data.n / 2})
  },

表指的是哈希表
表驱动编程可以减少重复代码，只讲重要的信息放在表里，然后利用表来编程
利用哈希表，把每一个的事件，元素，函数列出来
把每一个的函数定义出来
自动绑定事件：利用遍历哈希表，把元素绑定上事件

对于模块化的理解

模块化：模块的内部数据的实现是私有的，只是向外部暴露一些接口（方法）与外部其他模块通信。
模块化可以降低代码耦合度，减少重复代码，提高代码重用性，并且在项目结构上更加清晰，便于维护。

标签：update,number,浅析,MVC,事件,eventBus,data,click
来源： https://www.cnblogs.com/justcho/p/13472792.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

浅析 MVC

MVC（Model–View–Controller）

EventBus

表驱动编程

对于模块化的理解