当前位置：首页 > web >正文

两个简单的设计模式的例子

web 2025/8/20 4:01:25

观察者模式

观察者模式：

定义对象间的一对多依赖关系，当一个对象（被观察者/主题）的状态发生变化时，所有依赖于它的对象（观察者）都会自动收到通知并更新。
特点：一个主题可以广播消息给多个监听者，适用于事件处理系统、消息订阅等场景。
类似于订阅发布，

利用观察者模式实现整个页面始终只有一个视频正在播放。在不改动其他组件的时候，直接修改video组件。
在这里插入图片描述

observe:

 // 观察者
export const observe = {inPlay: null,playVideo(videoRef) {//暂停之前的videoif (this.inPlay) {this.inPlay.pause();}// 播放新的videovideoRef.value.play();this.inPlay = videoRef.value;},pauseVideo() {if (this.inPlay) {this.inPlay.pause();}this.inPlay = null;},
};

video:

<script setup>
import { ref } from "vue";
import { observe } from "./0bserver.js";
const videoRf = ref(null);
// 在管理者中使用，调用观察者进行播放和暂停
const play = () => {observe.playVideo(videoRf);
};const pause = () => {observe.pauseVideo();
};
</script><template><div><videosrc="./111773_web.mp4"style="width: 100px; height: 100px"ref="videoRf"></video><button @click="play">播放</button><button @click="pause">暂停</button></div>
</template>

在这里插入图片描述

单例模式例子

项目在浏览器端使用request,在app端使用requestApp，
要根据不同的场景使用不同的请求

使用单例模式处理单例模式:

//判断环境的方法
const isApp =()=>{return 'xxx'
}
---------------------
import requestH5 from ""
import requestApp from ""
// 暴露一个标记，通过标记来储存已经实例化的对象
//单例模式保证，某一类只被创建一次
let requestFn = null
export  const request =()=>{
if(!requestFn){// 第一次发请求，要判断登入的环境if(isApp){requestFn = requestApp}else{requestFn = requestHe}requestFn()
}