<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>javascript高级语法7-单例模式</title>

     </head>

     <body>

         <script>

             /*单例模式在js中使用非常频繁：

              * 1.普通单体

              * 2.具有局部变量的强大单体

              * 3.惰性单体

              * 4.分支单体

              */

             function demo1(){

                 //1.普通单体

             (function(){

                 //通过确保单例对象只存在一个实例，就可以确信自己在所有的代码中使用的是全局资源

                 //例如用户登录后的信息可以用一个单体存储

                 var UserInfo = {

                     name:"zhangdan",

                     code:"0202022",

                     deptName:"PD",

                     deptCode:"PD001",

                     getName:function(){

                         return "十里河"

                     }

                 }

                 alert(UserInfo.getName());

                 //这就是一个最简单的单体，他用来划分命名空间，并且将一群相关的属性方法组织到一起。 可以用.来访问。

                 var comm = {};  //把两个单体组织到comm的命名空间下。

                 comm.UserInfo = {

                     name:"zhangdan",

                     code:"0202022",

                 }

                 comm.funcInfo = {

                     funcName:"",

                     funcCode:"",

                 }

                 //在大型项目下，存在着你写的代码还有你引用的外界的JS类库，还有其他同事写的代码和类库。

                 //我们通过单体模式就可以很好的区分，这点只能慢慢体会了。

             })()

             }

             function demo2(){

             //2.具有局部变量的强大单体

             (function(){

                 //模拟一个ajax操作

                 function Ajax(){}

                 Ajax.request = function(url,fn){

                     if(true){

                         fn("javascript","extjs");

                     }

                 }

                 //通过闭包的原理解决在上例中的问题

                 var UserInfo = (function(){

                     //利用闭包使单体拥有自己的私有局部变量

                     var name = '';

                     var code = '';

                     //利用ajax访问数据库来取得数据

                     Ajax.request("www.baidu.com",function(n,c){

                         name = n;

                         code = c;

                     })

                     return {

                         name:name,

                         code:code,

                     }

                 })();

                 alert(UserInfo.name+"  "+UserInfo.code);

             })()

             }

             function demo3(){

             //3.惰性单体

             (function(){

                 //模拟一个ajax操作

                 function Ajax(){}

                 Ajax.request = function(url,fn){

                     if(true){

                         fn("demo3","extjs");

                     }

                 }

                 //通过闭包的原理解决在上例中的问题

                 var UserInfo = (function(){

                     var userInfo = ""  //私有变量

                     function init(){

                         var name = '';

                         var code = '';

                         //利用ajax访问数据库来取得数据

                         Ajax.request("www.baidu.com",function(n,c){

                             name = n;

                             code = c;

                         })

                         return {

                             name:name,

                             code:code,

                         }

                     }

                     return {

                         getInstance:function(){

                             if(userInfo){

                                 return userInfo;

                             }else{

                                 userInfo = init();

                                 return userInfo;

                             }

                         }

                     }

                 })();

                 alert(UserInfo.getInstance().name+"  "+UserInfo.getInstance().code);

             })()

             }

             function demo4(){

                 //4.分支单体

                 /*

                  * 用处：在做ajax的时候根据不同的浏览器获得不同的xhr(XMLHttpRequest)

                  *     在不同分辨率的情况下初始化不一样的界面

                  */

                 (function(){

                     //得到机器分辨率

                     var screenWidth = window.screen.width;

                     var screenHeight = window.screen.height;

                     var portalInfo = (function(){

                         var $12801024 = {info:"1,2,3,5"}

                         var $1024768 = {info:"4,2,1,2"}

                         if(screenWidth ==1920){

                             return $12801024;

                         }else if(screenWidth ==1024){

                             return $1024768

                         }

                     })();

                     alert(portalInfo.info);

                 })()

             /*

              * 这些并非js的高深技术，是它的使用技巧。

              */

             }

         </script>

     </body>

 </html>

