1、单例模式的核心是确保只有一个实例,并提供全局访问。

2、惰性单例 指的是在需要的时候才创建对象实例。

如在页面中创建唯一div 普通做法

var createDiv = (function(){
    var div;
    return function(){
        if(!div){
            div = document.createElement("div");
            div.style.width="100px";
            div.innerHTML = "fdsafdsafdsafdsa";
            div.style.display = 'none';
            document.body.appendChild(div);
            return div;
        }
        return div;
    }
})();

document.getElementById("btn").onclick = function(){
    var loginlayer = createDiv();
    loginlayer.style.display = 'block';
}

应用通用惰性单例

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

var createDiv = function(){
    var div = document.createElement("div");
    div.style.width="100px";
    div.innerHTML = "fdsafdsafdsafdsa";
    document.body.appendChild(div);
    return div;
}

var createSingleDiv = getSingle(createDiv);
document.getElementById("btn").onclick = function(){
    var loginlayer = createSingleDiv();
    loginlayer.style.display = 'block';
}

学习javascript设计模式之单例模式的更多相关文章

  1. JavaScript设计模式之单例模式【惰性单例】

    在提高开发水平,往中高级前端工程师中,利用设计模式是必不可少的一条道路.掌握设计模式的思想远远比硬套重要,因为设计模式是一种思想,不局限于开发语言.但实际上由于语言的特性不同,往往在实现的时候会有不少 ...

  2. 再起航,我的学习笔记之JavaScript设计模式10(单例模式)

    单例模式 单例模式(Singleton) : 又被称为单体模式,是只允许实例化一次的对象类.一个类有且仅有一个实例,并且自行实例化向整个系统提供. 命名空间 单例模式可能是JavaScript中我们最 ...

  3. JavaScript的学习--JavaScript设计模式的总结

    这篇博客只是自己对设计模式的理解的备忘~ 看完了<JavaScript设计模式>这本书,一直没有写博客记录一下,最近抽出时间来重读了一下,就顺便记录一下~ 如果你只是想粗略了解一下Java ...

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

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

  5. JavaScript设计模式_01_单例模式

    最近项目不太忙,难得有时间看看书,平时挺喜欢js这门语言.也看过很多高级教程,觉得自己还是比较热衷于js的设计模式.这一次重温一下<JavaScript设计模式与开发实践>,开篇为单例模式 ...

  6. 为什么学习JavaScript设计模式,因为它是核心

    那么什么是设计模式呢?当我们在玩游戏的时候,我们会去追求如何最快地通过,去追求获得已什么高效率的操作获得最好的奖品:下班回家,我们打开手机app查询最便捷的路线去坐车:叫外卖时候,也会找附近最近又实惠 ...

  7. JavaScript设计模式,单例模式!

    单例设计模式:保证一个类仅有一个实例,并且提供一个访问它的全局访问点.有些对象只需要一个,这时可用单例模式. 传统的单例模式 和new 创建对象的调用不一样 调用者要调用xxx.getInstance ...

  8. 第一章 --- 关于Javascript 设计模式 之 单例模式

    首先我们对单例模式先进行理论上的讲解,接下来,我们再通过具体的代码示例,来讲解,这个单例模式的使用场景和这种模式的优缺点 (这个系列的所有关于设计模式的都是面向Javascript) 一.理论定义: ...

  9. JavaScript设计模式之单例模式

    一.单例模式概念 单例就是保证一个类只有一个实例,实现方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象.在JavaScript里,单例作为一个 ...

随机推荐

  1. 解决cocos2dx 3.x 导入cocostudio的ui界面出现错位问题

    笔者今天发现导入cocostudio的ui界面时,会有部分控件出现错位的现象,后来我看了一下源码,发现是部分控件是没有继承 Layout类,导致不能设置控件位置造成,原因可以看看cocos2dx 源码 ...

  2. 洛谷 2387/BZOJ 3669 魔法森林

    3669: [Noi2014]魔法森林 Time Limit: 30 Sec  Memory Limit: 512 MBSubmit: 3765  Solved: 2402[Submit][Statu ...

  3. HTML5一些特殊效果分享地址集合

    页面预加载图片原生js: http://www.cnblogs.com/st-leslie/articles/5274568.html HTML5 FileReader读取本地文件: http://n ...

  4. Verilog之语句位置

    1.if语句.case语句必须放在always过程语句块中. 2.verilog的系统函数比如:\(display/\)monitor必须放在initial 过程语句块中.这点尚为理解为何,但必须这样 ...

  5. 配置wamp开发环境之mysql的配置

    此前我已经将wamp配置的Apache.PHP.phpmyadmin全部配置完成,以上三种配置参照 配置wamp开发环境 下面我们来看看mysql的配置,这里用的是mysql5.5.20,下载地址: ...

  6. 封装,封装的原理,Property ,setter ,deleter,多态,内置函数 ,__str__ , __del__,反射,动态导入模块

    1,封装 ## 什么是封装 what 对外隐藏内部的属性,以及实现细节,并给外部提供使用的接口 学习封装的目的:就是为了能够限制外界对内部数据的方法 注意 :封装有隐藏的意思,但不是单纯的隐藏 pyt ...

  7. GoF23种设计模式之行为型模式之策略模式

    传送门 ☞ 轮子的专栏 ☞ 转载请注明 ☞ http://blog.csdn.net/leverage_1229 1概述           定义一系列算法,把它们一个个都封装起来,并且让它们可以相互 ...

  8. pyecharts用法,本人亲测,陆续更新

    主题 除了默认的白色底色和dark之外,还支持安装扩展包 pip install echarts-themes-pypkg echarts-themes-pypkg 提供了 vintage, maca ...

  9. Power Calculus UVA - 1374 迭代加深搜索

    迭代加深搜索经典题目,好久不做迭代加深搜索题目,拿来复习了,我们直接对当前深度进行搜索,注意剪枝,还有数组要适当开大,因为2^maxd可能很大 题目:题目链接 AC代码: #include <i ...

  10. MySQL-状态Waiting on empty queue引申

    MySQL 事件调度器示例演示 我们大家都知道MySQL 事件调度器是在 MySQL 5.1 中新生的一个较为特殊的功能,其可以作为定时任务调度器,来取代部分原先只能用操作系统任务调度器才能完成的定时 ...