ES 6を利用して単例モードとその応用の詳細を実現する。

5104 ワード
es 6 シングルモード 適用
前言
従来の開発エンジニアの目には、一例として一つの種類が一例しかないということを保証し、実現する方法は一般的にインスタンスが存在するかどうかを先に判断し、直接リターンがあれば、存在しないならば作成して戻ってきます。JavaScriptでは、単に名前空間プロバイダとして、グローバル名前空間から唯一のアクセスポイントを提供して、このオブジェクトにアクセスします。
単一の例モードの定義は、クラスが一つのインスタンスだけであることを保証し、全体的なアクセスポイントを提供することである。
単一の例モードは、適切なときにオブジェクトを作成し、唯一のものを作成することができます。
コードは生活に近いので、面白いです。例えばウェブサイトのログインをクリックしてログインボックスを弾いても、もう一度クリックしても同じフレームは現れません。音楽再生プログラムまたは音楽再生プログラムは、ユーザーが音楽を開いて音楽を開きたいなら、前の再生インターフェースは自動的に閉じられ、現在の再生インターフェースに切り替わります。これらは全部一例モードの応用シーンです。
一例モードを実現するには、クラスを作成することが古典的な方法であり、クラス内のもう一つの方法は、クラスのインスタンスオブジェクトを作成することができ、もう一つのマークがあり、記録はインスタンスオブジェクトを作ったかどうか。オブジェクトが既に存在する場合は、最初のインスタンス化対象の参照を返します。
一例モードの実現
s 5実現方式

var Singleton = function(name) {
 this.name = name;
 //    ，                
 this.instance = null;
}
//          ，           
Singleton.getInstance = function(name) {
 //                  
 if(!this.instance) {
  this.instance = new Singleton(name);
 }
 //       ，             
 return this.instance;
}
ユーザは、よく知られているインターフェースを介して、このインスタンスにアクセスすることができる。
このオブジェクトを二回実例化して，二回の実証結果が同じオブジェクトを指すかどうかを観察してみた。

var a = Singleton.getInstance('sven1');
var b = Singleton.getInstance('sven2');
//             
console.log(a === b);
結果はtrueです。a、bの間は引用関係であると説明する。
s 6実現方式
Singletonクラスを作成します。クラスのキーワードと静的関数は共にS 6によって追加されました。

class Singleton {
 constructor(name) {
  this.name = name;
  this.instance = null;
 }
 //            ，           
 static getInstance(name) {
  if(!this.instance) {
   this.instance = new Singleton(name);
  }
  return this.instance;
 }
}
一例モードの応用例
私たちは生活の中でよくある場面を使って、一例モードの応用を説明します。
いずれかのサイトで、ログインボタンをクリックして、登録枠が一つしかありません。後にログインボタンを押しても、もう一つのボックスが弾けません。これは単一例モードの典型的な応用である。これを実現します。単例モードの展示を重視するために、登録枠を簡略化しましょう。😜
ページにボタンを設定します。

<button id="loginBtn">  </button>
このボタンにクリックイベントを追加します。

const btn = document.getElementById('loginBtn');
btn.addEventListener('click', function() {
 loginLayer.getInstance();
}, false);
まず初期化方法initをあげます。ボタンをクリックしてから、ページに枠を追加します。

init() {
 var div = document.createElement('div');
 div.classList.add('login-layer');
 div.innerHTML = "      ";
 document.body.appendChild(div);
}
次に一例のモードで実現します。ボタンをクリックして浮動窓が一つしかないです。方法は構造関数の中でマークを作成し、初めてクリックした時に浮動窓を作成し、マークを変えた状態で、再度ボタンをクリックした時に、マークの状態によってもう一つの浮動窓を作るかどうかを判断します。
ソース:

class loginLayer {
 constructor() {
  //              
  this.instance = null;
  this.init();
 }
 init() {
  var div = document.createElement('div');
  div.classList.add('login-layer');
  div.innerHTML = "      ";
  document.body.appendChild(div);
 }
 //              
 static getInstance() {
  //                  ，              
  if(!this.instance) {
   this.instance = new loginLayer();
  }
  return this.instance;
 }
}
もちろん、浮窓にデザインを追加して、浮窓を表示させることを忘れないでください。

.login-layer {
 width: 200px;
 height: 200px;
 background-color: rgba(0, 0, 0, .6);
 text-align: center;
 line-height: 200px;
 display: inline-block;
}
最後に例のソースコードをお送りします。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>        </title>
 <style>
  .login-layer {
   width: 200px;
   height: 200px;
   background-color: rgba(0, 0, 0, .6);
   text-align: center;
   line-height: 200px;
   display: inline-block;
  }
 </style>
</head>
<body>
 <button id="loginBtn">  </button>
 <script>
  const btn = document.getElementById('loginBtn');
  btn.addEventListener('click', function() {
   loginLayer.getInstance();
  }, false);  
  class loginLayer {
   constructor() {
    this.instance = null;
    this.init();
   }
   init() {
    var div = document.createElement('div');
    div.classList.add('login-layer');
    div.innerHTML = "      ";
    document.body.appendChild(div);
   }
   static getInstance() {
    if(!this.instance) {
     this.instance = new loginLayer();
    }
    return this.instance;
   }
  }
 </script>
</body>
</html>
締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考となる学習価値を持っています。質問があれば、メッセージを書いて交流してください。ありがとうございます。
Anglarプロジェクトは新規作成、包装からnginx展開までの全過程記録です。
Spring Bootユニットテストと統合テストの詳細な解を実現します。