vue中的观察者模式

1.什么是观察者模式？

2.抛出问题：有多个函数如何保证依次执行？

2-1 总结：

2-2 需求复杂点：当某个特定的事件发生，执行多个函数？

2-3 面向对象的写法：

2-4 总结：

1.什么是观察者模式？

1.1 23种设计模式之一。最常见的模式。

1.2 是套路，解决一类问题的最优解

1.3 定义了一种一对多的依赖关系。让多个观察者对象同时监听某一个目标对象，当这个目标对象的状态发生变化时，会通知所有的观察者

1.4 详细点：

观察者：他是一个函数（做事）

事件:一个标志符

当这个事件发生时，观察者会产生相应的动作。一个事件有多个观察者，当这个事件发生时，多个观察都会执行

1.5 总结：

观察者就是一群舔狗，监听女神的一切举动，如看见女神渴了，观察者们就争相给他买水喝

2.抛出问题：有多个函数如何保证依次执行？

有多个函数（观察者），如何依次执行
function f1 () {console.log('f1')
}
function f2 () {console.log('f2')
}
function f3 () {console.log('f3')
}var arr = [f1,f2,f3]  //将他们放到一个数组中，通过数组去依次调用arr.foreach(item => {item()  //每个item相当于数组中的f1、f2然后加（）调用函数。
})
同理：
arr.push(function f4 (){console.log('f4')}) //往数组里面加函数

2-1 总结：

将他们放入数组中通过数组去依次调用

2-2 需求复杂点：当某个特定的事件发生，执行多个函数？

// 定义观察者
function xiaowang (){console.log('大哥起身，小王给大哥 拉凳子')
}
function xiaoC (){console.log('大哥起身，小C给大哥 拉凳子')
}
function xiaoA (){console.log('大哥去世，小A给大哥 抬棺')
}
function xiaoB (){console.log('大哥抽烟，小B给大哥 点火')
}
//定义管家  观察者与动作（事件）之间的关系   这个最重要！！！
const guanjia = {'qishen':[xiaowang,xiaoC],'qushi':[xiaoA],'chouyan':[xiaoB]]
//大哥起身
guanjia['qishen'].foreach(item=>item()) 这段代码是遍历起身这个动作，然后循环调用观察者函数。
//发布事件，通过相应的观察者去执行
封装：function emit (eventname){guanjia[eventname].foreach(item=>item())
}emit('qishen')
//添加观察者封装
function on （eventname,callback）{guanjia[eventname].push(callback)
}
on('qishen',function(){console.log('XXXXXX')})

2-3 面向对象的写法：

function Eventcenter(){   //构造函数 类比Vuethis.guanjia = {'qishen':[],'baishou':[]}
}
//添加观察者（收小弟，有分工，只响应某个事件）
Eventcenter.prototype.$on = function(eventname,listener){
if(this.guanjia[eventname]){ //先判断有没没有这个事件名，没有去注册，有就添加观察者this.guanjia[eventname].push(listener)}else(this.guanjia[eventname]=[listener])
}
//发布事件，通知相关的观察者去执行
Eventcenter.prototype.$emit = function(eventname){ //在原型上添加方法if(this.guanjia[eventname]){this.guanjia[eventname].foreach(item=>item())}
}
function xiaowang (){comsole.log('XXXXX')}var app = new Eventcenter()  //实例化 类比 VM
app.$on('qishen',xiaowang)   //添加小弟
app.$emit('qishen')发布事件通知相关的观察者去执行

2-4 总结：

2-4-1 观察者模式。是设计模式（解决一类问题的最优化解）的一种

2-4-2 发布订阅模式，不是特别严格的情况下，可以认为是指一个东西

2-4-3 观察者简单，发布订阅复杂点，有管家

2-4-4 接触过的观察者模式：

如事件监听addeventlistener

vue中的观察者模式相关推荐

Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.跨级组件.非嵌套组件之间通信. props $emit props $emit适用于父子组件的通信,这种组件通信的方式是我们运用的非 ...
Vue中关于父子组件之间的通信
父子组件之间的通信是vue中的基础知识,在此做一个简单的梳理. 总的来说父传子是通过props,子传父是通过$emit. 简单的一个demo来说说,先上代码父组件: 如图,HelloWorld是一个 ...
js vue中得延时器_js中延时代码
1 js 的基本数据类型? 2 JavaScript 有几种类型的值? 3 什么是堆?什么是栈?它们之间有什么区别和联系? 4 内部属性 [Class] 是什么? 5 介绍 js 有哪些内置对象? 6 ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
props写法_简单理解vue中Props属性
本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下使用 Props 传递数据组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 pr ...
vue ts 设置tslint提示_Typescript 在 Vue 中的实践(包含2.x、3.x)
1 使用 typescript 的优势聊到 ts 时有一个不能规避的问题:为什么要使用 ts ,相比 js 有什么优势吗?下面我从两个方面试着回答一下这个问题: 1.1 项目开发时的便利避免低级 ...
VUE中使用Echarts绘制地图迁移
踩坑说明很久以前写jsp时使用过echarts的china.js插件,不过echarts是2.0的,目前vue项目中使用echarts3.8.5,直接将china.js插件引入,代码复制,运行一看, ...
vue中动态样式不起作用？ scoped了解一下
vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped 转载于:https://www. ...
Vue中组件数据的传递
Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: < ...

vue中的观察者模式

1.什么是观察者模式？

2.抛出问题：有多个函数如何保证依次执行？

2-1 总结：

2-2 需求复杂点：当某个特定的事件发生，执行多个函数？

2-3 面向对象的写法：

2-4 总结：

vue中的观察者模式相关推荐

最新文章

热门文章