- MVC
MVC (Model-View-Controller) 是一种软件设计模式.它强调分离软件的业务逻辑和显示. 这种“分离”提供了更好的分工和改进的维护。
Model: 模型持有所有的数据、状态和程序逻辑
View: 负责界面的布局和显示
Controller: 负责模型和界面之间的交互
<script>
// controller
Animal = {
start : function() {
this.view.start();//从视图触发
},
set : function(animalName) {
this.model.setAnimal(animalName);
//controller 改变 model
}
};
// model
Animal.model = {
animalDictionary : {
car : 'meows',
fish : 'swims',
bird : 'flies'
},
currentAnimal : null,
setAnimal : function(name) {
this.currentAnimal = this.animalDictionary[name] ? name : null;
this.onchange();
},
onchange : function() {
Animal.view.update();
//model传递结果到View(个人觉得这里可以由Controller来专递，最好不要直接操作视图)
},
}
};
// view
Animal.view = {
start : function() {
document.getElementById('setAnimal').onchange = this.onchange;
//视图绑定事件
},
onchange : function() {
Animal.set(document.getElementById('setAnimal').value);
//视图执行操作，调用Controller
},
};
Animal.start();//入口
</script>
- EventBus EventBus又成为事件总线，专门用于通信，以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。
EventBus的 API最重要的两个 API是 on()监听事件，trigger()触发事件
const evensBus=$(window) //定义
update(data){
Object.assign(m.data,data)
evensBus.trigger('m:updated') //触发事件
localStorage.setItem('index',m.data.index)
},
evensBus.on('m:updated', () => { //监听事件
v.render(m.data.index)
})
- 表驱动编程是做什么的
表驱动编程是从大量相似的代码中抽取出本质的东西,组成哈希表,利用表进行编程,以减少重复代码。
例如我们一般写事件可能是这样写
$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 *= 2;
localStorage.setItem("n", n);
$number.text(n);
});
$button4.on("click", () => {
let n = parseInt($number.text());
n /= 2;
localStorage.setItem("n", n);
$number.text(n);
});
如果改用表驱动编程，提高了代码的可读性，减少了重复代码，同时也降低了复杂度。
events:{
'click #button1':'add',
'click #minus1':'minus',
'click #mul2':'mul',
},
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})
},
autoBindbindEvents(){
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)
}
}
- 我如何理解模块化
将一些公共的代码抽成一个文件，再去引用这个文件，只需要暴露出接口让别的模块去引用就可以，而不用考虑文件内部做什么。这样做模块的独立性高，而且在需要用到对应功能引用模块，而不用多次重复代码。
