一、MVC
MVC包括三类对象:
- 模型model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法,会有一个或多个视图监听此模型。一旦模型的数据发生变化,模型将通知有关的视图。
const m = { data: {存储数据}, create() {添加数据}, delete() {删除数据}, update(data) { 更新数据 eventBus.trigger() 触发事件 }, get() {读取数据} }
- 视图view是它在屏幕上的表示,描绘的是model的当前状态。当模型的数据发生变化,视图相应地得到刷新自己的机会。
const v = { el: 渲染标记, html: `页面内容`, init(){初始化页面}, render(){渲染页面} }
- 控制器controller定义用户界面对用户输入的响应方式,起到不同层面间的组织作用,用于控制应用程序的流程,它处理用户的行为和数据model上的改变。
const c = { init() { v.init(container) 初始化view v.render() 第一次渲染 c.autoBindEvents() 自动绑定事件 eventBus.on(){} 监听事件 }, events: {哈希表记录事件}, autoBindEvents() {自动绑定事件} }
二、EventBus
EventBus事件总线,可以用来进行组件之间的监听和通信。
- 初始化
import $ from 'jquery' const eventBus = $(window)
- api:
eventBus.trigger()
:触发事件;eventBus.on(){}
:监听事件;eventBus.off(){}
:解除事件
const m = { ... update(data) { ... eventBus.trigger('m:updated') //在更新数据时触发事件 }, const c = { ... eventBus.on('m:updated', () => {v.render(m.data.n)}) }, //接收事件,事件触发就执行后面的函数 const eventBus.off('m:updated') //移除事件
三、表驱动编程
简单来说,就是以查表的方式获取数据而不使用逻辑语句。事实上,凡是能通过逻辑语句来选择的事物,都可以通过查表来选择。
从表中查询数据主要有直接访问、索引访问、阶梯访问三种方式。
例:今天星期几
const day = new Date().getDay() let day_zh; if(day === 0){ day_zh = '星期日' }else if(day === 1) { day_zh = '星期一' } ... else{ day_zh = '星期六' } // 或者 用 switch case switch(day) { case 0: day_zh = '星期日' break; case 1: day_zh = '星期一' break; ... }
使用表驱动法,将数据放在一个表里
const week = ['星期日', '星期一',..., '星期六'] const day = new Date().getDay( const day_zh = week[day]
四、如何理解模块化的
模块化就是将一个复杂的程序,通过一定规则封装成不同的模块,可以是对象、文件等。降低代码耦合度,各个模块有更好的独立性。这样做可以解决项目中的全局变量污染的问题,使开发效率更高,方便代码复用和维护 。