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

随机推荐

hdu 4704 同余定理+普通快速幂
此题往后推几步就可找到规律,从1开始,答案分别是1,2,4,8,16.... 这样就可以知道,题目的目的是求2^n%Mod的结果.....此时想,应该会想到快速幂...然后接着会发现,由于n的值过大, ...
HDU 4344 随机法判素数（费马小定理
#include <cstdio> #include <ctime> #include <cmath> #include <algorithm> usi ...
真正理解javascript的五道题目.
题目一: if (!("a" in window)) { var a = 1; } alert(a); 题目二: var a = 1, b = function a(x) { x ...
让Android中的webview支持页面中的文件上传
android webview在默认情况下是不支持网页中的文件上传功能的: 如果在网页中有<input type="file" />,在android webview中 ...
HTML 页面载入 Flash 插件的几种方法
前言之所以写这篇文章,主要是由于组长给提的一个新的需求--使用浏览器调用电脑的摄像头,来实现即时拍照的功能.在网上查了非常多资料,由于这样那样的原因,终于选择了使用flash插件来调用pc的摄像头. ...
JSTL分割字符 fn：split（）
<%@ page language="java" contentType="text/html; charset=UTF-8"%><%@ ta ...
php中实现快排与冒泡排序
快排 <?php function quicksort($str){ if(count($str)<=1) return $str;//如果个数不大于一,直接返回 $key=$str[0] ...
3xx Redirection
3xx Redirection This class of status code indicates the client must take additional action to comple ...
Java 开源博客——B3log Solo 0.6.1 正式版发布了！
Java 开源博客 —— B3LOG Solo 0.6.1 正式版发布了!欢迎大家下载. 该版本主要是改善细节体验,并加入了一款 Metro 风格的皮肤. 特性基于标签的文章分类 Ping Goog ...
动态分析maillog日志，把恶意链接直接用防火墙禁止
近期用 postfix + dovecot 搭建了一个邮件server, 被人当做垃圾邮件转发器,经过配置postfix 的黑白名单, postfix 提示成功的 REJECT 了垃圾邮件, 只是还是 ...