JavaScript设计模式----单例模式

原创 2016年07月23日 11:05:50

声明:这个系列为阅读《JavaScript设计模式与开发实践》 —-曾探@著一书的读书笔记

1.单例模式的特点和定义

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

2.传统面向对象语言的单例模式

2.1传统语言描述的单例模式JavaScript实现

var Singleton = function(name) {
    this.name = name;
    this.instance = null;
};

Singleton.prototype.getName = function() {
    alert(this.name);
};

Singleton.getInstance = function(name) {
    if (!this.instance) {
        this.instance = new Singleton(name);
    }

    return this.instance;
};

var a = Singleton.getInstance('seven1');
var b = Singleton.getInstance('seven2');

或者使用闭包的形式创建单例模式,同时符合惰性单例的特性

var Singleton = function(name) {
    this.name = name;
};

Singleton.prototype.getName = function() {
    alert(this.name);
};

//利用闭包的特性创建单例,同时符合惰性单例的特性
Singleton.getInstance = (function(name) {
    var instance;
    return function(name){
        if (!instance) {
            instance = new Singleton(name);
        }
    }
})();

var a = Singleton.getInstance('seven1');
var b = Singleton.getInstance('seven2');

console.log(a===b);   //true

2.2透明的单例模式:

//反面的单例模式的例子

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('seven1');
var b = new CreateDiv('seven2');

这样编写单例模式的缺点:

为了把instance封装起来,我们使用了自执行的匿名函数和闭包,并且让这个匿名函数返回真正的Singleton构造方法,这增加了一些程序的复杂度。

CreateDiv的构造函数负责了两件事情。1.创建对像和执行初始化init方法,第二是保证只有一个对象。不符合设计模式中的单一职责的概念。

2.3引入代理实现单例模式

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('seven1');
var b = new ProxySingletonCreateDiv('seven2');

引入代理实现单例模式的特点:

我们负责管理单例的逻辑移到了代理类ProxySingletonCreateDiv中。这样一来,CreateDiv就变成了一个普通的类,他跟ProxySingletonCreateDiv组合起来可以达到单例模式的效果。

3.JavaScript的单例模式对比

在以上的代码中实现的单例模式都混入了传统面向对象语言的特点。而没有利用JavaScript这们语言的特点来实现一个单例模式。

3.1惰性单例的例子

概念描述:

惰性单例指的是在需要的时候才创建对象的实例。惰性单例是单例模式的重点。

var createLoginLayer=(function(){
    var div;
    return function(){
        if(!div){
            div=document.createElement('div');
            //创建一个登录框
        }
        return div;
    }
})();

document.getElementById('loginBtn').onclick=function(){
    var loginLayer=createLoginLayer();
    loginLayer.style.display='block';
};

代码解析:
这里的对惰性单例的实现主要是只有单例了网页上的登录按钮,才会去创建,登录框的dom节点,并且只是创建一次。

3.2通用的单例模式例子

根据3.1的代码示例,我们的单例对像,但是并不是通用的,比如我们要创建的不是div而是iframe,那要怎么办呢?

//获取单例
var getSingle = function(fn){
    var result;
    return function (){
        return result || (result=fn.apply(this,arguments));
    };
};

//创建div登录框
var createLoginLayer=function (){
    var div= document.createElement('div');
    div.innerHTML='我是登录框';
    document.body.appendChild(div);
    return div;
};

//创建iframe的dom节点
var createIframe=function(){
    //创建irame节点的代码
}

var createSingleLoginLayer = getSingle(createLoginLayer);
var createSingleIframe=getSingle(createIframe);

var loginLayer1 = createSingleLoginLayer();
var loginLayer2 = createSingleLoginLayer();

var iframe1=createSingleIframe();
var iframe2=createSingleIframe();

console.log(loginLayer1 === loginLayer2);

