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）——策略模式
策略模式:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 我的理解就是把各种方法封装成函数,同时存在一个可以调用这些方法的公共函数.这样做的好处是可以消化掉内部的分支判断,使代码效率 ...

随机推荐

[置顶] oracle 数据库表中转换成java代码
--数据库中字段java代码 select col.TABLE_NAME,replace(initcap(col.TABLE_NAME),'_', '') , 'private '||decode ...
VS2008下编译BOOST 1.39的ASIO库
由于全部编译BOOST库需要的时间太长,而且耗费空间,况且我只需要用ASIO库,所以就没有必要全部编译了. boost库到www.boost.org上下载. 编译很简单,假设你的boost存放的目录是 ...
WITH+HInt MATERIALIZE 不见得有效
那个要多次调用才需要物化的. 只调用一次,物化没用 MATERIALIZE 语法:MATERIALIZE 描述:指示优化器将内联视图实体化————执行过程中会创建基于视图的临时表. with dd ...
HTTPClient和URLConnection核心区别分析
首先:在 JDK 的 java.net 包中已经提供了访问 HTTP 协议的基本功能:HttpURLConnection.但是对于大部分应用程序来说,JDK 库本身提供的功能还不够丰富和灵活. 在An ...
每天一个JavaScript实例-推断图片是否载入完毕
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
Linux系统管理员必备的监控工具（88款）
随着互联网行业的不断发展,各种监控工具多得不可胜数.这里列出网上最全的监控工具.让你可以拥有超过80种方式来管理你的机器.在本文中,我们主要包括以下方面: 命令行工具网络相关内容系统相关的监控工具 ...
javascript实现图片无缝滚动（scrollLeft的使用方法介绍）
<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" conten ...
【Error】JavaWeb: 严重: Failed to initialize end point associated with ProtocolHandler ["http-bio-8080"]
在MyEclipse中启动Tomcat时出现错误,错误信息例如以下: 严重: Failed to initialize end point associated with ProtocolHandle ...
Emotion英语学习
英语学习断断续续也快两年了,以前也蜻蜓点水地写过几篇总结,但是因为思考的少,只能得到一些表面的收获.从今年三月初到现在,口语阶段已经有三个月,感触较多,所以写这篇博客对这段时间英语学习的一个整体总结. ...
复制文件时，如何显示进度条（使用BlockRead函数读取数据，并插入application.ProcessMessages）
procedure mycopyfile(sourcef,targetf:string;i:integer); var FromF,ToF:file; NumRead,NumWritten:Integ ...