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来处理图片坏链具体实现步骤
May 02 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
js中创建对象的几种方式
Feb 05 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 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输出Excel文件类
2010/02/08 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
form自动提交实例讲解
2017/07/10 PHP
php实现微信支付之企业付款
2018/05/30 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
详解通过API管理或定制开发ECS实例
2018/09/30 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
python读取Kafka实例
2019/12/23 Python
三个python爬虫项目实例代码
2019/12/28 Python
python3中数组逆序输出方法
2020/12/01 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
班队活动设计方案
2014/01/30 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
英语教师自荐信
2014/05/26 职场文书
2014年计生工作总结
2014/11/21 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技