MVC 三个对象分别做什么

MVC模式是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：模型、视图和控制器。 MVC模式最早由Trygve Reenskaug在1978年提出，经过几十年的衍生出MVP、MVVM 等框架。

对MVC软件设计模式的三个部分可以被描述如下：

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

const view = { el: null, html: html代码, init() { 初始化 }, render() { 渲染html } }

const controller = { init() { 初始化方法，如init、render、EventBus等 }, //表驱动编程 events: { 哈希表 }, add() { }, minus() { }, mul() { }, div() { }, autoBindEvents() { 自动绑定事件 } }

  1. <a name="3lXwT"></a>
  2. ## EventBus 
  3. EventBus 可以用来简化组件间通信与数据传输，使用**发布者/订阅者**模式进行松散耦合。EventBus使中央通信只需几行代码即可解耦类-简化代码，消除依赖关系并加快应用程序开发。
  5. <a name="pywH5"></a>
  6. ### EventBus的用处
  8. - 便于业务逻辑解耦
  9. - 提供丰富的扩展点，包括前扩展、后扩展和覆盖
  10. - 使用事件驱动，让事件触发更加清晰
  11. - 让代码更加简洁清楚
  12. <a name="IuCQk"></a>
  13. ### EventBus 有哪些 API
  15. - on（监听事件）
  16. - trigger（触发事件）
  17. - off（取消监听）
  18. ```javascript
  19. import $ from 'jquery'
  21. class EventBus {
  22.   constructor() {
  23.     this._eventBus = $(window)
  24.   }
  25. // on（监听事件）
  26.   on(eventName, fn) {
  27.     return this._eventBus.on(eventName, fn)
  28.   }
  29. // trigger（触发事件）
  30.   trigger(eventName, data) {
  31.     return this._eventBus.trigger(eventName, data)
  32.   }
  33. // off（取消监听）
  34.   off(eventName, fn) {
  35.     return this._eventBus.off(eventName, fn)
  36.   }
  37. }
  39. export default EventBus

表驱动编程

表驱动法是一种编程模式，从表里面查找信息而不是使用逻辑语句（if…else…switch），当是很简单的情况时，用逻辑语句很简单，但如果逻辑很复杂，再使用逻辑语句就很麻烦了。
比如查找一年中每个月份的天数，如果用表驱动法，直接把每个月份的天数存到一个数组里就行了，取值的时候直接下标访问，找出重要的数据，把重要的数据做成哈希表，就是表驱动编程。

使用if else

  1. function iGetMonthDays(iMonth) {
  2.   let iDays;
  3.   if(1 == iMonth) {iDays = 31;}
  4.   else if(2 == iMonth) {iDays = 28;}
  5.   else if(3 == iMonth) {iDays = 31;}
  6.   else if(4 == iMonth) {iDays = 30;}
  7.   else if(5 == iMonth) {iDays = 31;}
  8.   else if(6 == iMonth) {iDays = 30;}
  9.   else if(7 == iMonth) {iDays = 31;}
  10.   else if(8 == iMonth) {iDays = 31;}
  11.   else if(9 == iMonth) {iDays = 30;}
  12.   else if(10 == iMonth) {iDays = 31;}
  13.   else if(11 == iMonth) {iDays = 30;}
  14.   else if(12 == iMonth) {iDays = 31;}
  15.   return iDays;
  16. }

使用表驱动(包括闰年判断)

  1. const monthDays = [
  2.   [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
  3.   [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
  4. ]
  5. function getMonthDays(month, year) {
  6.   let isLeapYear = (year % 4 === 0) && (year % 100 !== 0 || year % 400 === 0) ? 1 : 0
  7.   return monthDays[isLeapYear][(month - 1)];
  8. }
  9. console.log(getMonthDays(2, 2000))

模块

  1. 在ES6之前是没有模块化的，随着前端js代码复杂度的提高，模块化的的问题会导致污染全局命名空间, 引起命名冲突或数据不安全，而且模块成员之间看不出直接关系。

什么是模块?

  • 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
  • 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信

简单来说就是把一个东西做成小块块然后把他们拼接起来

  1. // CSS.js
  2. const string = `一百行代码`
  3. export  default string
  4. // test.js
  5. import string from './css.js' //string可以是任何名字

上面这段代码里，CSS.js中有一百行代码，test,js引用了CSS.js，这使得test.js结构更为清晰

模块化的好处

  • 开发调试效率高
  • 提高代码的可维护性
  • 可以被其他地方引用
  • 相同名字的函数和变量可以分别存在不同的模块中，避免函数名和变量名冲突。