JavaScript设计模式(一)单例模式

保证一个类仅有一个实例,并提供一个访问它的全局访问点

1.一个基本的单例模式

let Singletion = function(name) {
    this.name = name;
}
Singletion.prototype.getName = function() {
    console.log(this.name);
}
Singletion.getInstance = (function(){
    let instance = null;
    if(!instance){
        instance = new Singleton( name );            
    } 
    return instance;
})();

以上代码实现了一个简单的单例模式,但通过该方式创建的单例模式对使用者来说,并不“透明”。因为使用者首先需要只改该类是一个单例类,且需要使用特定的方法getInstance来获取单例。

2.透明的单例模式

let CreateDiv = (function(){
    let instance;
    let CreateDiv = function( html ) {
        if(instance){
            return instance;        
        }    
        this.html = html;
        this.init();
        return instance = this;
    }
    CreateDiv.prototype.init = function(){
        let div = document.createElement('div');
        div.innerHTML = this.html;
        document.body.appendChild(div);
    }
    return CreateDiv;
})();
let a = new CreatDiv('test1');
let b = new CreateDiv('test2');
console.log(a === b);  //true

通过以上代码,我们实现了一个透明的单例类的编写,但是为了将intance封装起来,分别运用了自执行匿名函数和闭包,并且返回了CreateDiv真正的构造方法,这增加了程序的复杂度和阅读难度,且构造函数同时负责了对象的初始化和保证对象唯一两件事情,不满足“单一职责原则”。

3.基于代理的单例模式

let CreateDiv = function (html) {
  this.html = html;
  this.init();
};
CreateDiv.prototype.init = function () {
  let div = document.createElement('div');
  div.innerHTML = this.html;
  document.body.appendChild(div);
}

let ProxySingletonCreateDiv = (function () {
  let instance;
  return function (html) {
    if (!instance) {
      instance = new CreateDiv(html);
    }
    return instance;
  }
})();

let a = new ProxySingletonCreateDiv('testa');
let b = new ProxySingletonCreateDiv('textb');
console.log( a === b)  //true

以上代码通过引入代理类的方式,完成了一个单例模式的编写,将管理单例的逻辑转移到代理类中,CreateDiv类只需要完成创建职责,将两者结合起来,即实现了一个单例模式的效果。

4.JavaScript中的单例模式

在JavaScript中,通常会将全局变量作为单例模式使用,但使用该种方式存在很多问题,比如变量污染。如果需要使用的话,可以使用以下几种方式降低变量污染的影响。

(1)使用命名空间

let namespace = {
  name: 'username',
  func: () => {
    console.log(1);
  }
}

将name和func定义为namespace内的属性,这样就可以将变量和全局作用域隔离开来。

(2)使用闭包

let user = (function () {
  let name = 'username', age = 18;
  return {
    getUserInfo: function () {
      return name + '-' + age;
    }
  }
})();

使用闭包将变量封装在闭包的内部,通过暴露一些接口跟外界通信。

5.惰性单例

不在页面加载时创建对象,而是当对象需要使用时才创建

let createObj = (function () {
  let obj;
  return function () {
    if (!obj) {
      obj.name = 'username';
      obj.age = 18;
    }
    return obj;
  }
})();

function func() {
  let obj = new createObj();
}

但相应的,以上代码仍然不满足“单一职责原则”职责,且不具有通用性,将其改为以下形式:

let getSingle = function (fn) {
  let result;
  return function () {
    return result || (result = fn.apply(this.arguments));
  }
}

let createObj = getSingle(function () {
  let obj;
  obj.name = 'username';
  obj.age = 18;
  return obj;
})

function func() {
  let obj = new createObj();
}

以上代码将创建对象的职责和管理单例的职责分别放置在两个方法里,这两个方法各自独立且互不影响,当将它们结合在一起时,就完成了创建唯一单例对象的功能。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

volit_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值