JS 设计模式之：单例模式定义与实现方法浅析

本文实例讲述了JS 设计模式之：单例模式定义与实现方法。分享给大家供大家参考，具体如下：

良好的设计模式可以显著提高代码的可读性，降低复杂度和维护成本。笔者打算通过几篇文章通俗地讲一讲常见的或者实用的设计模式。

今天先从最简单的一个入手：单例模式。

文中的示例代码会使用 ES6 语法，尽量简化不必要的细节

概念

单例模式（Singleton）属于创建型的设计模式，它限制我们只能创建单一对象或者某个类的单一实例。

通常情况下，使用该模式是为了控制整个应用程序的状态。在日常的开发中，我们遇到的单例模式可能有：Vuex 中的 Store，Vue 的根实例，任何导出单个对象的 ES6 模块等。

字面量写法

最简单的单例其实就像下面这样：

const cat = {
  name: 'mi',
  age: 4
}

了解 const 语法的小伙伴都知道，这只喵是不能被重新赋值的，但是它里面的属性其实是可变的。

如果想要一个不可变的单例对象：

const cat = {
  name: 'mi',
  age: 4
}

Object.freeze(cat);

这样就不能新增或修改这只喵上的任何属性，它变成了 冰冻喵~

如果是在模块中使用，上面的写法并不会污染全局作用域，但是直接生成一个固定的对象缺少了一些灵活性。

常用写法

相对而言，使用类或工厂方法来实现单例更加常用。假设我们有一个叫作 Logger 的类，它具有和 Console 相同的 API。

类单例

类的单例写法非常常用，如果我们想要这么使用它：

const logger = new Logger();
logger.log('msg');

// 这里大概写了 1000 行代码

const logger2 = new Logger();
logger.log('new msg');

logger === logger2; // true

即尽管 new 了多次 Logger，它返回的都是同一个实例。

下面直接看最实用的实现方式：

class Logger {
  constructor () {
    if (!Logger._singleton) {
      Logger._singleton = this;
    }
    return Logger._singleton;
  }

  log (...args) {
    console.log(...args);
  }
}

export default Logger;

上面的方式将单例对象存储在了构造器上，这样的话不管 new Logger 多少次，返回的都是同一个 Logger 实例了。

这里有一个细节需要注意，即 new 关键字后面的构造函数如果显式返回一个对象，new 表达式就会返回该对象。

具体可参见 《你不知道的 JavaScript （上卷）》中的 new 绑定 相关章节。

工厂单例

如果不喜欢用 new 关键字，可以使用工厂方法返回单例对象。

let logger = null

class Logger {
  log (...args) {
    console.log(...args);
  }
}

function createLogger() {
  if (!logger) {
    logger = new Logger();
  }
  return logger;
}

export default createLogger;

上面的代码相当于在模块内部缓存了 logger 实例，然后导出了一个工厂方法。这种写法在模块化代码中比较常见，工厂方法也可以接收参数用来初始化单例对象。

今天的内容比较好理解，其中的单例写法也是笔者常用的方法。

下一篇我们再具体讲讲工厂模式的应用~

参考内容

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

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

赞 (0)

