js设计模式之单例模式实例

JavaScript014

js设计模式之单例模式实例,第1张

1、什么是单例模式?

保证一个类只有一个实例, 并提供一个访问它的全局访问点。

2、如何实现一个单例模式

实现一个简单的单例模式:

创建一个类,类中有一个方法能够创建该类的实例对象,还有一个标记,记录是否创建过实例对象。创建过则直接用实例对象的引用。否则再次创建

3、什么情况可以使用单例模式(有什么用处)

(1)缓存数据(点击触发获取实验字段时)

(2)获取实例值不确定使用位置获取实例时是否已经有实例。每次调用都走一遍内部逻辑获取实例

使用场景:

Rn

h5页面中同一个路由下写在最上层时

每一个import进来的组件其实都属于一个单例模式

将变量缓存再windows上也是一个单例模式、但windows随意挂载变量的话后续不好维护

vue的双向数据绑定大家应该很熟悉了,当一方的值发生改变时,另一方绑定的值也会随之变化,用起来是挺嗨的。

但是在原生中我们怎么使用这种机制呢?

最近有个需求是通过对接websocket获取后台服务器实时变化的值,推送给web端使用。

基于这个需求,我使用到了js中的设计模式-观察者模式。

那么,让我们来一起了解一下吧。

先来看看具体机制:

这里对象定义了四个属性,分别绑定四个函数。

1、订阅:订阅方通过传递回调函数,观察者模式把这个回调函数push到自身的订阅功能里,以此来得知谁订阅了,然后判断是否要推送。

2、退订:找到对应的回调函数,然后在自身的订阅功能里把当前函数删除掉

3、发布:循环所有的订阅方,当发布方进行发送的时候,把对应的数据推送给订阅方

4、发布订阅:定义一个对象,使其具备订阅并且发布的功能

流程是这样,说起来头头是道的,问题是怎么使用?

举个栗子:

我想定义一个对象,使其具备发布订阅功能,发布方数值改变的时候,订阅方得到平方值得变化

这里通过input框的change事件,模拟了数据的实时变更,然后把当前值进行发布,这边一发布,订阅方就能通过回调函数得到实时变化的值,然后得到值进行相应的操作。

效果:

这样就能简单实现数据变更推送功能了。

注:文件中引入的observer的js是最上面提到的观察者模式的那一套流程,tools的js大家可以不必在意,是我自己原生封装的$函数,用来获取dom元素的。

具体需求,大家还需要变通,稍作修改。

好了,以上就是js的观察者模式实现的双向数据绑定。

如有问题,请指出,接受批评。

State 模式是一种特殊形式的 Strategy 模式:Context 选择的具体策略根据不同的 state 发生变化。

对于 Strategy 模式,可以基于不同的变量比如传入的参数来决定选择具体哪个策略,一旦选择确定后,直到 context 剩余的整个生命周期结束,该策略都保持不变。相反在 State 模式中,策略(或者在这里的语境下,叫做 状态 )在 context 的生命周期里是动态变化的,从而允许对象的行为可以根据内部状态的变化自适应地更改。

举例来说,我们需要创建一个宾馆预定系统,由一个 Reservation 类对预定房间的行为进行建模。

考虑如下一系列事件:

参考上图,可以实现 3 种 不同的策略,他们都实现了 confirm() 、 cancel() 、 delete() 这几个方法。每种策略的具体逻辑由不同的状态决定。 Reservation 对象只需要在每次状态切换时,激活对应的策略。

package.json :

failsafeSocket.js :

上述 FailsafeSocket 类主要由以下几个组件构成:

offlineState.js :

上述模块负责定义 socket 处于离线状态时的行为。

onlineState.js :

OnlineState 模块实现了当 socket 处于在线状态时的行为。

server.js :

client.js :

Node.js Design Patterns: Design and implement production-grade Node.js applications using proven patterns and techniques, 3rd Edition