美文网首页
JS设计模式-单例

JS设计模式-单例

作者: zhCN_超 | 来源:发表于2017-07-16 11:15 被阅读15次

2016/11/10
函数作为JS第一等对象,灵活的使用可以帮助我们写出优雅的代码,甚至能节省内存空间提高运行效率。
这次简单讲讲单例模式在项目中的应用。

原理

我们经常通过new关键字实例化一个类(其实就是函数),而实例化之后,会在内存中分配内存空间。
直到这个实例赋值为null或者实例所在的作用域跳出,被分配的内存空间才被收回。

需求

比如项目中的一个页面,有许多用户的操作会导致弹窗提示。
那么此时,我们会在不同的操作事件中实例化这个dialog类,然后调用实例的弹出方法。
这时我们可以使用这种模式,让每一次的new操作得到的永远是第一次实例化的那个实例,只需要改变弹出内容即可,这样就会减少内存开销。

如何做

Dialog类

var Dialog = function(options){
  // 初始化弹出框
}
Dialog.prototype.pop = function(){
  // 弹出方法
}

实例化Dialog(非单例模式)

var dialog1 = new Dialog();
var dialog2 = new Dialog();

console.log(dialog1 === dialog2); // false

实例化Dialog(单例模式)

var getSingleton = function(){
  var instance;
  // 这里使用闭包
  // 下面这个 function 保持着变量 instance 的引用
  return function(){
    if(!instance){
      // 不存在就实例化
      instance = new Dialog();
    }
    return instance;
  }
}

var dialog1 = getSingleton();
var dialog2 = getSingleton();

console.log(dialog1 === dialog2); // true

再改进一点

为了更好的体现面向对象的设计思路,可以把实例化的操作单独拿出来

var getInstance = function(){
  return new Dialog();
}

var getSingleton = function(fn){
  var instance;
  return function(){
    return instance || (instance = fn.apply(fn, arguments));
  }
}

var getDialog = getSingleton(getDialog);

var dialog1 = getDialog();
var dialog2 = getDialog();

console.log(dialog1 === dialog2); // true

相关文章

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • 单例模式Java篇

    单例设计模式- 饿汉式 单例设计模式 - 懒汉式 单例设计模式 - 懒汉式 - 多线程并发 单例设计模式 - 懒汉...

  • python中OOP的单例

    目录 单例设计模式 __new__ 方法 Python 中的单例 01. 单例设计模式 设计模式设计模式 是 前人...

  • 单例

    目标 单例设计模式 __new__ 方法 Python 中的单例 01. 单例设计模式 设计模式设计模式 是 前人...

  • python 单例

    仅用学习参考 目标 单例设计模式 __new__ 方法 Python 中的单例 01. 单例设计模式 设计模式设计...

  • 2018-04-08php实战设计模式

    一、单例模式 单例模式是最经典的设计模式之一,到底什么是单例?单例模式适用场景是什么?单例模式如何设计?php中单...

  • js的4种设计模式及Vue小结(1)

    4种js设计模式 模块模式(module) 原型模式(prototype) 观察者模式(observer) 单例模...

  • 设计模式第二篇、单例设计模式

    目录1、什么是单例设计模式2、单例设计模式的简单实现3、单例设计模式面临的两个问题及其完整实现4、单例设计模式的应...

  • 设计模式 - 单例模式

    设计模式 - 单例模式 什么是单例模式 单例模式属于创建型模式,是设计模式中比较简单的模式。在单例模式中,单一的类...

  • 前端开发工程师必备系列-几个简单的JS单例模式

    前端开发工程师必备系列-几个简单的JS单例模式 JavaScript单例模式 1. 单例模式 单例模式(Singl...

网友评论

      本文标题:JS设计模式-单例

      本文链接:https://www.haomeiwen.com/subject/bwetkxtx.html