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 相关文章推荐
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
juqery 学习之五 文档处理 插入
Feb 11 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
design vue 表格开启列排序的操作
Oct 28 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
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
如何在Python中编写并发程序
2016/02/27 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
美国校园市场:OCM
2017/06/08 全球购物
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
生物制药毕业生自荐信
2013/10/16 职场文书
合作协议书怎么写
2014/04/18 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
2014年会计工作总结
2014/11/27 职场文书
工商局个人工作总结
2015/03/03 职场文书
高三化学教学反思
2016/02/22 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang