JavaScript에서 싱글턴 패턴을 구현하는 방법-JS 튜토리얼-php.cn

JavaScript에서 싱글턴 패턴을 구현하는 방법

亚连

풀어 주다： 2018-06-19 11:36:23

원래의

2209명이 탐색했습니다.

이 글은 주로 싱글톤 모드의 JavaScript 구현에 대한 예제와 코드 설명을 소개합니다. 필요한 독자는 참고할 수 있습니다.

전통적인 싱글톤 패턴

은 클래스에 인스턴스가 하나만 있도록 보장하고 이에 액세스할 수 있는 전역 액세스 지점을 제공합니다.

싱글턴 구현의 핵심 아이디어

는 변수를 사용하여 특정 클래스에 대해 객체가 생성되었는지 여부를 표시하는 것입니다. 그렇다면 다음에 클래스의 인스턴스를 얻을 때 직접 이전에 생성된 개체를 반환합니다. 다음으로 JavaScript를 사용하여 이 아이디어를 강제로 구현합니다. 코드를 참조하세요.

var Singleton = function( name ){
  this.name = name;
};
Singleton.prototype.getName = function(){　　 alert ( this.name );
};
Singleton.getInstance = (function(){ 　　var instance = null;
　　return function( name ){
　　　　　　　　　　if ( !instance ){
　　　　　　　　　　　　instance = new Singleton( name );
　　　　　　　　　　}
　　　　　　　　return instance;　　　　　　 }
})();

로그인 후 복사

Singleton.getInstance를 사용하여 Singleton 클래스의 유일한 개체를 가져옵니다. 이는 실제로 문제가 되지 않지만 js 자체는 그렇지 않습니다. 클래스라는 개념이 있어서 강제로 사용하는 것입니다. 전통적인 싱글톤 사고로 구현한다는 것은 냄새도 나고 길어요(사실 보기에도 불편합니다). 아래에서는 JavaScript 클로저를 사용하여 싱글턴을 구현합니다. 코드를 살펴보세요.

var Createp = (function(){ 　　　　　　var instance;
　　　　　　var Createp = function( html ){ 　　　　　　　　　　if ( instance ){
　　　　　　　　　　　　return instance; 　　　　　　　　　　}
　　　　　　　　　　this.html = html; this.init();
　　　　　　　　　　return instance = this;
};
Createp.prototype.init = function(){
var p = document.createElement( &#39;p&#39; );
p.innerHTML = this.html; 
document.body.appendChild( p );
　　　　　　};
　　　　　　return Createp; })();
var a = new Createp( &#39;sven1&#39; ); var b = new Createp( &#39;sven2&#39; );
alert ( a === b ); // true

로그인 후 복사

실제로 클로저를 사용하여 싱글턴을 구현했지만 이 코드는 여전히 밀접하게 결합되어 있습니다. 실제로는 제가 담당했습니다. 두 가지. 첫 번째는 객체를 생성하고 초기화 init 메소드를 실행하는 것이고, 두 번째는 객체가 하나만 있는지 확인하는 것입니다. 이러한 코드는 책임이 불분명합니다. 이제 이 두 가지 작업을 분리해야 합니다. 생성자는 객체를 생성하는 역할을 담당합니다. 기존 객체를 반환할지 아니면 새 객체를 생성하고 반환할지 판단하는 작업은 다른 함수에 맡겨 완료합니다. 사실 이는 단일 책임 원칙이라는 프로그래밍 아이디어를 충족시키기 위한 것입니다. 이런 종류의 코드는 더 잘 분리될 수 있습니다. 다음 코드를 살펴보세요.

var Createp = function (html) {
    this.html = html;
    this.init();
  };
  Createp.prototype.init = function () {
    var p = document.createElement(&#39;p&#39;);
    p.innerHTML = this.html;
    document.body.appendChild(p);
  };
  var ProxySingletonCreatep = (function () {
    var instance;
    return function (html) {
      if (!instance) {
        instance = new Createp(html);
      }
      return instance;
    }
  })();
  var a = new ProxySingletonCreatep(&#39;sven1&#39;);
  var b = new ProxySingletonCreatep(&#39;sven2&#39;);
  alert(a === b); //true

로그인 후 복사

보시다시피, 생성자 Createp는 이제 객체 생성만 담당합니다. 이 문제 우리는 이 문제를 프록시 클래스인 ProxySingletonCreatep에 넘겼습니다. 이런 종류의 코드는 편안해 보이고(zhuang) 설득력이 있습니다(bi)!

마지막으로 게으른 싱글턴의 정수인 고도로 추상적인 싱글턴 패턴 코드를 게시합니다!

//单例模式抽象，分离创建对象的函数和判断对象是否已经创建
  var getSingle = function (fn) {
    var result;
    return function () {
      return result || ( result = fn.apply(this, arguments) );
    }
  };

로그인 후 복사

공식 매개변수 fn은 생성자입니다. 새로운 게으른 싱글톤을 생성하는 데 필요한 생성자만 전달하면 됩니다. 예를 들어 여자친구를 생성하기 위해 생성자를 전달하고 getSingle()을 호출하면 새 여자친구를 생성할 수 있습니다. 앞으로 getSingle()을 호출하면 방금 생성한 여자친구만 반환됩니다. 새로운 여자친구에 관해서는 - 그녀는 존재하지 않습니다.

싱글톤에 대한 일반적인 시나리오

페이지 로그인 상자와 같은 고유한 개체만 생성해야 하는 경우 로그인 상자는 하나만 있을 수 있으며 싱글톤 아이디어를 사용하여 구현할 수 있습니다. 싱글톤 아이디어는 필요하지 않습니다. 구현하는 것은 괜찮지만 결과적으로 로그인 상자를 표시하려고 할 때마다 로그인 상자를 다시 생성하고 표시해야 하거나(성능 소모) 실수로 두 개의 로그인 상자를 표시할 수도 있습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.