JavaScript设计模式-7.单例模式的更多相关文章

  1. JavaScript设计模式之单例模式【惰性单例】

    在提高开发水平,往中高级前端工程师中,利用设计模式是必不可少的一条道路.掌握设计模式的思想远远比硬套重要,因为设计模式是一种思想,不局限于开发语言.但实际上由于语言的特性不同,往往在实现的时候会有不少 ...

  2. JavaScript设计模式_01_单例模式

    最近项目不太忙,难得有时间看看书,平时挺喜欢js这门语言.也看过很多高级教程,觉得自己还是比较热衷于js的设计模式.这一次重温一下<JavaScript设计模式与开发实践>,开篇为单例模式 ...

  3. 再起航，我的学习笔记之JavaScript设计模式10(单例模式)

    单例模式 单例模式(Singleton) : 又被称为单体模式,是只允许实例化一次的对象类.一个类有且仅有一个实例,并且自行实例化向整个系统提供. 命名空间 单例模式可能是JavaScript中我们最 ...

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

    惰性单例模式 之前介绍了JS中类的单例模式,这次我们讨论下单例模式的应用.在众多网站中,登录框的实现方式就是一个单例,点击一次就展示一次,所以我们可以在页面加载好的时候就创建一个登录框,点击页面上的登 ...

  5. JavaScript设计模式，单例模式！

    单例设计模式:保证一个类仅有一个实例,并且提供一个访问它的全局访问点.有些对象只需要一个,这时可用单例模式. 传统的单例模式 和new 创建对象的调用不一样 调用者要调用xxx.getInstance ...

  6. 第一章 --- 关于Javascript 设计模式 之 单例模式

    首先我们对单例模式先进行理论上的讲解,接下来,我们再通过具体的代码示例,来讲解,这个单例模式的使用场景和这种模式的优缺点 (这个系列的所有关于设计模式的都是面向Javascript) 一.理论定义: ...

  7. JavaScript设计模式之单例模式

    一.单例模式概念 单例就是保证一个类只有一个实例,实现方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象.在JavaScript里,单例作为一个 ...

  8. 「设计模式」JavaScript - 设计模式之单例模式与场景实践

    单例介绍 上次总结了设计模式中的module模式,可能没有真真正正的使用在场景中,发现效果并不好,想要使用起来却不那么得心应手, 所以这次我打算换一种方式~~从简单的场景中来看单例模式, 因为Java ...

  9. JavaScript 设计模式之单例模式

    一.单例模式概念解读 1.单例模式概念文字解读 单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象.在Ja ...

随机推荐

  1. OpenGL中的需要注意的细节问题

    OpenGL中的需要注意的细节问题 1. 虽然我们使用Windows的BMP文件作为纹理时,一般是蓝色的像素在最前,其真实的格式为GL_BGR而不是GL_RGB,在数据的顺序上有所 不同,但因为同样是 ...

  2. D3 data()

    与datum()的区别 假设要绑定的数组为[3,6,9],那么我们希望第一个p元素绑定3,第二个绑定6,第三个绑定9.这种情况就需要使用data()函数,如果使用datum(),则会将数组本身绑定到各 ...

  3. Android-SurfaceView生命周期

    SurfaceView的生命周期,和 Activity生命周期,Service生命周期,BroadcastReceiver生命周期,等,不一样: 因为SurfaceView显示的是(视频画面,游戏画面 ...

  4. .Net core 2.0的数据初始化

    在StartUp.cs里面,添加Seed方法 public static void Seed(IApplicationBuilder applicationBuilder) { using (var ...

  5. （C#版本）提升SQlite数据库效率——开启事务，极速插入数据，3秒100万，32秒1000万条数据

    SQLite插入数据效率最快的方式就是:开启事务  +   insert语句  +  关闭事务(提交) 利用事务的互斥性,如果在批量的插入操作前显式地开启一次事务,在插入操作结束后,提交事务,那么所有 ...

  6. C#基础之流程控制语句详解

    C#程序的执行都是一行接一行.自上而下地进行,不遗漏任何代码.为了让程序能按照开发者所设计的流程进行执行,必然需要进行条件判断.循环和跳转等过程,这就需要实现流程控制.C#中的流程控制包含了条件语句. ...

  7. BASE64编码乱码问题的浅层分析与解释

    本文由作者朱臻授权网易云社区发布. 1问题案例 曾在开发过程中,我们遇到了BASE64编码乱码的问题,该问题的场景如下: 当web前端,将带有中文字符的字符串base64编码后,传到后端.当后端将数据 ...

  8. Message Loop 原理及应用

    此文已由作者王荣涛授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. Message loop,即消息循环,在不同系统或者机制下叫法也不尽相同,有被叫做event loop,也有 ...

  9. Docker 网络模式和跨主机通信

    Docker的四种网络模式 Bridge模式 当Docker进程启动时,会在主机上创建一个名为docker0的虚拟网桥,此主机上启动的Docker容器会连接到这个虚拟网桥上.虚拟网桥的工作方式和物理交 ...

  10. 2018年Android面试题含答案--适合中高级（上）

    这些面试题是我在今年年初换工作的时候整理,没有重点.包括java基础,数据结构,网络,Android相关等等.适合中高级工程师.由于内容过多,将会分为上下两部分.下部分跳转链接:http://www. ...