定义:

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

实现原理:

利用闭包来保持对一个局部变量的引用,这个变量保存着首次创建的唯一的实例;

主要用于:

全局缓存、登录浮窗等只需要唯一一个实例的时候;

Part1、命名空间的管理员
开发中经常会遇到不同的人定义的变量使用的单词可能会重复,此时就需要用到命名空间来约束每个人定义的变量来解决这类问题。比如小明的代码,他可以定义一个xiaoZhang的空间。同样,我们平时使用的vue定义use()方法我们可以通过vue.use()来访问

假如小张想实现这样一个效果,点击按钮正方形的背景变成红色

  1. <style>
  2. .squareStyle {
  3. width: 100px;
  4. height: 100px;
  5. background-color: yellow;
  6. }
  7. </style>
  8. <body>
  9. <button id="btn">变黄</button>
  10. <div id="square" class="squareStyle"></div>
  11. </body>
  12. <script>
  13. var Zhang = {
  14. a: function (id) {
  15. return document.getElementById(id)
  16. }, //获取正方形
  17. b: function (id, key, value) {
  18. this.a(id).style[key] = value
  19. } //这里为什么用this?a,b方法都在单例对象Zhang 中,而当前对象中的this指代当前对象,所以我们还可以在b方法中通过this.a()来使用Zhang单例对象中的a方法
  20. } //创建空间
  21. document.getElementById('btn').onclick = function () {
  22. Zhang.b('square', 'backgroundColor', 'red')
  23. }
  24. </script>

this在javascript中的运用详细可以看https://www.jianshu.com/p/041c683f6031这篇文章

Part2、惰性单例
需要的时候才被创建对象实例,就是需要的时候才动态调用,而不是页面加载好的时候就创建

方式一:页面加载好的时候调用,只不过是隐藏状态
  1. var createLoginAlert = (function () {
  2. console.log('创建了')
  3. var div = document.createElement('div')
  4. div.innerHTML = '我是弹窗'
  5. div.style.display = 'none'
  6. document.body.appendChild(div)
  7. return div
  8. })() //自执函数
  9. document.getElementById('btn').onclick = function () {
  10. createLoginAlert.style.display = 'block' //点击的时候显示
  11. }

现在有个问题,就是用户可能只是浏览页面,并不需要弹窗内容,接下来方式二是对方式一的优化

方式二:点击的时候才创建实例
  1. <button id="btn">提交</button>
  2. var createLoginAlert = function () {
  3. var div = document.createElement('div')
  4. div.innerHTML = '我是弹窗'
  5. div.style.display = 'none'
  6. document.body.appendChild(div)
  7. return div
  8. }
  9. // 点击提交时候创建实例
  10. document.getElementById('btn').onclick = function () {
  11. var popUp = createLoginAlert()
  12. popUp.style.display = 'block'
  13. }

每一次点击的时候重新创建实例,虽然我们可以在点击浮窗上的关闭按钮时(此处未实现)把这个浮 窗从页面中删除掉,但这样频繁地创建和删除节点明显是不合理的,也是不必要的

方式三:用一个变量来判断是否已经创建过登录浮窗,没有-->创建,有-->复用
  1. var createLoginAlert = (function () {
  2. var div; //变量
  3. return function () {
  4. if (!div) {
  5. console.log('没有DIV')
  6. div = document.createElement('div')
  7. div.innerHTML = '我是弹窗'
  8. div.style.display = 'none'
  9. document.body.appendChild(div);
  10. return div
  11. }
  12. return div
  13. }
  14. })()
  15. // 点击提交时候创建实例
  16. document.getElementById('btn').onclick = function () {
  17. var popUp = createLoginAlert()
  18. popUp.style.display = 'block'
  19. }

Part 3 对象池

对象池维护一个装载着空闲对象的池子,如果需要对象的时候,不是直接new,而是从对象池中取出,如果对象池中没有空闲对象,则新建一个空闲对象。对象池技术的使用非常广泛,http连接池和数据库连接池都是其代表。在web前端中,对象池使用最多的使得DOM有关的操作。

对象池的实现

  1. var objectPoolFactory=function(createObjFn){
  2. var pool=[],
  3. create=function(){
  4. var obj=pool.length>0?pool.shift():createObjFn.apply(this,arguments);
  5. return obj;
  6. },
  7. recover=function(obj){
  8. pool.push(obj);
  9. };
  10. return {
  11. create:create,
  12. recover:recover,
  13. };

};

Part 4、 变量缓存

如果ret不是基本变量,而是一个对象,则可以用来实现缓存,在jQuery的源代码中有很多这样的例子。

  1. var cache={};//一般定义为一个全局变量
  2. var tmp=cache[key]||fn(key);

