MVC的组成
MVC包括三类对象，将他们分离以提高灵活性和复用性。
- 模型model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法，会有一个或多个视图监听此模型。一旦模型的数据发生变化，模型将通知有关的视图。
- 视图view是它在屏幕上的表示，描绘的是model的当前状态。当模型的数据发生变化，视图相应地得到刷新自己的机会。
- 控制器controller定义用户界面对用户输入的响应方式，起到不同层面间的组织作用，用于控制应用程序的流程，它处理用户的行为和数据model上的改变。
Model数据模型
//示例
let Model={
data:{数据源},
create:{增加数据},
delete:{删除数据},
update(data){
Object.assign(m.data,data)//用新数据替换旧数据
eventBus.trigger('m:update')//eventBus触发'm:update'信息，通知View刷新界面
},
get:{获取数据}
}
View视图层
//示例
let View={
el:要刷新的元素，
html：'要显示在页面上的刷新内容'
init(){
v.el:初始化需要刷新的元素
}，
render(){
刷新页面
}
}
Controller控制器
控制器通过绑定事件，根据用户的操作，调用M和V更新数据和视图
let Controller={
init(){
v.init()//初始化View
v.render()//第一次渲染页面
c.autoBindEvents()//自动的事件绑定
eventBus.on('m:update',()=>{v.render()}//当enentsBus触发'm:update'是View刷新
}，
events:{事件以哈希表的方式记录存储},
//例如：
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})
},
method(){
data=新数据
m.update(data) // controller 通知 model去更新数据
},
autoBindEvents(){
for (let key in c.events) { // 遍历events表，然后自动绑定事件
const value = c[c.events[key]]
const spaceIndex = key.indexOf(' ')
const part1 = key.slice(0, spaceIndex) // 拿到 'click'
const part2 = key.slice(spaceIndex + 1) // 拿到'#add1'
v.el.on(part1, part2, value)
}
}
MVC实例
加减乘除计算器
import './app1.css'
import $ from 'jquery'
const eventBus = $(window)
// 数据相关都放到m
const m = {
data: {
n: parseInt(localStorage.getItem('n'))
},
create() {},
delete() {},
update(data) {
Object.assign(m.data, data)
eventBus.trigger('m:updated')
localStorage.setItem('n', m.data.n)
},
get() {}
}
// 视图相关都放到v
const v = {
el: null,
html: `
<div>
<div class="output">
<span id="number">{{n}}</span>
</div>
<div class="actions">
<button id="add1">+1</button>
<button id="minus1">-1</button>
<button id="mul2">*2</button>
<button id="divide2">÷2</button>
</div>
</div>
`,
init(container) {
v.el = $(container)
},
render(n) {
if (v.el.children.length !== 0) v.el.empty()
$(v.html.replace('{{n}}', n))
.appendTo(v.el)
}
}
// 其他都c
const c = {
init(container) {
v.init(container)
v.render(m.data.n) // view = render(data)
c.autoBindEvents()
eventBus.on('m:updated', () => {
console.log('here')
v.render(m.data.n)
})
},
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})
},
autoBindEvents() {
for (let key in c.events) {
const value = c[c.events[key]]
const spaceIndex = key.indexOf(' ')
const part1 = key.slice(0, spaceIndex)
const part2 = key.slice(spaceIndex + 1)
v.el.on(part1, part2, value)
}
}
}
export default c
外部引用
import x from './app1.js'
x.init('#app1') 把容器div传进去
然后在html里写一个<div id="app1"></div>作为容器即可
什么是EventBus
EventBus主要用于对象之间的通信,使用 eventBus 可以满足最小知识原则，m 和 v 互相不知道对方的细节，但是却可以调用对方的功能
EventBus有哪些Api
eventBus 提供了 on、off 和 trigger 等 API，on 用于监听事件，trigger 用于触发事件 比如在上面的MVC模型中， M数据模型更新时，会 trigger 触发一个事件
const m = {
....
update(data) {
Object.assign(m.data, data)
eventBus.trigger('m:updated') // 通知一下view层，我已经更新了数据，view该开始工作了
localStorage.setItem('n', m.data.n)
},
....
}
controller会用 on 监听事件, 然后通知 view 模型去重新渲染页面
const c = {
init(container) {
v.init(container)
v.render(m.data.n) // view = render(data)
c.autoBindEvents()
eventBus.on('m:updated', () => { // controller会用 on 监听事件,
//然后通知 view 模型去重新渲染页面
console.log('here')
v.render(m.data.n)
})
},
...
}
表驱动编程
为了增强代码的可读性，我们可以用表驱动编程，把用来做If条件判断的值存进一个哈希表，然后从表里取值
还是上面的计算器实例，传统做法，需要对四个按钮分别绑定click事件
$button1.on('click', () => {
let n = parseInt($number.text())
n += 1
localStorage.setItem('n', n)
$number.text(n)
})
$button2.on('click', () => {
let n = parseInt($number.text())
n -= 1
localStorage.setItem('n', n)
$number.text(n)
})
$button3.on('click', () => {
let n = parseInt($number.text())
n = n * 2
localStorage.setItem('n', n)
$number.text(n)
})
$button4.on('click', () => {
let n = parseInt($number.text())
n = n/2
localStorage.setItem('n', n)
$number.text(n)
})
--------用事件委托后-------
const c = {
init(container) {
v.init(container)
v.render(m.data.n)
c.BindEvents()
}
BindEvents() {
v.el.on('click', '#add1', () => {
m.data.n += 1
v.render(m.data.n)
})
v.el.on('click', '#minus1', () => {
m.data.n -= 1
v.render(m.data.n)
})
v.el.on('click', '#mul2', () => {
m.data.n *= 2
v.render(m.data.n)
})
v.el.on('click', '#divide2', () => {
m.data.n /= 2
v.render(m.data.n)
})
}
}
用哈希表简化
const c = {
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})
},
autoBindEvents() {
for (let key in c.events) {
const value = c[c.events[key]]
const spaceIndex = key.indexOf(' ')
const part1 = key.slice(0, spaceIndex)
const part2 = key.slice(spaceIndex + 1)
v.el.on(part1, part2, value)
}
}
这样只用一个事件监听器，绑定按钮的父元素。
模块化
模块化就是把相对独立的代码从一大段代码里抽取成一个个短小精悍的模块
每个模块之间相对独立，方便以后的维护和修改
ES6的语法里引入了Import和export就是用来实现模块化的
例如在一个js文件中封装好了controller模型，然后导出
export default c // 默认导出
export {c} // 另外一种导出方式。记得要加花括号
在main.js中使用controller
import x from './app1.js'
等价于import {default as x} from './app1.js'
x.init('#app1')