通用的单例创建的例子就是通过封装一个getSingle需要实现单例模式的对象。而且只是会只创建一次。因为使用了闭包的原因通过getSingle创建的result会在内存中一直存在不会销毁(除非页面关闭,或者手动释放)。

总结:

单例模式是一种简单但非常实用的模式,特别是惰性单例技术,在合适的时候才创建对像,并且只创建唯一的一个。更奇妙的是,创建对象和管理单例的职责被分布在两个不同的方法中,这两个方法组合起来才具有单例模式的威力。


图片名称

版权声明:本文为博主原创文章,未经博主允许不得转载。

Javascript 设计模式 单例

一直很喜欢Js,,,今天写一个Js的单例模式实现以及用法。 1、单例模式的写法 单例模式写法相当简单: var singleTon = { m1: "memeber ...
  • lmj623565791
  • lmj623565791
  • 2014年06月13日 16:09
  • 16036

javascript设计模式 使用ES6语法

参考《javascript设计模式》[美]Addy Osmani一书,下面介绍使用javascript经常会使用的主要设计模式。本博文为ES6语法的博客,还有使用ES5语法的【上】【下】两篇。 主要...
  • future_todo
  • future_todo
  • 2017年01月03日 10:26
  • 2625

JavaScript设计模式----单例模式

声明:这个系列为阅读《JavaScript设计模式与开发实践》 —-曾探@著一书的读书笔记1.单例模式的特点和定义 保证一个类仅有一个实例,并且提供一个访问它的全局访问点。 2.传统面向对象语言的...
  • yisuowushinian
  • yisuowushinian
  • 2016年07月23日 11:05
  • 3985

JavaScript设计模式 Item 6 --单例模式Singleton

1、单例模式的使用场景在使用一种模式之前,我们最好要知道,这种模式的使用场景。用了这么久的单例模式,竟全然不知!用它具体有哪些好处呢? 1.可以用它来划分命名空间(这个就是就是经常用的了) 2.利用分...
  • i10630226
  • i10630226
  • 2015年11月06日 13:26
  • 2228

Javascript设计模式理论与实战:单例模式

本文将从最基础的理论开始,讲述单例模式的基本概念和实现,最后用一个例子来讲述单例模式的应用。理论基础概念单例模式,顾名思义就是只有一个实例存在。通过单例模式可以保证系统中...
  • xingaichenai
  • xingaichenai
  • 2016年11月06日 22:40
  • 105

深入理解JavaScript系列(25):设计模式之单例模式

介绍 从本章开始,我们会逐步介绍在JavaScript里使用的各种设计模式实现,在这里我不会过多地介绍模式本身的理论,而只会关注实现。OK,正式开始。 在传统开发工程师眼里,单例就是保证一...
  • yangnan32
  • yangnan32
  • 2014年05月09日 19:09
  • 265

【学习笔记javascript设计模式与开发实践(单例模式)----4】

第4章单例模式  单例模式的定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点。  单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池、全局缓存、浏览器的window对象。在j...
  • pigpigpig4587
  • pigpigpig4587
  • 2015年10月20日 17:30
  • 660

javascript设计模式初探--单例模式

一、什么是单例模式: Ensure a class only has one instance, and provide a global point of access to it.,即 “保证一个...
  • zhuanyemanong
  • zhuanyemanong
  • 2017年06月21日 10:51
  • 220

Javascript设计模式理论与实战:单例模式

在Javascript中,单例模式是一种最基本又经常用到的设计模式,可能在不经意间就用到了单例模式。 本文将从最基础的理论开始,讲述单例模式的基本概念和实现,最后用一个例子来讲述单例模式的应用。 ...
  • ls870061011
  • ls870061011
  • 2015年12月10日 21:18
  • 234

JavaScript设计模式学习之单例模式

一、单例模式介绍                 单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例类的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,...
  • u013680464
  • u013680464
  • 2015年11月04日 20:27
  • 232
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript设计模式----单例模式
举报原因:
原因补充:

(最多只允许输入30个字)