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

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‘;
}

时间: 2024-10-11 00:33:25

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

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

惰性单例模式 之前介绍了JS中类的单例模式,这次我们讨论下单例模式的应用.在众多网站中,登录框的实现方式就是一个单例,点击一次就展示一次,所以我们可以在页面加载好的时候就创建一个登录框,点击页面上的登录按钮时,用于控制它的显示和隐藏. 代码实现: 登录 ``` --> 这样的问题就是,如果用户进来后所有的操作根本没有用到登录,那创建登录框这个操作就是无用的,所以改进为当用户点击登录按钮时才开始创建登录框,如下: 登录 ``` --> 现在达到了惰性的目的,但失去了单例的效果.每次点击登录都会创

javaScript设计模式---(单例模式学习)

单例模式 一个类只能有一个实例化对象.如页面中的弹出框蒙层,一个页面只需要一个. 实现方式:创建一个类,这个类包含一个方法,这个方法在没有对象存在的情况下,将会创建一个新的实例对象.如果对象存在,这个对象只是返回这个对象的引用. var singleton = (function singleton () { var instance = null; // 存储单例实例的引用 // 创建单例 function init () { // 私有方法和属性 function privateMethod

「设计模式」JavaScript - 设计模式之单例模式与场景实践

单例介绍 上次总结了设计模式中的module模式,可能没有真真正正的使用在场景中,发现效果并不好,想要使用起来却不那么得心应手, 所以这次我打算换一种方式~~从简单的场景中来看单例模式, 因为JavaScript非常灵活,所以在使用设计模式的时候也带来了很强的灵活性,实现单例的方法也有很多,那就需要我们把握住单例模式的核心. 单例模式介绍: 单例模式是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象. 在Ja

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

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>javascript高级语法7-单例模式</title> 6 </head> 7 <body> 8 <script> 9 /*单例模式在js中使用非常频繁: 10 * 1.普通单体 11 * 2.具有局部变量的强大单体 12 * 3.惰性单体

javascript设计模式之单例模式

参考资源:深入理解javascript系列 by Uncle Tom 单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象. 对象字面量是最简单的单例模式: var mySingleton = { property: "a property", method: function () { console.log("this is a method"); } }; 一个简单的单

JavaScript 设计模式之单例模式

一.单例模式概念解读 1.单例模式概念文字解读 单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象.在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象. 2.单利模式概念拟物化解读 买房子要先确认是否有门,没有要联系开发商创建.其次,每一个门都有自己的归属,301归属小王,302归属小李,小王小李属于命名空间,但是一栋楼里有多个小王小李,这些全局命名空

JavaScript设计模式(单例模式)

单例模式是一种简单但非常实用的模式,特别是惰性单例技术,在合适的时候才创建对象,并且只创建唯一的一个.下面我们来逐步了解单例模式的用法. 一.简版单例模式: var Singleton = function(name){ this.name = name; this.instance = null; }; Singleton.prototype.getName = function(){ alert (this.name); }; Singleton.getInstance = function

学习javascript设计模式之中介者模式

1.中介者模式的作用就是解除对象与对象之间的紧耦合关系.增加一个中介者对象后,所有的相关对象都通过中介者来通信,而不是互相引用,所以当一个对象发生改变时,只需要通知中介对象即可.中介者使各对象之间耦合松散,而且可以独立的改变他们之间的交互.中介者模式使网状的多对多关系变成了相对简单的一对多关系. <select id="colorselect"> <option value="">请选择颜色</option> <option

【javascript】javascript设计模式之单例模式

单例模式: 定义:单例模式之所以这么叫,是因为它限制一个类只能有一个实例化对象. 实现方法:判断实例是否存在,如果存在则直接返回,如果不存在就创建了再返回.(确保一个类只有一个实例对象) 特点: 命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象 实现单例的方式 一丶对象字面量 var hero = { name : "timo" sex : "male" method: function(){ console.log("提莫队长正在送命&q