虚拟空间做网站,怎么用手机做网站平台,如何选择企业建站公司,上杭网站设计大家好#xff0c;我是若川。持续组织了8个月源码共读活动#xff0c;感兴趣的可以 点此加我微信ruochuan12 参与#xff0c;每周大家一起学习200行左右的源码#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外… 大家好我是若川。持续组织了8个月源码共读活动感兴趣的可以 点此加我微信ruochuan12 参与每周大家一起学习200行左右的源码共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外目前建有江西|湖南|湖北籍前端群可加我微信进群。本文作者有一个设计模式系列https://pattern.windliang.wang/ 推荐大家收藏保存学习。代码也写了几年了设计模式处于看了忘忘了看的状态最近对设计模式有了点感觉索性就再学习总结下吧。大部分讲设计模式的文章都是使用的 Java、C 这样的以类为基础的静态类型语言作为前端开发者js 这门基于原型的动态语言函数成为了一等公民在实现一些设计模式上稍显不同甚至简单到不像使用了设计模式有时候也会产生些困惑。下面按照「场景」-「设计模式定义」- 「代码实现」-「总」的顺序来总结一下如有不当之处欢迎交流讨论。场景假设我们在开发一款外卖网站进入网站的时候第一步需要去请求后端接口得到用户的常用外卖地址。然后再去请求其他接口、渲染页面。如果什么都不考虑可能会直接这样写// getAddress 异步请求
// 页面里有三个模块 ABC 需要拿到地址后再进行下一步
// A、B、C 三个模块都是不同人写的提供了不同的方法供我们调用getAddress().then(res {const address res.address;A.update(address)B.next(address)C.change(address)
})此时页面里多了一个模块 D 同样需要拿到地址后进行下一步操作我们只好去翻请求地址的代码把 D 模块的调用补上。// getAddress 异步请求
// 页面里有三个模块 ABC 需要拿到地址后再进行下一步
// A、B、C 三个模块都是不同人写的提供了不同的方法供我们调用getAddress().then(res {const address res.address;A.update(address)B.next(address)C.change(address)D.init(address)
})可以看到各个模块和获取地址模块耦合严重A、B、C 模块有变化或者有新增模块都需要深入到获取地址的代码去修改一不小心可能就改出问题了。此时就需要观察者模式了。设计模式定义可以看下 维基百科的介绍★The observer pattern is a software design pattern in which an object, named the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.”很好理解的一个设计模式有一个 subject 对象然后有很多 observers 观察者对象当 subject 对象有变化的时候去通知 observer 对象即可。再看一下 UML 图和时序图image-20220127110751274每一个观察者都实现了 update 方法并且调用 Subject 对象的 attach 方法订阅变化。当 Subject 变化时调用 Observer 的 update 方法去通知观察者。先用 java 写一个简单的例子公众号文章可以看作是 Subject 会不定期更新。然后每一个用户都是一个 Observer 订阅公众号当更新的时候就可以第一时间收到消息。import java.util.ArrayList;interface Observer {public void update();
}
// 提取 Subject 的公共部分
abstract class Subject {private ArrayListObserver list new ArrayListObserver();public void attach(Observer observer){list.add(observer);}public void detach(Observer observer){list.remove(observer);}public void notifyObserver(){for(Observer observer : list){observer.update();}}
}
// 具体的公众号提供写文章和得到文章
class WindLiang extends Subject {private String post;public void writePost(String p) {post p;}public String getPost() {return post;}
}// 小明
class XiaoMing implements Observer {private WindLiang subject;XiaoMing(WindLiang sub) {subject sub;}Overridepublic void update(){String post subject.getPost();System.out.println(我收到了 post 并且点了个赞);}
}// 小杨
class XiaoYang implements Observer {private WindLiang subject;XiaoYang(WindLiang sub) {subject sub;}Overridepublic void update(){String post subject.getPost();System.out.println(我收到了 post 并且转发了);}
}// 小刚
class XiaoGang implements Observer {private WindLiang subject;XiaoGang(WindLiang sub) {subject sub;}Overridepublic void update(){String post subject.getPost();System.out.println(我收到了 post 并且收藏);}
}public class Main {public static void main(String[] args) {WindLiang windliang new WindLiang(); // SubjectXiaoMing xiaoMing new XiaoMing(windliang);XiaoYang xiaoYang new XiaoYang(windliang);XiaoGang xiaoGang new XiaoGang(windliang);// 添加观察者windliang.attach(xiaoMing);windliang.attach(xiaoYang);windliang.attach(xiaoGang);windliang.writePost(新文章-观察者模式balabala); // 更新文章windliang.notifyObserver(); // 通知观察者}
}输出结果如下上边的实现主要是为了符合最原始的定义调用 update 的时候没有传参。如果观察者需要的参数是一致的其实这里也可以直接把更新后的数据传过去这样观察者就不需要向上边一样再去调用 subject.getPost() 手动拿更新后的数据了。这两种不同的方式前者叫做拉 (pull) 模式就是收到 Subject 的通知后通过内部的 Subject 对象调用相应的方法去拿到需要的数据。后者叫做推 (push) 模式Subject 更新的时候就将数据推给观察者观察者直接使用即可。下边用 js 改写为推模式const WindLiang () {const list [];let post 还没更新;return {attach(update) {list.push(update);},detach(update) {let findIndex -1;for (let i 0; i list.length; i) {if (list[i] update) {findIndex i;break;}}if (findIndex ! -1) {list.splice(findIndex, 1);}},notifyObserver() {for (let i 0; i list.length; i) {list[i](post);}},writePost(p) {post p;},};
};const XiaoMing {update(post){console.log(我收到了 post 并且点了个赞);}
}const XiaoYang {update(post){console.log(我收到了 post 并且转发了);}
}const XiaoGang {update(post){console.log(我收到了 post 并且收藏);}
}windliang WindLiang();windliang.attach(XiaoMing.update)
windliang.attach(XiaoYang.update)
windliang.attach(XiaoGang.update)windliang.writePost(新文章-观察者模式balabala)
windliang.notifyObserver()在 js 中我们可以直接将 update 方法传给 Subject 同时采取推模式调用 update 的时候直接将数据传给观察者看起来会简洁很多。代码实现回到开头的场景我们可以利用观察者模式将获取地址后的一系列后续操作解耦出来。// 页面里有三个模块 ABC 需要拿到地址后再进行下一步
// A、B、C 三个模块都是不同人写的提供了不同的方法供我们调用
const observers []
// 注册观察者
observers.push(A.update)
observers.push(B.next)
obervers.push(C.change)// getAddress 异步请求
getAddress().then(res {const address res.address;observers.forEach(update update(address))
})通过观察者模式我们将获取地址后的操作解耦了出来未来有新增模块只需要注册观察者即可。当 getAddress 很复杂的时候通过观察者模式会使得未来的改动变得清晰不会影响到 getAddress 的逻辑。必要的话也可以把 observers 抽离到一个新的文件作为一个新模块防止让一个文件变得过于臃肿。总观察者模式比较好理解通过抽象出一个 Subject 和多个观察者减轻了它们之间的过度耦合。再说简单点就是利用回调函数异步完成后调用传入的回调即可。但上边写的观察者模式还是有一些缺点Subject 仍需要自己维护一个观察者列表进行 push 和 update。如果有其他的模块也需要使用观察者模式还需要模块本身再维护一个新的观察者列表而不能复用之前的代码。Subject 需要知道观察者提供了什么方法以便未来的时候进行回调。下一篇文章会继续改进上边的写法观察者模式的本质思想不变某个对象变化然后通知其他观察者对象进行更新。但写法上会引入一个中间平台便于代码更好的复用使得 Subject 和观察者进行更加彻底的解耦同时给了它一个新的名字「发布订阅模式」。更多设计模式推荐阅读前端的设计模式系列-策略模式前端的设计模式系列-代理模式前端的设计模式系列-装饰器模式本文作者有一个设计模式系列https://pattern.windliang.wang/ 推荐大家收藏保存学习。················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经坚持写了8年点击查看年度总结。同时最近组织了源码共读活动帮助4000前端人学会看源码。公众号愿景帮助5年内前端人走向前列。扫码加我微信 ruochuan02、拉你进源码共读群今日话题目前建有江西|湖南|湖北 籍 前端群想进群的可以加我微信 ruochuan12 进群。分享、收藏、点赞、在看我的文章就是对我最大的支持~
