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 클래스의 유일한 객체를 얻습니다. 이는 실제로 문제가 없지만, JavaScript는 클래스라는 개념이 없기 때문에, 우리가 강제로 전통적인 싱글톤 아이디어를 통해 이를 구현하는 것은 의미가 없습니다. 이러한 코드는 냄새가 나고 길다(실제로는 나에게 불편하다嘻嘻嘻). 아래에서는 JavaScript의 클로저를 통해 싱글톤을 구현해 보겠습니다:

var CreateDiv = (function() { 　　　　　　var instance;
　　　　　　var CreateDiv = function(html) { 　　　　　　　　　　if (instance) {
　　　　　　　　　　　　return instance; 　　　　　　　　　　}
　　　　　　　　　　this.html = html; this.init();
　　　　　　　　　　return instance = this;
};
CreateDiv.prototype.init = function() {
var div = document.createElement('div');
div.innerHTML = this.html; 
document.body.appendChild( div );
　　　　　　};
　　　　　　return CreateDiv; })();
var a = new CreateDiv( 'sven');1'); var b = new CreateDiv( 'sven');2');
alert ( a === b ); // true

可以看到，这样我们确实用闭包来实现了一个单例，但这个代码还是高度耦合的，CreateDiv的构造函数实际上负责了两件事情。第一是创建对象和执行初始化init方法，第二是保证只有一个对象。这样的代码是职责不明确的，现在我们要把这两个工作分开，构造函数就负责构建对象，至于判断是返回现有对象还是构造新的对象并返回，我们交给另外一个函数去完成，其实也就是为了满足一个编程思想：单一职责原则。这样的代码才能更好的解耦，请看下面代码：

var CreateDiv = function (html) {
    this.html = html;
    this.init();
  };
  CreateDiv.prototype.init = function () {
    var div = document.createElement('div');
    div.innerHTML = this.html;
    document.body.appendChild(div);
  };
  var ProxySingletonCreateDiv = (function () {
    var instance;
    return function (html) {
      if (!instance) {
        instance = new CreateDiv(html);
      };
      return instance;
    };
  })();
  var a = new ProxySingletonCreateDiv('sven');1');
  var b = new ProxySingletonCreateDiv('sven');2');
  alert(a === b); //true

可以看到，现在我们的构造函数CreateDiv现在只负责构造对象，至于是返回现有对象还是构造新的对象并返回，这件事我们交给了代理类proxySingletonCreateDiv来处理，这样的代码看着才舒（zhuang）服（bi）嘛！

최종으로 높은 추상화 수준의 싱글턴 패턴 코드를貼어 둡니다. 레지던시 싱글턴의 정신!

//싱글턴 패턴 추상화, 객체 생성 함수와 객체가 이미 생성되었는지�断별
  var getSingle = function (fn) {
    var result;
    return function () {
      return result || (result = fn.apply(this, arguments));
    };
  };

파라미터 fn은 우리의 생성 함수입니다. 우리는 필요한 어떤 생성 함수도 전달할 수 있으며, 새로운 레지던시 싱글턴을 생성할 수 있습니다. 예를 들어, 여자친구를 만드는 생성 함수를 전달하고 getSingle()을 호출하면 새로운 여자친구를 생성할 수 있습니다. 그런 다음 getSingle()을 다시 호출하면, 초반에 생성한 여자친구만 반환됩니다. 새로운 여자친구는 존재하지 않습니다.

싱글턴 일반 사용 사례

한 번에 유일한 객체를 생성해야 할 때, 예를 들어, 페이지 로그인 상자는 로그인 상자가 하나만 있을 수 있으므로, 싱글턴의 개념을 사용하여 구현할 수 있습니다. 당신이 싱글턴의 개념을 사용하지 않는다면, 결과는 매번 로그인 상자를 다시 생성하고 표시해야 할 때마다 성능에 영향을 미칠 수 있습니다. 또는 실수로 두 개의 로그인 상자가 표시될 수 있습니다.

위는 우리가 여러분께 공유한 JS의 싱글턴 모드 구현에 대한 학습心得입니다. 언어教程의 지지에 감사합니다.

성명서: 본문은 인터넷에서 가져왔으며, 저작권은 원저자에게 있으며, 인터넷 사용자가 자발적으로 기여하고 자체로 업로드한 내용입니다. 본 사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않으며, 관련 법적 책임을 부담하지 않습니다. 저작권 문제가 있음을 발견하면 메일을 notice#w로 보내 주시기 바랍니다.3codebox.com（메일을 보내면，#을 @으로 변경하여 신고하십시오. 관련 증거를 제공하시면, 실제로 확인되면,本站은 즉시 위반 내용을 삭제합니다.）