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})
},
- 表指的是哈希表
- 表驱动编程可以减少重复代码,只讲重要的信息放在表里,然后利用表来编程
- 利用哈希表,把每一个的事件,元素,函数列出来
- 把每一个的函数定义出来
- 自动绑定事件:利用遍历哈希表,把元素绑定上事件
对于模块化的理解
模块化:模块的内部数据的实现是私有的,只是向外部暴露一些接口(方法)与外部其他模块通信。
模块化可以降低代码耦合度,减少重复代码,提高代码重用性,并且在项目结构上更加清晰,便于维护。