javascript 设计模式 --单例模式

2019-10-12 admin

单例模式定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点。 单例模式场景:有一些对象往往只需要有一个,比如线程池、全局缓存浏览器中的Windows对象等 1、实现单例模式 要实现一个标准的单例模式并不复杂,无非是用一个变量来标志当前是否已经为某个类创建过对象,如果是则在下一次获取该类的实例时,直接返回之前创建的对象 image.png 或者:

     var Singleton = function(name) {
        this.name = name;
    }
    Singleton.prototype.getName = function() {
        console.log(this.name)
    }
    Singleton.getInstance = (function(name) {
        var instance = null
        return function(name) {
            if(!instance) {
                instance = new Singleton(name)
            }
            return instance
        }
    })()
    var a = Singleton.getInstance('aa')
    var b = Singleton.getInstance('bb')
    console.log(a === b) // true

但是这种方法增加了类的“不透明性”,Singleton必须知道这是一个单例类,且getInstance方法是不透明的,使用必须知道又该方法,当我们打印console.log(new Singleton(‘cc’)),结果如下: image.png

2、透明的单例模式 目的:创建该类时候,可以像使用其他普通类一样; 例子:我们将创建一个CreateDiv单例类,它的作用是在页面中创建唯一的div节点 image.png image.png 这里可以看到当我们console.log(b)时,构造函数html的值还是’marin’,到这里我要明确一点 单例模式定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点。 但是它还是有一些缺点。未了把判断的标志变量instance封装起来,我们使用了匿名函数(自运行)和闭包,并让让这个匿名函数返回真正的Singleton构造方法,这让阅读起来很难理解,同时增加了程序的复杂程度 var CreateDiv = function(html) {

if(instance) {
    return instance
}
this.html = html;
this.init();
return instance = this

} 这段代码中 CreateDiv的构造函数实际负责两件事,1、创建实例对象(instance=this)并保证只用一个实例if(instance)。2、执行初始化init()。这里还有个缺点(函数的单一职责原则) 假如我们某一天需要用这个类,在页面创建多个div,即要让这个类从单例类变成一个普通的可以生产多个实例的类,那我们就必须改写CreateDiv构造函数,把控制创建唯一的标志变量 var instance去掉,这种修改会带来不必要的烦恼。

3、用代理来实现单例模式 image.png 这样一来就将 CreateDiv变成一普通类,仅仅去创建div, 实现单例模式让ProxySingleton 去实现 单例模式的核心是确保只有一个实例,并提供全局访问

[转载]原文链接:https://segmentfault.com/a/1190000020664025

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77244.html

文章标题:javascript 设计模式 --单例模式

相关文章
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 <span id=“mt9” class=“sent...
2015-11-12
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
JavaScript短路原理精简代码
js中||和&&的特性帮我们精简了代码的同时,也带来了代码可读性的降低,虽然高效,但请灵活使用。 在js逻辑运算中,0、""、null、false、undefined、NaN都会判为false,其他都为t...
2015-11-12
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
《JavaScript快速查询手册》PDF
下载地址:《JavaScript快速查询手册》PDF下载 http://pan.baidu.com/s/130rP8’ 简介: JavaScript快速查询手册 目录 前言 第一部分 命令查询 第二部分 JavaScript语句与运算符 第...
2015-11-16
回到顶部