相关推荐

  • NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】

    本文实例讲述了NodeJS设计模式.分享给大家供大家参考,具体如下: 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直接返回,若不存在,则创建实例对象,并将实例对象保存在静态变量中,当下次请求时,则可以直接返回这个对象实例,这就确保了一个类只有一个实例对象.举个例子吧~一间学校刚刚起建还没有图书馆,有的同学就向领导提意见:"hey! 哥们,能不能帮我们建一个图书馆? "(想要一个图书馆实例),然后领导说:"no pro

  • JavaScript设计模式之工厂模式和构造器模式

    什么是模式 前阵子准备期末考试,劳神又伤身的,实在闲不得空来更新文章,今天和大家说说javascript中的设计模式. 首先呢,我们需要知道的是:模式是一种可复用的解决方案,而反模式呢就是针对某个问题的不良解决方案. js反模式常见例子 1.向setTimeout和setInterval传递字符串,而不是函数,这会触发eval()的内部使用. 2.在全局上下文中定义大量的变量污染全局命名空间 3.修改Object类的原型 4.以内联形式使用js,嵌入在HTML文件中的js代码是无法包含在外部单元

  • 学习JavaScript设计模式(链式调用)

    1.什么是链式调用 这个很容易理解,例如: $(this).setStyle('color', 'red').show(); 一般的函数调用和链式调用的区别:调用完方法后,return this返回当前调用方法的对象. function Dog(){ this.run= function(){ alert("The dog is running...."); return this;//返回当前对象 Dog }; this.eat= function(){ alert("Af

  • 大型JavaScript应用程序架构设计模式

    大型JavaScript应用程序架构设计模式

    PDF版的PPT下载地址:http://www.slideshare.net/jibyjohnc/jqquerysummit-largescale-javascript-application-architecture 注:在整理的过程中,发现作者有些思想是返来复去地说,所以删减了一部分,如果你的英文良好,请直接阅读英文的PPT. 以下是本文的主要章节: 1. 什么叫"JavaScript大型程序"? 2. 顾当前的程序架构 3. 长远考虑 4. 头脑风暴 5. 建议的架构 5.1 设

  • Javascript设计模式理论与编程实战之简单工厂模式

    阅读目录 基本介绍 举例说明 总结说明 简单工厂模式是由一个方法来决定到底要创建哪个类的实例, 而这些实例经常都拥有相同的接口. 这种模式主要用在所实例化的类型在编译期并不能确定, 而是在执行期决定的情况. 说的通俗点,就像公司茶水间的饮料机,要咖啡还是牛奶取决于你按哪个按钮. 简单工厂模式在创建ajax对象的时候也非常有用. 通常我们创建对象最常规的方法就是使用new关键字调用构造函数,这会导致对象之间的依赖性.工厂模式是一种有助于消除类之间依赖性的设计模式,它使用一个方法来决定要实例化哪一个

  • 常用的javascript设计模式

    阅读目录 什么是设计模式 单体模式: 工厂模式: 单例模式 观察者模式(发布订阅模式) 策略模式 模板模式 代理模式 外观模式 设计模式太多了,貌似有23种,其实我们在平时的工作中没有必要特意去用什么样的设计模式,或者你在不经意间就已经用了设计模式当中的一种.本文旨在总结平时相对来说用的比较多的设计模式. 什么是设计模式 百度百科: 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结. 使用设计模式是为了可重用代码.让代码更容易被他人理解.

  • JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析

    本文实例讲述了JavaScript设计模式之工厂模式和抽象工厂模式定义与用法.分享给大家供大家参考,具体如下: 1.工厂模式: 虽然Object构造函数和对象字面量都可以用来创建单个对象,但这个方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量重复的代码.为了解决这个问题,开始使用工厂模式. 利用工厂模式,可以实现不指定特定的类而创建出对象,也就是说,不需要使用new关键字来创建特定类或子类的实例. var TravelTeam = function(){}; TravelTeam.pr

  • javascript设计模式之工厂模式示例讲解

    javaScript工厂方式原始的方式因为对象的属性可以在对象创建后动态定义,这在 JavaScript 最初引入时都会编写类似下面的代码 复制代码 代码如下: var oCar = new Object;oCar.color = "blue";oCar.doors = 4;oCar.mpg = 25;oCar.showColor = function() {  alert(this.color);}; 在上面的代码中,创建对象 car.然后给它设置几个属性:它的颜色是蓝色,有四个门,

  • JS 设计模式之：工厂模式定义与实现方法浅析

    本文实例讲述了JS 设计模式之:工厂模式定义与实现方法.分享给大家供大家参考,具体如下: 前言 上次我们介绍了单例模式,没看过的小伙伴可以看这个链接: 浅析 JS 设计模式之:单例模式 今天来说一说一种常见的设计模式:工厂模式. 工厂模式是一种创建对象的 创建型模式,遵循 DRY(Don't Repeat Yourself)原则.在该模式下,代码将会根据具体的输入或其他既定规则,自行决定创建哪种类型的对象.简单点儿说就是,动态返回需要的实例对象. 回顾上次的例子 让我们继续使用单例模式中的例子,

  • 常用的Javascript设计模式小结

    常用的Javascript设计模式小结

    <Practical Common Lisp>的作者 Peter Seibel 曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型或强类型,静态或动态语言,命令式或说明式语言.每种语言都有天生的优缺点.一个牙买加运动员, 在短跑甚至拳击方面有一些优势,在练瑜伽上就欠缺一些. 术士和暗影牧师很容易成为一个出色的辅助,而一个背着梅肯满地图飞的敌法就会略显尴尬. 换到程序中, 静态语言里可能需要花很多功夫来实现装饰

随机推荐