집 >웹 프론트엔드 >JS 튜토리얼 >JS에서 싱글톤 모드를 구현하는 단계에 대한 자세한 설명

JS에서 싱글톤 모드를 구현하는 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-14 09:25:221539검색

이번에는 JS에서 싱글 케이스 모드를 구현하는 단계에 대해 자세히 설명하겠습니다. JS에서 싱글톤 모드를 구현할 때 주의사항은 무엇인가요?

전통적인 싱글톤 패턴

클래스의 인스턴스가 하나만 있는지 확인하고 이에 대한 전역 액세스 지점을 제공합니다.

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

특정 클래스에 대해 객체가 생성되었는지 여부를 표시하기 위해 변수를 사용하는 것에 지나지 않습니다. 그렇다면 다음에 해당 클래스의 인스턴스를 얻을 때 이전에 생성된 객체가 직접 반환됩니다. 다음으로 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( 'p' );
p.innerHTML = this.html; 
document.body.appendChild( p );
      };
      return Createp; })();
var a = new Createp( 'sven1' ); var b = new Createp( 'sven2' );
alert ( a === b ); // true

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

var Createp = function (html) {
    this.html = html;
    this.init();
  };
  Createp.prototype.init = function () {
    var p = document.createElement('p');
    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('sven1');
  var b = new ProxySingletonCreatep('sven2');
  alert(a === b); //true

보시다시피 생성자 Createp는 이제 객체 생성만 담당합니다. 기존 객체를 반환할지 아니면 새 객체를 생성하고 반환할지에 대해서는 이 문제를 프록시 클래스인 ProxySingletonCreatep에 맡깁니다. 보세요.(zhuang) 복종하세요(bi)!

마지막으로 게으른 싱글톤의 핵심인 매우 추상적인 싱글톤 패턴 코드를 게시하세요!

rreee

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

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

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!