5 观察者模式on方法的使用

一.观察者模式on方法的使用

<script src="./jquery.min.js"></script>
<script>
// 定义观察者模式中的 on 方法
// 也就是向观察者模式中的消息盒子,添加要执行的方法
// 添加要执行的方法
// 添加的方法,要分为,方法的类型 和 方法的内容
// 方法类型(type): 请家长
写检查
没收手机
// 方法内容(function): 请家长 : 请老爸
请老妈 请爷爷 请奶奶 .....

//
写检查 : 班主任1000字
教导主任2000字
校长3000字 ....
//
没收手机 : 没收1小时
没收1天
没收1辈子 ....
// 相当于,一个是事件类型,一个是事件处理函数
// 实现步骤和原理
// 添加新的方法:
//
先判断,事件类型是否已经存在
//
如果类型已经存在,就直接在类型中,新增函数
//
如果类型不存在,就要先新增类型,同时在类型中新增函数
// 特别注意:
//
新增添加的函数,一定是函数名称或者变量名称
//
不能直接定义 function(){} 函数
//
因为直接定义的函数,是无法删除的，他们的存储地址不同
class Observer{
constructor(){
// 消息盒子,可以是对象,也可以是数组
this.msg = {};
}
// type,就是事件类型
// fun,就是具体的函数
on(type,fun){
// 如果没有这个类型,执行结果,undefined
// 证明当前消息盒子中,没有这个类型
if(this.msg[type] === undefined){
// 就要新增这个类型,并且赋值要执行的函数
// 因为一个类型中,会有多个函数,添加执行函数时,要是一个数组的形式
// 数组中,可以添加索引是字符串的单元
// 但是不会影响数组 length 的长度 比如type的值就是字符串
this.msg[type] = [fun] ;
}else{
// 这个类型已经存在了,就只需要,向类型中,数组,新增执行的函数就可以了
this.msg[type].push(fun);
}
}
emit(){}
off(){}
}
const observer = new Observer();
// 第一次新增打电话类型,是新增类型,并且赋值一个数组,存储函数
observer.on('打电话' , da1);
// 打电话,类型已经存在,直接向数组中新增函数就可以了
observer.on('打电话' , da2);
// 写检查
observer.on('写检查' , jian1);
observer.on('写检查' , jian2);
observer.on('写检查' , jian3);
// 没收手机
observer.on('没收手机' , mo1);
observer.on('没收手机' , mo2);
observer.on('没收手机' , mo3);
function da1(){
console.log('请老爸,下午2点来学校');
}
function da2(){
console.log('请老妈,下午3点来学校');
}
function jian1(){
console.log('给班主任写1000字的检查');
}
function jian2(){
console.log('给教导主任写2000字的检查');
}
function jian3(){
console.log('给校长写3000字的检查');
}
function mo1(){
console.log('没收手机1天');
}
function mo2(){
console.log('没收手机1年');
}
function mo3(){
console.log('没收手机1辈子');
}
// 总结
// on方法
// 1, 消息盒子可以是数组,也可以是对象
//
对象是正常操作
//
数组如果索引是字符串,也可以定义,只是,不会影响数组length的长度
//
不能用 for 或者 forEach 或者 jQuery的each 循环遍历 , 只能使用 for...in 循环
// 2, on方法的基本思路过程
//
如果消息盒子中,没有这个 类型
this.msg[类型] === undefined
//
新增类型,并且以数组的形式,存储函数方法
this.msg[类型] = [函数方法]
//
如果消息盒子中, 有这个
类型
//
直接在存储的数组中,新增函数方法
this.msg[类型].push(函数方法)
// 数组中,可以添加索引是字符串的单元
// 不会影响数组 length 的长度
// 数组的索引,是字符串形式
const arr = [];
arr['a1'] = 'a1';
arr['a2'] = 'a2';
arr['a3'] = 'a3';
arr['a4'] = 'a4';
arr['a5'] = 'a5';
arr.forEach(function(item,key){
console.log(item,key);
})
// 不可以用 不会报错但是不会执行
for(let key in arr){
console.log(key , arr[key]);
}
//
可以用
$(arr).each(function(key,item){
console.log(key , item)
})
// 不可以用 不会报错但是不会执行
</script>

最后

以上就是文艺大树为你收集整理的5 观察者模式on方法的使用的全部内容，希望文章能够帮你解决5 观察者模式on方法的使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。