<html>

 <body>

 <button id="loginBtn">登录</button>

 </body>

<script>

 var createLoginLayer = function(){

 var div = document.createElement( 'div' );

 div.innerHTML = '我是登录浮窗';

 div.style.display = 'none';

 document.body.appendChild( div );

 return div;

 };

 document.getElementById( 'loginBtn' ).onclick = function(){

 var loginLayer = createLoginLayer();

 loginLayer.style.display = 'block';

 };

</script>

</html>

当我们每次点击登录按钮的时候，都会创建一个新的登录浮窗 div。虽然我们可以在点击浮窗上的关闭按钮时（此处未实现）把这个浮窗从页面中删除掉，但这样频繁地创建和删除节点明显是不合理的，也是不必要的。

var getSingle = function( fn ){

 var result;

 return function(){

 return result || ( result = fn .apply(this, arguments ) );

 }

}; 

var createLoginLayer = function(){

 var div = document.createElement( 'div' );

 div.innerHTML = '我是登录浮窗';

 div.style.display = 'none';

 document.body.appendChild( div );

 return div;

}; 

var createSingleLoginLayer = getSingle( createLoginLayer ); 

document.getElementById( 'loginBtn' ).onclick = function(){

 var loginLayer = createSingleLoginLayer();

 loginLayer.style.display = 'block';

};

在 getSinge 函数中，实际上也提到了闭包和高阶函数的概念。单例模式是一种简单但非常实用的模式，特别是惰性单例技术，在合适的时候才创建对象，并且只创建唯一的一个。更奇妙的是，创建对象和管理单例的职责被分布在两个不同的方法中，这两个方法组合起来才具有单例模式的威力。

js设计模式之惰性单例模式的更多相关文章

  1. JS设计模式一：单例模式

    单例模式       单例模式也称作为单子模式,更多的也叫做单体模式.为软件设计中较为简单但是最为常用的一种设计模式.       下面是维基百科对单例模式的介绍:     在应用单例模式时,生成单例 ...

  2. [JavaScript设计模式]惰性单例模式

    惰性单例模式 之前介绍了JS中类的单例模式,这次我们讨论下单例模式的应用.在众多网站中,登录框的实现方式就是一个单例,点击一次就展示一次,所以我们可以在页面加载好的时候就创建一个登录框,点击页面上的登 ...

  3. [JS设计模式]：单例模式（1）

    什么是单例模式 所谓单例,就是一个类只有一个实例,实现的方法一般是先判断是否存在实例,如果存在就直接返回,如果不存在就创建了再返回.这样确保了一个类只有一个实例对象. 实现的单例有很多种方式,最简单的 ...

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

    单例模式的定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池.全局缓存.浏览器的window对象.在js开发中,单例模式的 ...

  5. JS设计模式（一）

    刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...

  6. JS设计模式——5.单体模式

    JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html   单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...

  7. js设计模式总结1

    js设计模式有很多种,知道不代表会用,更不代表理解,为了更好的理解每个设计模式,对每个设计模式进行总结,以后只要看到总结,就能知道该设计模式的作用,以及模式存在的优缺点,使用范围. 本文主要参考张容铭 ...

  8. 【Javascript设计模式1】-单例模式

    <parctical common lisp>的作者曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型 ...

  9. 【白话设计模式四】单例模式(Singleton)

    转自:https://my.oschina.net/xianggao/blog/616385 0 系列目录 白话设计模式 工厂模式 单例模式 [白话设计模式一]简单工厂模式(Simple Factor ...

随机推荐

  1. 自学Zabbix9.3 zabbix客户端自动注册

    自学Zabbix9.3 zabbix客户端自动注册 1. 概述 网络自动发现配置,只要就是zabbix server去扫描一个网段,把在线的主机添加到Host列表中.但是Active agent是主动 ...

  2. iOS masonry九宫格 单行 多行布局

    Masonry是个好东西,在当前尺寸各异的iOS开发适配中发挥着至关重要的作用,由于项目中Masonry布局用的比较多,对于UI布局也有了一些自己的理解,经常会有人问道Masonry布局九宫格要怎么布 ...

  3. [数据结构]C语言栈的实现

    有始有终,所以我准备把各种数据结构都讲一次,栈也分顺序存储和链式储存,这里我们选择链式存储来讲,顺序存储没有难度(链式其实也是) 作为数据结构中最简单的栈,这里不会说太多,首先考虑一下下面的model ...

  4. java环境配置教程jde,jre

    控制面板--所有控制面板项--系统--高级系统设置--环境变量 JAVA_HOME = D:\java\jdk CLASSPATH = .;%JAVA_HOME%\lib;%JAVA_HOME%\li ...

  5. K：枚举的线程安全性及其序列化问题

      枚举是如何保证线程安全的且其在序列化和反序列化的操作中是单例的?   要想看源码,首先得有一个类吧,那么枚举类型到底是什么类呢?是enum吗?答案很明显不是,enum就和class一样,只是一个关 ...

  6. 只要发生ajax请求时加载旋转的按钮

    定义一个变量 全局 c 只要发生ajax时给c++ 当ajax请求success或者error时,c--; 对加载的按钮添加个事件   监听 c  如果c得值没变化  则隐藏按钮   如果变化了则显示 ...

  7. js 数组API之forEach、map的用法

    forEach语法: arr.forEach(function(value, index, array){--}) 实例: // forEach ,,,,]; arr.forEach(function ...

  8. 浅谈MVC MVP MVVM

    复杂的软件必须有清晰合理的架构,否则无法开发和维护. MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用. 它本身很容易理解,但是要讲清楚,它与衍生的 MVP ...

  9. css3实现图片旋转效果

    css3实现图片旋转效果 近期实现一个消息提醒(醒目)的需求页面.想到了css3的旋转动画,故使用. =============== 鼠标悬浮时候,图片可以旋转,放大 rotate(360deg) s ...

  10. JAVA定时任务调度之Timer入门详解（一）

    所谓的Timer,打开jdk的api文档可以看到它的定义:一种工具,线程用其安排以后在后台线程中执行的任务.可安排任务执行一次,或者定期重复执行.通俗点讲就是说:有且仅有一个后台线程对多个业务线程进行 ...