JavaScript设计模式---单例模式详解【四种基本形式】


Posted in Javascript onMay 16, 2020

本文实例讲述了JavaScript设计模式---单例模式.分享给大家供大家参考,具体如下:

单例模式也称为单体模式,其中:

1,单体模式用于创建命名空间,将系列关联的属性和方法组织成一个逻辑单元,减少全局变量。
 逻辑单元中的代码通过单一的变量进行访问。

2,三个特点:
 ① 该类只有一个实例;
 ② 该类自行创建该实例,即在该类内部创建自身的实例对象;
 ③ 向整个系统公开这个实例接口

3,单体模式有四种基本形式:

第一种,最简单的单体,只被实例化一次    我简记为json对象

(1)基本结构

var userInfo={//已经自行被实例化 其实是一json对象
    name:"测试名称",
    dept:"测试PD",
    code:"测试PD001",
    getName:function () {
      return "测试"
    }
  };

(2)使用方法与json的使用方法一致:使用点 " . "的方式访问

alert(userInfo.getName())

单体模式用来划分命名空间,并将一群相关的属性和方法组织到一起的简单介绍:

var comm={};//一个空对象
  comm.userInfo={//空对象下的第一个命名空间
    name:"命名空间1下的",
    code:"001"
  }

  comm.funcInfo={//空对象下的第二个命名空间
    funcName:"命名空间2下的",
    code:"002"
  }

总结:该种方式可以看出对象的变量值不是动态加载的,而且对象没有显示初始化,由此有了第二种单体模式。

第二种,具有局部变量的单体

要求:模拟一个使用ajax从数据库加载数据的过程

 (1)简单模拟一下ajax过程

//模拟一个Ajax操作
  function Ajax() {};//空对象
  //静态函数 模拟作为从数据库取值 此处值写死的
  Ajax.request=function (url,fn) {
    //默认永远回调成功
    if(true){
      fn("测试值1","测试值2")
    }
  }

(2)在最简单的单体中出现了数据不是动态从数据库加载的,而且没有显示实例化对象,此处使用闭包原理解决上述问题

//使用闭包的原理解决:动态从数据库加载数据 ,显示实例化
  var userInfo=(function () {
    //(1)利用闭包使单体有自己的私有局部变量
    var name="";
    var code="";
    //(2)利用ajax访问数据库取到数据
    Ajax.request("url",function (n,c) {//由于模拟的ajax中只是简单传递参数,所以第一个参数可以任意
         name=n;
         code=c;
    })
    //(3)单体实现私有变量的赋值
    return {
      name:name,
      code:code
    }
  })()

(3)使用该种方式的单体,不用实例化 可以直接返回一个单体 【因为使用userInfo时,直接return一个单体回来】

alert(userInfo.name);

总结:

(1)优点,灵活

(2)弊端:return 单体数据量比较大时,都需要从数据库取数据,每次加载都要执行,会影响程序性能。由于该种方式每次加载都要直接执行,return单体数据量大时会影响呈现的性能,于是有了第三种单体模式。

第三种,惰性单体 提供的解决方案为:调方法时才实例化单体,而不是加载时就执行。

于是在第二种的基础上进行修改为,

(1)模拟ajax从数据库加载数据不变

//模拟一个Ajax操作
  function Ajax() {}
  //静态函数 模拟作为从数据库取值
  Ajax.request=function (url,fn) {
    //默认永远回调成功
    if(true){
      fn("测试值1","测试值2")
    }
  }

(2)动态从数据库加载数据 ,显示实例化,使用一个函数(Init())封装产生单体的函数,通过一个私有变量来返回函数(Init())

//使用闭包的原理解决:动态从数据库加载数据 ,显示实例化
  var UserInfo=(function () {

    var userInfo="";//私有变量

    function Init() {//在产生单体方式为包裹一层初始化函数
      //利用闭包使单体有自己的私有局部变量
      var name="";
      var code="";
      //利用ajax访问数据库取到数据
      Ajax.request("url",function (n,c) {
        name=n;
        code=c;
      })
      //单体
      return {
        name:name,
        code:code,
      }
    }

    return {//此时开始调用初始化函数实现单体的产生
      getInstance:function () {
        if(userInfo){//userInfo=""为false
          return userInfo;
        }else {
          userInfo=Init();
          return userInfo;
        }
      }
    }

  })()

(3)使用   访问UserInfo对象里面的获取初始化获取对象的函数(getInstance())

alert(UserInfo.getInstance().name);

总结:使用惰性单体实质上是通过对产生单体的函数进行再一次封装(使用函数封装),再在通过该类提供的唯一接口(getInstance()方法)访问初始化单体 的函数。

第四种,分支单体

简单的用处:做Ajax的时候根据不同的浏览器获得不同的XHR。(将浏览器之间的差异封装到动态方法,适用于解决浏览器之间的差异。)

比如下面一个简单的例子:在电脑不同分辨率的情况下初始化不一样的界面。(这里只是弹窗显示而已)

(1)获取电脑的分辨率

//得到机器的分辨率
  var screenWidth=window.screen.width;//width
  var screenHeight=window.screen.height;//height

(2)进行分支判断处理 ,将差异封装到动态方法中

var portalInfo=(function () {
    //单体
   var $1280_1024={info:'1,2,3,5'}//单体1
   var $1366_768={info:'4,2,1,2'}//单体2     //动态图选择浏览器的差异结果(这里是分辨率)
     if(screenWidth==1280){
       return $1280_1024;//返回单体进行初始化
     }else if(screenWidth==1366){
       return $1366_768;//返回单体进行初始化
     }else {
       throw new Error("请检查你当前的电脑分辨率")
     }
   })();

(3)使用 ,获取最终的结果

alert(portalInfo.info)//我的结果为4,2,1,2 这是由于我的电脑的分辨率为1366*768

总结一下,对于分支单体有一个缺点:分支中,单体1和单体2都被创建了,并保存在内存中了,但只用到一个。需要在 计算时间 和 占用内存 两者中取舍。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JQUERY获取form表单值的代码
Jul 17 Javascript
javascript中length属性的探索
Jul 31 Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
JavaScript接口实现方法实例分析
May 16 #Javascript
JavaScript 类的封装操作示例详解
May 16 #Javascript
jquery+css3实现的经典弹出层效果示例
May 16 #jQuery
js抽奖转盘实现方法分析
May 16 #Javascript
JSONP 的原理、理解 与 实例分析
May 16 #Javascript
JavaScript随机数的组合问题案例分析
May 16 #Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 #Javascript
You might like
PHP XML操作类DOMDocument
2009/12/16 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
自己的js工具 Event封装
2009/08/21 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
Vue.use源码分析
2017/04/22 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
2017/07/31 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
使用django-crontab实现定时任务的示例
2018/02/26 Python
python多进程实现文件下载传输功能
2018/07/28 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
python中append函数用法讲解
2020/12/11 Python
电子商务专业自我鉴定
2013/12/18 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
医药销售求职信范文
2014/02/01 职场文书
企业军训感言
2014/02/08 职场文书
技校毕业生自荐信
2014/06/03 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
感谢信格式范文
2015/01/22 职场文书
公司业务员管理制度
2015/08/05 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书