1、单例模式

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

1.1 传统的单例模式

  1. var Singleton=function(name){
  2.     this.name=name;
  3. }
  4. Singleton.prototype.getName=function(){
  5.     alert(this.name);
  6. }
  7. Singleton.getInstance=(function(){
  8.     var instance=null;
  9.     return function (name) {
  10.         if(!instance){
  11.             instance=new Singleton(name);
  12.         }
  13.         return instance;
  14.     }
  15. })();
  16.  
  17. var a=Singleton.getInstance('sven1');
  18. var b=Singleton.getInstance('sven2');
  19. alert(a===b);//true

1.2 JavaScript中的单例模式

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

  1. var namespace1={
  2.     a:function(){
  3.         alert(1);
  4.     },
  5.     b:function(){
  6.         alert(2);
  7.     }
  8. };

1.3 应用举例--惰性单例

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

  1. <html>
  2.     <body>
  3.         <button id="loginBtn" >登陆</button>
  4.     </body>
  5.     <script>
  6.         var createLoginLayer=(function(){
  7.             var div;
  8.             return function(){
  9.                 if(!div){
  10.                     div=document.createElement('div');
  11.                     div.innerHTML='我是登陆浮窗';
  12.                     div.style.display='none';
  13.                     document.body.appendChild(div);
  14.                 }
  15.                 return div;
  16.             }
  17.         })();
  18.         document.getElementById('loginBtn').onclick=function(){
  19.                 var loginLayer=createLoginLayer();
  20.                 loginLayer.style.display='block';
  21.             };
  22.     </script>
  23. </html>

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

  1. var getSingle= function (fn) {
  2.     var result;
  3.     return function () {
  4.         return result || (result = fn.apply(this,arguments));
  5.     }
  6. };
  7. var createLoginLayer=function(){
  8.     var div=document.createElement('div');
  9.     div.innerHTML='我是登陆符窗';
  10.     div.style.display='none';
  11.     document.body.appendChild(div);
  12.     return div;
  13. };
  14. var createSingleLoginLayer=getSingle(createLoginLayer());
  15. document.getElementById('loginBtn').onclick=function(){
  16.     var loginLayer=createSingleLoginLayer();
  17.     loginLayer.style.display='block';
  18. };
  19. //当需要创建唯一的iframe用于动态加载第三方页面时
  20. var createSingleIframe=getSingle(function () {
  21.     var iframe=document.createElement('iframe');
  22.     document.body.appendChild(iframe);
  23. });
  24. document.getElementById('loginBtn').onclick=function(){
  25.     var loginLayer=createSingleIframe();
  26.     loginLayer.src='http://www.google.com';
  27. };

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

  1. JavaScript设计模式与开发实践——读书笔记1.高阶函数(上)

    说来惭愧,4个多月未更新了.4月份以后就开始忙起来了,论文.毕设.毕业旅行等七七八八的事情占据了很多时间,毕业之后开始忙碌的工作,这期间一直想写博客,但是一直没能静下心写.这段时间在看<Java ...

  2. JavaScript设计模式与开发实践——读书笔记1.高阶函数(下)

    上部分主要介绍高阶函数的常见形式,本部分将着重介绍高阶函数的高级应用. 1.currying currying指的是函数柯里化,又称部分求值.一个currying的函数会先接受一些参数,但不立即求值, ...

  3. Javascript设计模式与开发实践读书笔记（1-3章）

    第一章 面向对象的Javascript 1.1 多态在面向对象设计中的应用   多态最根本好处在于,你不必询问对象“你是什么类型”而后根据得到的答案调用对象的某个行为--你只管调用行为就好,剩下的一切 ...

  4. javascript设计模式与开发实践阅读笔记（8）——观察者模式

    发布-订阅模式,也叫观察者模式:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 在JavaScript开发中,我们一般用事件模型来替代传统的观察者模式. ...

  5. javascript设计模式与开发实践阅读笔记（7）——迭代器模式

    迭代器模式:指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺 ...

  6. javascript设计模式与开发实践阅读笔记（6）——代理模式

    代理模式:是为一个对象提供一个代用品或占位符,以便控制对它的访问. 代理模式的关键是,当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象来控制对这个对象的访问,客户实际上访问的是替身对 ...

  7. javascript设计模式与开发实践阅读笔记（4）——单例模式

    定义 单例模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 具体来说,就是保证有些对象有且只有一个,比如线程池.全局缓存.浏览器中的window 对象等.在js中单例模式用途很广,比如登录 ...

  8. 《JavaScript设计模式与开发实践》笔记第八章 发布-订阅模式

    第八章 发布-订阅模式 发布-订阅模式描述 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 发布-订阅模式可以广泛应用于 ...

  9. 《JavaScript设计模式与开发实践》笔记第一章

    第一章 面向对象的JavaScript 动态类型语言和鸭子类型 编程语言按照数据类型大体可以分为两类:静态类型语言.动态类型语言. 静态类型语言:在编译时便已确定变量的类型. 优点: 在编译时就能发现 ...

  10. javascript设计模式与开发实践阅读笔记（5）——策略模式

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

随机推荐

  1. Spring Boot,Spring Data JPA多数据源支持

    1 配置文件 wisely.primary.datasource.driverClassName=oracle.jdbc.OracleDriver wisely.primary.datasource. ...

  2. springboot 开发入门，及问题汇总

    1 . springboot简单介绍(http://projects.spring.io/spring-boot/) 现在的web项目几乎都会用到spring框架,而要使用spring难免需要配置大量 ...

  3. doT js模板入门

    doT.js github地址: doT.js 官方站点 实例1:简单 <!DOCTYPE html> <html lang="en"> <head& ...

  4. Hacker News网站的文章排名算法工作原理

    In this post I'll try to explain how Hacker News ranking algorithm works and how you can reuse it in ...

  5. Perl入门（四）Perl的正則表達式

    正則表達式是Perl语言的特色.主要的语法不是非常难,可是编写一个符合需求.高效的正則表達式.还是有一些挑战的. Perl的三种匹配模式 1.查找 语法:m/正則表達式内容/; 作用:查找匹配内容中是 ...

  6. java Date 和 javascript Date

    近期写一个页面.上面要展示下日期. 在Java中生成了Date.然后将这个Date通过velocity送入vm模板其中 代码例如以下: var dates = new Date("$!{pp ...

  7. ps中图层混合模式算法公式

    网上已经有很多讲解ps的图层混合模式,有些不详细甚至是错误的,参考网上给出的公式及其自己在验证推倒的,给出27种的混合模式算法公式.也许存在一定的错误性,毕竟没有官方给出公式,只能说以供参考吧. 只考 ...

  8. RBAC用户角色权限设计方案

    RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成“用 户-角色 ...

  9. [Cocos2d-x]随机数

    Cocos2d-x为我们提供了生成随机数的宏:CCRANDOM_0_1() 具体定义如下: /** @def CCRANDOM_0_1 returns a random float between 0 ...

  10. Oracle定时执行存储过程（转）

    定时执行存储过程在平时开发中经常会用到,年前的时候自己也做了一个,由于时间关系一直没能记录,现记录下来.       首先用一个完整的例子来实现定时执行存储过程. 任务目标:每小时向test表中插入一 ...