JavaScript デザインパターンシングルトンパターン-jsチュートリアル-php.cn

まえがき

JavaScript の開発プロセスでは、先駆者たちが実践から特定の問題に対する多くの解決策をまとめてきました。簡単に言うと、デザインパターンとは、特定の場面での特定の問題に対する簡潔でエレガントな解決策です。

次の期間では、JavaScript で一般的なさまざまなデザインパターンを記録します。もしかしたら、すでによく知っているかもしれませんし、日常的に使用しているかもしれませんが、その概念については特によく知らない、あるいは漠然とした概念しか持っていないかもしれません。このシリーズは間違いなくあなたに何らかの利益をもたらすと信じています。

これらの一般的なパターンを理解する前に、デフォルトで少なくとも次の内容をマスターしてください

これを

ポータル

記事に欠陥や間違いがある場合は、こちらも読んでください。アドバイスをお願いします

さて、シングルケースモードから始めましょう

コンセプト

名前が示すように、インスタンスは 1 つだけです

定義: クラスのインスタンスが 1 つだけであることを確認し、それにアクセスするためのグローバルアクセスポイントを提供します

このような定義を見て、何か考えたことはありますか?グローバル変数の概念についてはどうですか?グローバル変数がシングルトンパターンの概念に準拠していることは否定できません。ただし、次の 2 つの理由により、通常はシングルトンとして使用しませんし、使用すべきではありません。

##維持し、上書きされやすい
ES6 より前は、通常、コンストラクターを使用してクラスをシミュレートしていましたが、現在では、 class キーワードを直接使用してクラスを作成することもできます。ただし、その本質はプロトタイプでもあります。

クラスにインスタンスが 1 つだけあるようにするには、クラスのインスタンスが作成されたかどうかをマークする変数を提供する必要があります。したがって、シングルトンモードのコアは次のとおりです。

インスタンスが 1 つだけであることを確認し、グローバルアクセスを提供します

このコアを中心に、シングルトンモードの実装を基本的に理解しています

実装

基本バージョン

シングルトンパターンの定義に従って、次の方法で簡単に実装できます

var Singleton = function(name){    
  this.name = name
}
 
Singleton.instance = null // 初始化一个变量Singleton.getInstance = function(name) {// 判断这个变量是否已经被赋值，如果没有就使之为构造函数的实例化对象// 如果已经被赋值了就直接返回
  if(!this.instance) {   
   this.instance = new Singleton(name)
   }    
  return this.instance
}
var a = Singleton.getInstance(&#39;Tadpole&#39;)
var b = Singleton.getInstance(&#39;Amy&#39;)
a === b // true

ログイン後にコピー

上記のコードは、シングルトンパターンの定義を明確に反映しています。中間変数を介してインスタンスが 1 つだけ初期化されるため、最終的に a と b は完全に等しくなります。

ES6 の class キーワードを使用してそれを実現することもできます

class Singleton {    
    constructor(name){   
        this.name = name     
      this.instance = null
  }    
  // 提供一个接口对类进行实例化
    static getInstance(name) { 
        if(!this.instance) { 
          this.instance = new Singleton(name)
      }       
      return this.instance
   }
}

ログイン後にコピー

これは難しくありません。 ES6 の実装方法は、コンストラクターを介した実装と基本的に同じであることを確認します。

問題があります:

は十分に透過的ではないため、呼び出しを制限する必要があります。クラスのインスタンス化の方法

#結合が高すぎるため、機能的なビジネスコードを結合すると、後のメンテナンスに役立ちません

上記のメソッドに簡単な変更を加えてみましょう

<strong>// 将变量直接挂在构造函数上面，最终将其返回
  function Singleton(name) {   
     if(typeof Singleton.instance === &#39;object&#39;){ 
        return Singleton.instance
     }  
     this.name = name
      return Singleton.instance = this
 }  
 // 正常创建实例
  
 var a = new Singleton(&#39;Tadpole&#39;)
 var b = new Singleton(&#39;Amy&#39;)</strong>

ログイン後にコピー

クラスの基本バージョンが十分に透過的でないという問題を解決してください。インスタンスを初期化するための new キーワードですが、新しい問題もあります。

返される Single.instance タイプを決定すると、予期した結果が得られない可能性があります

結合が高すぎます

このメソッドは ES6 メソッドを通じて実装することもできます

// 将 constructor 改写为单例模式的构造器
class Singleton {    
constructor(name) {    
    this.name = name 
    if(!Singleton.instance) {
       Singleton.instance = this
    }       
    return Singleton.instance
  }
}

ログイン後にコピー

シングルトンの定義を通じてモードでは、インスタンスが 1 つだけ存在し、グローバルアクセスが提供できるようにする必要があります。そして、クロージャはそのようなニーズを確実に満たすことができます

var Singleton = (function () {  
var SingleClass = function () {}; 
var instance; 
return function () {      
 if (!instance) { 
    instance = new SingleClass() // 如果不存在 则new一个
 }        
 return instance;
}
})()

ログイン後にコピー

クロージャの特性により、変数は保存され、最終的に返され、グローバルアクセスが提供されます

同様に、上記のコードはまだ機能しません問題を解決する

#このコードをよく観察して、コンストラクタ部分を外部に取り出したら、機能の分離は達成されるでしょうか?

エージェントの実装

上記のコードを変更します

function Singleton(name) {   
 this.name = name
}
var proxySingle = (function(){  
  var instance 
  return function(name) {  
    if(!instance) {
      instance = new Singleton(name)
    }  
  return instance
 }
})()

ログイン後にコピー

将创建函数的步骤从函数中提取出来，把负责管理单例的逻辑移到了代理类 proxySingle 中。这样做的目的就是将 Singleton 这个类变成一个普通的类，我们就可以在其中单独编写一些业务逻辑，达到了逻辑分离的效果

我们现在已经达到了逻辑分离的效果，并且也不透明了。但是，这个负责代理的类是否已经完全符合我们的要求呢，答案是否定的。设想一下，如果我们的构造函数有多个参数，我们是不是也应该在代理类中体现出来呢

那么，有没有更通用一些的实现方式呢

通用惰性单例

在前面的几个回合，我们已经基本完成了单例模式的创建。现在，我们需要寻求一种更通用的方式解决之前留下来的问题

试想一下，如果我们将函数作为一个参数呢

// 将函数作为一个参数传递
var Singleton = function(fn) { 
   var instance
   return function() {        // 通过apply的方式收集参数并执行传入的参数将结果返回
     return instance || (instance = fn.apply(this, arguments))
   }
}

ログイン後にコピー

这种方式最大的优点就是相当于缓存了我们想要的结果，并且在我们需要的时候才去调用它，符合封装的单一职责

应用

前面有说过，所有的模式都是从实践中总结而来，下面就让我们来看看它在实际开发中都有哪些应用吧

通过单例模式的定义我们不难想出它在实际开发中的用途，比如：全局遮罩层

一个全局的遮罩层我们不可能每一次调用的时候都去创建它，最好的方式就是让它只创建一次，之后用一个变量将它保存起来，再次调用的时候直接返回结果即可

单例模式就很符合我们这样的需求

// 模拟一个遮罩层var createDiv = function () {    
        var div = document.createElement(&#39;div&#39;)
    div.style.width = &#39;100vw&#39;
    div.style.height = &#39;100vh&#39;
    div.style.backgroundColor = &#39;red&#39;
    document.body.appendChild(div)  
    return div
}// 创建出这个元素var createSingleLayer = Singleton(createDiv)document.getElementById(&#39;btn&#39;).onclick = function () {    // 只有在调用的时候才展示
    var divLayer = createSingleLayer()
}