1、单例模式

保证一个类仅有一个实例，并提供一个访问它的全局访问点

1.1 传统的单例模式

var Singleton=function(name){

    this.name=name;

}

Singleton.prototype.getName=function(){

    alert(this.name);

}

Singleton.getInstance=(function(){

    var instance=null;

    return function (name) {

        if(!instance){

            instance=new Singleton(name);

        }

        return instance;

    }

})();

var a=Singleton.getInstance('sven1');

var b=Singleton.getInstance('sven2');

alert(a===b);//true

1.2 JavaScript中的单例模式

单例模式的核心是确保只有一个实例，并提供全局访问
JavaScript中，可以把全局变量当成单例来使用
var a={};
以这种方式创建对象a，这个对象a是独一无二的，并且在全局作用域可以被访问
全局变量容易造成命名空间污染，使用命名空间可以减少全局变量的数量

var namespace1={

    a:function(){

        alert(1);

    },

    b:function(){

        alert(2);

    }

};

1.3 应用举例--惰性单例

以点击“登陆”按钮弹出登陆框为例

<html>

    <body>

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

    </body>

    <script>

        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('loginBtn').onclick=function(){

                var loginLayer=createLoginLayer();

                loginLayer.style.display='block';

            };

    </script>

</html>

上述示例违反了单一职责原则，创建对象和管理单例逻辑耦合在一起了

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';

};

//当需要创建唯一的iframe用于动态加载第三方页面时

var createSingleIframe=getSingle(function () {

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

    document.body.appendChild(iframe);

});

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

    var loginLayer=createSingleIframe();

    loginLayer.src='http://www.google.com';

};

《JavaScript设计模式与开发实践》读书笔记之单例模式的更多相关文章

JavaScript设计模式与开发实践——读书笔记1.高阶函数(上)
说来惭愧,4个多月未更新了.4月份以后就开始忙起来了,论文.毕设.毕业旅行等七七八八的事情占据了很多时间,毕业之后开始忙碌的工作,这期间一直想写博客,但是一直没能静下心写.这段时间在看<Java ...
JavaScript设计模式与开发实践——读书笔记1.高阶函数(下)
上部分主要介绍高阶函数的常见形式,本部分将着重介绍高阶函数的高级应用. 1.currying currying指的是函数柯里化,又称部分求值.一个currying的函数会先接受一些参数,但不立即求值, ...
Javascript设计模式与开发实践读书笔记（1-3章）
第一章面向对象的Javascript 1.1 多态在面向对象设计中的应用多态最根本好处在于,你不必询问对象“你是什么类型”而后根据得到的答案调用对象的某个行为--你只管调用行为就好,剩下的一切 ...
javascript设计模式与开发实践阅读笔记（8）——观察者模式
发布-订阅模式,也叫观察者模式:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 在JavaScript开发中,我们一般用事件模型来替代传统的观察者模式. ...
javascript设计模式与开发实践阅读笔记（7）——迭代器模式
迭代器模式:指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺 ...
javascript设计模式与开发实践阅读笔记（6）——代理模式
代理模式:是为一个对象提供一个代用品或占位符,以便控制对它的访问. 代理模式的关键是,当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象来控制对这个对象的访问,客户实际上访问的是替身对 ...
javascript设计模式与开发实践阅读笔记（4）——单例模式
定义单例模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 具体来说,就是保证有些对象有且只有一个,比如线程池.全局缓存.浏览器中的window 对象等.在js中单例模式用途很广,比如登录 ...
《JavaScript设计模式与开发实践》笔记第八章发布-订阅模式
第八章发布-订阅模式发布-订阅模式描述发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 发布-订阅模式可以广泛应用于 ...
《JavaScript设计模式与开发实践》笔记第一章
第一章面向对象的JavaScript 动态类型语言和鸭子类型编程语言按照数据类型大体可以分为两类:静态类型语言.动态类型语言. 静态类型语言:在编译时便已确定变量的类型. 优点: 在编译时就能发现 ...
javascript设计模式与开发实践阅读笔记（5）——策略模式
策略模式:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 我的理解就是把各种方法封装成函数,同时存在一个可以调用这些方法的公共函数.这样做的好处是可以消化掉内部的分支判断,使代码效率 ...

随机推荐

Solr集群、KI分词、项目实战
Solr是一个高性能,采用Java开发,基于Lucene的全文搜索服务器.同时对其进行了扩展,提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展并对查询性能进行了优化,并且提供了一个完善 ...
hdu 4687 带花树匹配
其实吧,思路挺简单的,只不过昨天刚学,还有一些东西不太了解,然后就23333333... 吃晚饭回来就A了,我是有多傻啊,这么题都A不掉,不能忍啊... 我们可以先求出哪些边是可能存在于最大匹配中的, ...
wp实例开发精品文章源码推荐
WP8 启动媒体应用这个示例演示了如何选择正确的msAudioCategory类别的音像(AV)流来配置它作为一个音频播放流.具体地说,这个示例执行以下操作:启动一个媒体应用与“媒体 ...
禁用win7自己主动配置ipv4地址
现象一台新电脑,连了网线,没有dhcp,须要手动配置Ip. 配置了一个Ip后,发现ping网关不通. ipconfig 发现有2 个IP: 自己主动配置 IPv4 地址 . . . . . . ...
ASP.NET - 在线编辑器（KindEditor）
效果: 项目结构: 前端代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile=" ...
fastjson 之常见的数据类型与json的相互转换
public class FastJsonTest1 { /** * 数组转json格式字符串 */ public void array2Json(){ String[] arr = {"b ...
iOS - NSLog的使用方法
NSLog的定义 NSLog定义在NSObjCRuntime.h中,如下所示: void NSLog(NSString *format, …); 基本上,NSLog很像printf,同样会在conso ...
STL 之 queue、priority_queue 源代码剖析
/* * Copyright (c) 1994 * Hewlett-Packard Company * * Permission to use, copy, modify, distribute an ...
c++中虚函数和纯虚函数定义
只有用virtual声明类的成员函数,使之成为虚函数,不能将类外的普通函数声明为虚函数.因为虚函数的作用是允许在派生类中对基类的虚函数重新定义.所以虚函数只能用于类的继承层次结构中. 一个成员函数被声 ...
ASI简单实现网络编程
使用iOS SDK中的HTTP网络请求API,相当的复杂,调用比較麻烦.ASIHTTPRequest 对CFNetwork API进行了封装.而且使用起来非常easy的一套API,在非常多比較老旧的项 ...