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实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
微信小程序纯文本实现@功能
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实现用户注册登陆的方法
2015/01/03 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python enumerate索引迭代代码解析
2018/01/19 Python
python编写简单端口扫描器
2019/09/04 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
Python 求向量的余弦值操作
2021/03/04 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
室内拓展活动方案
2014/02/13 职场文书
实习协议书
2015/01/27 职场文书
欠款证明
2015/06/24 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs