javascript 设计模式1----单例模式

定义:保证一个类仅有一个实例,并提供一个访问的全局接口:

就是收:当我们 var a = new a(); var a1 = new a()是;a与a1是相等的。怎么实现呢,就是第一次实例化。第二不在实例,只是返回第一次的实例化:

附上通用的惰性单例思路:

Singleton.getInstance = (function () {
    var instance = null;
    return function (name) {
        if( !instance){
            instance = new Singleton(name);
        }
        return instance;
    }
})()

  一个书上的登录框的例子:

var createLoginLayer = (function () {
    var div;
    return function () {
        if(!div){
            div = document.createElement(‘div‘);
            div.innerHTML = ‘我是登录‘;
            div.style.display = ‘none‘;
            document.body.appendChild(div);
        }
        return div;
    }
})()

    document.getElementById(‘div1‘).onclick = function () {
        var loginLayer = createLoginLayer();
        loginLayer.style.display = ‘block‘;
    }

通用的惰性单例:

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 = ‘WOSHI DENGLU‘;
    div.style.display = ‘none‘;
    document.body.appendChild(div);
    return div;
}

var createSingleLoginLayer = getSingle(createLoginLayer);

    document.getElementById(‘div1‘).onclick = function () {
        var loginLayer = createSingleLoginLayer();
        loginLayer.style.display = ‘block‘;
    }
    //在创建一个唯一的iframe

    var createSingleframe = getSingle(function () {
        var iframe = document.createElement(‘iframe‘);
        document.body.appendChild(iframe);
        return iframe;
    })

    document.getElementById(‘div1‘).onclick = function () {
        var loginLayer = createSingleframe();
        loginLayer.src = ‘http://baidu.com‘
    }
时间: 2024-10-13 02:34:44

javascript 设计模式1----单例模式的相关文章

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

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

「设计模式」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设计模式---(单例模式学习)

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

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

1.单例模式的核心是确保只有一个实例,并提供全局访问. 2.惰性单例 指的是在需要的时候才创建对象实例. 如在页面中创建唯一div 普通做法 var createDiv = (function(){    var div;    return function(){        if(!div){            div = document.createElement("div");            div.style.width="100px"; 

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

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

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

单例模式:又被称为单体模式,是只允许实例化一次的对象类. 运用: 1.用一个对象来规划一个命名空间(如:JQuery库,单例模式就为它提供了一个命名空间),井井有条地管理对象上的属性与方法. 2.通过单例模式来管理代码库的各个模块 模块化的概念由来已久,并且在JS中也有很长久的使用历史.通常我们在编写代码时,会将复杂的问题根据实际情况进行合理的拆分,让代码更具备可读性与可维护性.因此一个模块可以理解为整体的一部分.而且随着JS应用复杂度的提高,模块化的应用也变成了必须. 在之前的JS中,没有专门