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 YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
jquery学习笔记二 实现可编辑的表格
Apr 09 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
谈谈node.js中的模块系统
Sep 01 Javascript
微信小程序纯文本实现@功能
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 获取一个月第一天与最后一天的代码
2010/05/16 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
form自动提交实例讲解
2017/07/10 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
Python编程中装饰器的使用示例解析
2016/06/20 Python
Python科学画图代码分享
2017/11/29 Python
django删除表重建的实现方法
2019/08/28 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
食堂采购员岗位职责
2014/03/17 职场文书
高中综合实践活动总结
2014/07/07 职场文书
教师节寄语2015
2015/03/23 职场文书
同乡会致辞
2015/07/30 职场文书
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js