使用「设计模式」巧妙解决 BUG 的经历，妙啊~

是这样的，这天，我接到了一个 BUG，当然这个 BUG 不是我写的，是这样的有两个页面：yNj28资讯网——每日最新资讯28at.com

• 页面 A：有同步代码，有异步代码
• 页面 B：全是同步代码

yNj28资讯网——每日最新资讯28at.com

注意：此项目是老项目，没有全局状态管理工具！！！yNj28资讯网——每日最新资讯28at.com

// 页面Aconsole.log(1)console.log(2)http.get(url).then(res => {  console.log(3)  localStorage.setItem(key, res)})// 页面Bconsole.log(  localStorage.getItem(key))

然后这两个页面是先后加载的，那么我们可以得出输出顺序是：yNj28资讯网——每日最新资讯28at.com

1 // 页面A2 // 页面Aundefined // 页面Bconsole.log(3) // 页面A

因为请求是异步的，导致页面B那边拿不到 localStorage 里面的东西，而无法完成很多操作，导致了出现 BUG。所以得想想怎么去解决这个 BUG。yNj28资讯网——每日最新资讯28at.com

定时器

最简单的就是利用定时器去解决：yNj28资讯网——每日最新资讯28at.com

// 页面BsetTimeout(() => {  console.log(  localStorage.getItem(key)  )})

但是这样是不对的，不好维护，滥用定时器会导致以后可能会有新的 BUG 出现！！！yNj28资讯网——每日最新资讯28at.com

发布订阅模式

所以还是使用发布订阅，首先实现一个发布订阅中心，以下是简单实现：yNj28资讯网——每日最新资讯28at.com

type Callback<T> = (data: T) => void;class PubSub<T> {  private subscribers: Callback<T>[] = [];  subscribe(callback: Callback<T>): void {    this.subscribers.push(callback);  }  unsubscribe(callback: Callback<T>): void {    this.subscribers = this.subscribers.filter(fn => fn !== callback);  }  publish(data: T): void {    this.subscribers.forEach(fn => fn(data));  }}export const ps = new PubSub();

接着就可以用它来解决我们那个 BUG 了！！yNj28资讯网——每日最新资讯28at.com

// 页面Aconsole.log(1)console.log(2)http.get(url).then(res => {  console.log(3)  localStorage.setItem(key, res)  ps.publish(res)})// 页面B// 订阅ps.subscribe((res) => {  console.log(res)  console.log(    localStorage.getItem(key)  )})

现在的输出顺序就是：yNj28资讯网——每日最新资讯28at.com

1 // 页面A2 // 页面Aconsole.log(3) // 页面Ares // 页面Bres // 页面B

小结

这就是利用了 发布订阅模式 这种设计模式，来解决我们日常的一些简单业务，所以大家可以多用，这样在面试时就不怕面试官问你啦！yNj28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-95149-0.html使用「设计模式」巧妙解决 BUG 的经历，妙啊~

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： C++模板增强，模板编程更上一层楼

下一篇： 用 Python 代替 xftp 从 Linux 服务器下载文件