![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript设计模式
卡卡的笔录
前方的路。
展开
-
JavaScript设计模式之责任链模式
适用场景:一个完成的流程,中间分成多个环节,各个环节之间存在一定的顺序关系,同时中间的环节的个数不一定,可能添加环节,也可能减少环节,只要保证顺序关系就可以。原创 2023-11-03 16:29:59 · 436 阅读 · 0 评论 -
JavaScript设计模式之代理模式
代理就是我们不直接操作原有对象,而是委托另一个对象去操作,但是实际执行的还是原对象的方法。它与装饰器模式的不同在于:装饰器模式生效的是原对象,代理模式生效的是新对象。常见的运用有事件委托,vue中对data的代理等。原创 2023-11-03 14:31:45 · 115 阅读 · 0 评论 -
JavaScript设计模式之适配器模式
我想听歌的时候,我发现我没带耳机,我的手机是 iphone 的,而现在我只有一个 Type-C 的耳机,为了能够听歌,我用了一个转换器(也就是适配器),然后我就可以开心的听歌了。一般为了解决不兼容的问题,把一个类的接口换成我们想要的接口,类似于转换器。原创 2023-11-02 16:21:06 · 252 阅读 · 0 评论 -
JavaScript设计模式之装饰器模式
装饰器模式比继承更轻便,不改变原有对象的方法,在原有方法的前面或者后面添加一些点缀功能。原创 2023-11-02 16:13:33 · 250 阅读 · 0 评论 -
JavaScript设计模式之发布-订阅模式
适用场景:功能模块间进行通信,如Vue的事件总线。发布者和订阅者完全解耦(通过消息队列进行通信)原创 2023-11-02 15:37:20 · 172 阅读 · 0 评论 -
JavaScript设计模式之单例模式
JS中的单例模式一般为:代码模块实例化后仅返回一个唯一的对象。在ES6有了类的概念之后,更加接近通常所说的单例:一个类实例化后仅可以返回唯一的一个实例。 应用场景:页面中的某个组件仅渲染一次。 下面用代码实现一个最简单的单例(惰性单例) ES5实现方式 var singleton = (function () { var instance; function cr...原创 2019-03-27 15:10:38 · 119 阅读 · 0 评论 -
JavaScript设计模式之工厂模式
适用场景: 对象的构建比较复杂; 根据不同的条件创建不同的对象; 应用场景:根据不同的节点类型创建不同的DOM节点。 下面用代码实现一个最简单的工厂模式 ES5实现方式 var PhoneShop = function() {}; PhoneShop.prototype = { sellPhone: function(name) { var ph...原创 2019-04-04 16:37:02 · 112 阅读 · 2 评论 -
JavaScript设计模式之桥接模式
适用场景: 不同的对象(A,B)有相同的行为和特征,将这部分行为和特征单独出来,形成一个新的对象©,在构建对象(A,B)时传入对象C,对象(A,B)的行为函数中调用对象C对应的行为函数。 实际应用场景: Toast、Message 两种形态的弹窗,弹窗都有出现和隐藏等行为。 下面用代码实现一个最简单的桥接模式 ES5实现方式 function Toast(node, animation) { ...原创 2019-04-09 17:11:30 · 109 阅读 · 0 评论 -
JavaScript设计模式之观察者模式
适用场景:一个地方发生了更改,其他好几个地方进行相应的更改。 实际应用: MVVM中的MV过程,Vue的事件总线,事件队列。 ES5实现方式 var Subject = function () { this.observers = [] } Subject.prototype.addObserver = function(observer) { this....原创 2019-04-28 14:47:40 · 116 阅读 · 1 评论