javascript设计模式 ? 单例模式原理与应用实例分析


Posted in Javascript onApril 09, 2020

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

介绍:单例模式是结构最简单的设计模式。单例模式用于创建那些在软件系统中独一无二的对象,是一个简单但很实用的设计模式。

定义:确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例,这个类称为单例类,它提供全局访问的方法。单例模式是一种对象创建型模式。

场景:日常编码中会有很多需要重用的场景,例如弹窗,键盘输入这类公共组件,我们往往希望它只创建一次,在第二次使用时重复使用之前创建好的实例。为了节约资源,提高性能,需要保证实例对象的唯一性,就可以采用单例模式实现。使用单例模式要注意:1.某个类只能有一个实例 2.它必须自行创建这个实例 3.它必须自行向整个系统提供这个实例

示例:

单利模式有两个分支,饿汉模式单例和懒汉模式单例。我们对比看下区别:

//懒汉模式单例demo
//懒汉模式:只有在我需要实例的时候才会第一次实例化,只有当我第一次调用getInstance时才会去执行init获取实例。
var Singleton = (function () {
  var instantiated; 
  function init(){
    return {
      sayHello: function () {
        console.log('hello');
      }
    };
  }
 
  return {
    getInstance: function () {
      if(!instantiated){
        instantiated = init();
      }
      return instantiated;
    } 
  }
})();
 
//只能通过getInstance方法获取对象实例:
var instance = Singleton.getInstance();
var instance2 = Singleton.getInstance();
instance.sayHello(); //hello
instance2.sayHello(); //hello
console.log(instance === instance2); //true
 
//饿汉模式demo
//饿汉模式:在类初始化时就立刻执行getInstance进行赋值。
var Singleton = (function () {
  var instantiated = init();  //初始化时即对instantiated进行赋值
  function init(){
    return {
      sayHello: function () {
 console.log('hello');
   }
 };
  }
 
  return {
 getInstance: function () {
   return instantiated;
 } 
  }
})();
 
var instance = Singleton.getInstance();
var instance2 = Singleton.getInstance();
instance.sayHello(); //hello
instance2.sayHello(); //hello
console.log(instance === instance2); //true

以上demo思考一个问题,如果init函数是耗时操作,还能保证每个类只有一个实例吗?

在多线程的场景下,会出现init函数执行过程中再次触发getInstance。就会导致一个类存在多个实例。javascript会出现这样的问题吗?

两种单例模式对比下优缺点:饿汉模式在一开始就实例化,在资源合理利用方面落下风,懒汉模式在多线程情况下需要考虑同时初始化带来的影响。

单例模式总结:

优点:
* 严格控制实例的访问
* 节约系统性能,避免重复创建销毁对象,避免资源浪费

缺点:
* 单例模式的扩展必须修改类主体,这和我们前面介绍的开关原则冲突
* 单例模式职责过重,一定程度违背了单一职责原则,因为单例既提供了业务方法,也提供了创建对象的方法,有一定的功能耦合。

适用场景:
* 系统只需要一个实例对象
* 客户调用类的单个实例只允许使用一个公共访问点,除了该公共访问点,不能通过其他途径访问该实例。

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

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

Javascript 相关文章推荐
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
js获取class的所有元素
Mar 28 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
微信小程序纯文本实现@功能
Apr 08 #Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 #Javascript
vue与iframe之间的信息交互的实现
Apr 08 #Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 #Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 #Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 #Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 #Javascript
You might like
php mysql索引问题
2008/06/07 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
QUnit jQuery的TDD框架
2010/11/04 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
Python求解平方根的方法
2015/03/11 Python
python利用datetime模块计算时间差
2015/08/04 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
python 操作hive pyhs2方式
2019/12/21 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
锅炉工岗位职责
2015/02/13 职场文书
活动新闻稿范文
2015/07/17 职场文书
聘任书的格式及模板
2019/10/28 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android