Compartilhando exemplos de implementação do padrão Singleton em JavaScript

Padrão singleton tradicional

Garantir que uma classe tenha apenas um exemplo e forneça um ponto de acesso global para ele.

Implementação da ideia nuclear do singleton

Não é mais do que usar uma variável para marcar se já foi criado um objeto para uma classe, se sim, ao obter a instância da classe novamente, retorna o objeto criado anteriormente. Vamos implementar essa ideia forçadamente em JavaScript, veja o código:

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;　　　　　　 }
})();

Nós obtemos o objeto único da classe Singleton através de Singleton.getInstance, isso é definitivamente correto, mas o JavaScript não tem o conceito de classe, então forçar a implementação do pensamento tradicional de singleton não tem qualquer significado, e esse código é tão ruim quanto longo (na verdade, não me sinto confortável vendo isso). Vamos usar closures do JavaScript para implementar um singleton, veja o código:

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

Pode ver, realmente usamos闭包 para implementar um singleton, mas esse código ainda é altamente acoplado. A função de construção CreateDiv é responsável por duas coisas: criar o objeto e executar o método de inicialização init, e garantir que haja apenas um objeto. Esse código é de responsabilidade não clara, e agora vamos dividir essas duas tarefas, a função de construção é responsável por construir o objeto, e a decisão de devolver o objeto existente ou construir um novo e devolver é delegada a outra função para ser completada, na verdade, isso também é para atender a um pensamento de programação: o princípio de responsabilidade única. Assim, o código pode melhor desacoplar, veja o código a seguir:

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

Pode ver, atualmente nossa função de construção CreateDiv é responsável apenas por construir objetos, e se devolver o objeto existente ou construir um novo e devolver, essa tarefa é delegada à classe proxySingletonCreateDiv para lidar, assim o código parece mais confortável (zhuang) e (bi)!

Por fim, aqui está um código altamente abstrato do padrão Singleton, o essencial do singleton perezoso!

//Abstração do padrão Singleton, separação da função de criação do objeto e do julgamento se o objeto já foi criado
  var getSingle = function (fn) {
    var result;
    return function () {
      return result || (result = fn.apply(this, arguments));
    };
  };

O parâmetro fn é nossa função construtora, podemos passar qualquer função construtora necessária para gerar um novo singleton perezoso. Por exemplo, se passarmos uma função construtora para criar uma namorada e chamarmos getSingle(), podemos gerar uma nova namorada. Se chamarmos getSingle() novamente, também retornará a namorada criada anteriormente. Quanto à nova namorada - ela não existe.

Cenários comuns do singleton

Quando precisamos gerar um único objeto, por exemplo, uma caixa de login na página, que pode ter apenas um login, então podemos implementá-lo com a ideia de singleton, claro, você pode implementá-lo sem a ideia de singleton, o resultado pode ser que você precisará gerar e exibir uma nova caixa de login toda vez que precisar exibi-la (consumindo desempenho), ou acidentalmente exibir duas caixas de login.

Aquilo é o que compartilhamos com vocês sobre os conhecimentos de implementação do padrão Singleton do JavaScript. Agradecemos o apoio ao Tutorial Yell.

Declaração: O conteúdo deste artigo é extraído da Internet, pertence ao respectivo proprietário. O conteúdo é contribuído e carregado voluntariamente pelos usuários da Internet. Este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por questões legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Apenas após a verificação, o site deletará o conteúdo suspeito de violação de direitos autorais.>