查阅文献:
《javascript设计模式》《javascript设计模式及开发实践》
分享文档:
链接: https://pan.baidu.com/s/1Twpu1hM2YaPsNEqgiXsAZQ 密码: i8jf
仅限知识分享,请勿商业使用,谢谢

javascript单例模式及开发实践的更多相关文章

  1. JavaScript设计模式与开发实践 - 单例模式

    引言 本文摘自<JavaScript设计模式与开发实践> 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返 ...

  2. 《JavaScript设计模式与开发实践》整理

    最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...

  3. 《javascript设计模式与开发实践》--- (单一职责原则)

    看的这本书叫<JavaScript设计模式与开发实践> 先规划一下看书的顺序,基础知识我已经大概的浏览了一遍了,没有留下笔记,以后有时间还会补上.本来打算顺着看的.但是我感觉我很难短时间内 ...

  4. 《Javascript设计模式与开发实践》--读书笔记

    第2章 this call apply bind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被bind的第一个参数指定,其余的参数将作为新函数的参数供调用时使用. bind( ...

  5. JavaScript设计模式与开发实践 - 观察者模式

    概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...

  6. JavaScript设计模式与开发实践 - 策略模式

    引言 本文摘自<JavaScript设计模式与开发实践> 在现实中,很多时候也有多种途径到达同一个目的地.比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路. 如果没有时间但 ...

  7. JavaScript设计模式与开发实践——读书笔记1.高阶函数(上)

    说来惭愧,4个多月未更新了.4月份以后就开始忙起来了,论文.毕设.毕业旅行等七七八八的事情占据了很多时间,毕业之后开始忙碌的工作,这期间一直想写博客,但是一直没能静下心写.这段时间在看<Java ...

  8. 《JavaScript设计模式与开发实践》读书笔记-基础知识

    笔记内容多摘录自<JavaScript设计模式与开发实践>(曾探著),侵删. 面向对象的JavaScript 1. 动态需要类型和鸭子类型 鸭子类型 如果它走起路来像鸭子,叫起来也是鸭子, ...

  9. javascript设计模式与开发实践阅读笔记(4)——单例模式

    定义 单例模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 具体来说,就是保证有些对象有且只有一个,比如线程池.全局缓存.浏览器中的window 对象等.在js中单例模式用途很广,比如登录 ...

随机推荐

  1. maven工程 java 实现文件上传 SSM ajax异步请求上传

    java ssm框架实现文件上传 实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传的文件 首先springmvc的配置文件要配置上传文件解析器: <!- ...

  2. [翻译]简单的实现一个Promise

    英文原文为:https://www.promisejs.org/implementing/ 1. 状态机 因为 promise 对象是一个状态机,所以我们首先应该定义将要用到的状态. var PEND ...

  3. java微信公众号开发token验证失败的问题及解决办法

    本文引自http://m.blog.csdn.net/qq_32331997/article/details/72885424 微信公众平台服务器配置时,需要引入token,但是提交的时候总是提示to ...

  4. Scala学习笔记(二)

    Scala面向对象: 类: 声明类(一个源文件中可以包含很多public的类) getter和setter 构造函数(主构造器和附属构造器) 继承(extends) 重写父类方法(override d ...

  5. thoughtworks面试题分析与解答

    题目描述 A squad of robotic rovers are to be landed by NASA on a plateau on Mars. This plateau, which is ...

  6. VLOOKUP函数常用套路大全

    今天和大家来说说VLOOKUP的那些事儿,深入了解一下VLOOKUP函数的各种用法,看看这位大众情人还藏着多少不为人知的秘密.函数的语法为:VLOOKUP(要找谁,在哪儿找,返回第几列的内容,精确找还 ...

  7. Flume搭建

    [root@hadoop01 src]# mkdir flume [root@hadoop01 src]# ll 总用量 0 drwxr-xr-x. 2 root root  6 4月   7 201 ...

  8. DDOS和cc攻击的防御

    DDOS和cc攻击的防御 author:headsen chen    2017-10-21  10:47:39 个人原创,转载请注明作者,否则依法追究法律责任: DDOS攻击形式:黑客挟持多个电脑( ...

  9. 3.21电脑重装“operation not found system ”和xp分盘”分配表有标记为已使用的未用簇”

    问题一.是用光盘重装系统后重启,提示operation not found system ①考虑是系统问题,没装好,还是引导文件丢失;换新盘装,若还是一样; ②分析认为是分区问题,必须是活动分区+主分 ...

  10. [Oracle]UNIX与Windows 2000上Oracle的差异(I)

    作者:Ian Adam & David Stien, SAIC Ltd 日期:19-Dec-2003 出处:http://www.dbanotes.net翻译:Fenng ---------- ...