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数组处理多个字符串的连接问题
Aug 20 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 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函数http_build_query使用详解
2014/08/20 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
Python虚拟环境项目实例
2017/11/20 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
python hashlib加密实现代码
2019/10/17 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
会计专业毕业生推荐信
2013/11/05 职场文书
初中英语教学反思
2014/01/25 职场文书
《月迹》教学反思
2014/02/19 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
倡导文明标语
2014/06/16 职场文书
毕业生工作求职信
2014/06/30 职场文书
关于诚信的活动方案
2014/08/18 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
导游词之山海关
2019/12/10 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android