JavaScript单例模式能不能去实例只留单原理解析

目录
  • 一、单例模式的分类
  • 二、惰性单例模式
  • 二、普通单例模式
  • 总结

一、单例模式的分类

一个环境中有且只有一个实例，并且当前环境可以访问到它。往小了说，当前环境可以是一个函数作用域、块级作用域，往大了说可以是全局window或者global环境。如果按照实例的创建时机进行单例模式的分类，有：

  • 普通单例模式：在环境初始时就创建
  • 惰性单例模式：在某个特定的时机才创建

二、惰性单例模式

从单例模式的定义出发，一个环境中有且只有一个实例，并且使用时才去创建它，那么就可以把当前单例模式称之为惰性单例模式

  • 惰性，指的是只有在使用的时候才去创建
  • 单例，指的是当前环境有且只有单一的一个实例

弹窗案例：在页面打开的时候，页面中有登录按钮，在点击时，需要创建一个dom节点。
（1）首先，实现一个功能函数：创建节点的函数

var domFun = function () {
    var dom = document.createElement('div');
    dom.innerHTML = '登录窗口demo'
    dom.style.display = 'none';
    document.body.appendChild(dom);
    return dom;
}

（2）其次，创建管理单例的函数

var createSingle = function (fn) {
    var result;
    return function () {
        return result || (result = fn.apply(this, arguments));
    }
}

采用闭包的形式，让result变量在当前环境不销毁，如果该变量已经存在，直接返回，如果没有，让当前环境调用fn功能函数，并赋值给result。该过程保证了当前环境只有一个实例。
（3）将创建节点的函数和管理单例的函数糅合

var createSingleDom = createSingle(domFun)

（4）最后，在点击按钮的时候，进行实例的创建

var loginBtn = document.querySelector('.login')
loginBtn.onclick = function () {
    var loginDom = createSingleDom()
    console.log(loginDom)
    loginDom.style.display = 'block'
}

该过程实现了只有在点击登录按钮的时候才创建节点，是惰性的。

整个过程，将创建惰性实例的过程进行了分解，更易于修改和维护，如果，创建的不是div节点，而是，image图片、iframe嵌套网页、倒计时等其他内容，只需要替换步骤（1）中的内容即可。

这里的例子，我们严格的强调一个实例的事儿。

二、普通单例模式

在vue中的应用:我们知道vue是一个渐进式框架，主要实现视图的渲染，其他的功能可以可以通过第三方插件按需引入，比如路由插件vue-router和全局状态管理vuex。

  • 路由vue-router的使用
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
  • 状态vuex的使用
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

vue通过Vue.use(Vuex)的方式进行vue-router和vuex的安装，Vue.use的代码如下：

Vue.use = function (plugin: Function | Object) {
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }
    // 去掉参数列表中的第一个
    const args = toArray(arguments, 1)
    // 将Vue作为this推入到参数的首位
    args.unshift(this)
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
}

可以看出，首次执行vue.use(xxx)的时候，会将该插件推入到数组installedPlugins中去，再次执行vue.use(xxx)的时候，installedPlugins.indexOf(plugin) > -1为true，则终止后续逻辑的执行。也就说，vue.use(xxx)只会让该插件执行一次install的安装。

再看 const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))，是不是发现，这里也是单例模式的影子，当this._installedPlugins不存在时为其赋值为[]，当前存在时直接返回。

单例模式，去掉具体的例，就剩单模式。就像当前例子中，install只执行一次，this._installedPlugins只初始化一次一样，就体现了一个单字。那这算不算单(例)模式呢？

总结

单例模式是不是可以去实例，只留单呢？这样，很多只执行一次的逻辑也就和单例模式能搭上关系了。仁者见仁智者见智，能不能去，纯属个人想法。因为，优秀的单例模式，是经过无数的程序案例得出的经验性汇总。

以上就是JavaScript单例模式能不能去实例只留单原理解析的详细内容，更多关于JavaScript单例模式去实例的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JS实现单例模式的6种方案汇总

    前言 今天在复习设计模式中的-创建型模式,发现JS实现单例模式的方案有很多种,稍加总结了一下,列出了如下的6种方式与大家分享 大体上将内容分为了ES5(Function)与ES6(Class)实现两种部分 单例模式的概念 单例模式就是在系统中保存一个实例,就是一个全局变量,在团队开发中,为了实现一些相似的功能,比如不同页面之间的表单验证,可能需求是不一样的,但是呢命名可能一样,这时就会产生冲突,这时候单例模式就能很好的解决这个问题. 一个实例只生产一次 保证一个类仅有一个实例,并提供一个访问它的

  • 怎样用Javascript实现单例模式

    概述 单例模式也称为单体模式,规定一个类只有一个实例,并且提供可全局访问点: 在读这篇文章之前,也许你对单例模式的概念感到模糊或者不清楚,但是其实在日常的开发中你肯定用到过单例模式: JavaScript中没有类的定义,单例模式的特点是"唯一"和"全局访问",那么我们可以联想到JavaScript中的全局对象,利用ES6的let不允许重复声明的特性,刚好符合这两个特点:是的,全局对象是最简单的单例模式: let obj = { name:"咸鱼"

  • JavaScript单例模式实现自定义弹框

    JavaScript单例模式实现自定义弹框

    本文实例为大家分享了JavaScript单例模式实现自定义弹框的具体代码,供大家参考,具体内容如下 功能 自定义弹框标题 自定义弹框内容 自定义弹框确认和关闭时的回调函数 完整代码 const Dialog = (function () { class Dialog { constructor () { this.ele = document.createElement('div') this.ele.className = 'dialog' document.body.appendChild(

  • 解析Javascript设计模式Revealing Module 揭示模式单例模式

    目录 1. Revealing Module 揭示模式 2. Singleton 单例模式 1. Revealing Module 揭示模式 该模式能够在私有范围内简单定义所有的函数和变量,并返回一个匿名对象, 它拥有指向私有函数的指针,该函数是他希望展示为公有的方法. 示例: <script> var myRevealingModule = function () { var privateVar = "Ren Cherry", publicVar = "Hey

  • 理解JavaScript设计模式中的单例模式

    单例模式(Singleton Pattern)是最简单的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 单例模式涉及到一个单一的类,该类负责创建自己的对象,同时确保只有单个对象被创建.这个类提供了一种访问其唯一的对象的方式,可以直接访问,不需要实例化该类的对象. 1.单例类只能有一个实例. 2.单例类必须自己创建自己的唯一实例. 3.单例类必须给所有其他对象提供这一实例. 这样做的缺点就是:没有接口,不能继承,与单一职责原则冲突,一个类应该只关心内部逻辑,而不关

  • JavaScript中的设计模式 单例模式

    目录 1.什么是设计模式 2.设计模式五大设计原则(SOLID) 3.为什么需要设计模式? 4.单例模式 前言: 设计模式在我们编程中是十分重要的! 设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用.设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案.这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的. 最近在学习设计模式,铁铁们一起来卷嘛? 1.什么是设计模式 在软件设计过程中,针对特定问题的简洁而优雅的解决

  • JavaScript单例模式能不能去实例只留单原理解析

    目录 一.单例模式的分类 二.惰性单例模式 二.普通单例模式 总结 一.单例模式的分类 一个环境中有且只有一个实例,并且当前环境可以访问到它.往小了说,当前环境可以是一个函数作用域.块级作用域,往大了说可以是全局window或者global环境.如果按照实例的创建时机进行单例模式的分类,有: 普通单例模式:在环境初始时就创建 惰性单例模式:在某个特定的时机才创建 二.惰性单例模式 从单例模式的定义出发,一个环境中有且只有一个实例,并且使用时才去创建它,那么就可以把当前单例模式称之为惰性单例模式

  • JavaScript中的return布尔值的用法和原理解析

    首先return作为返回关键字,他有以下两种返回方式 1.返回控制与函数结果 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 2.返回控制无函数结果 语法为:return;在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<A>元素,页面会跳转到该元素href属性指定的页. 例如:<a href="http:www.baidu.com;alert(11);return false;ale

  • Javascript单例模式的介绍和实例

    Javascript单例模式的介绍和实例

    前言 其实和其他编程语言一样,Javascript同样拥有着很多种设计模式,比如单例模式.代理模式.观察者模式等,熟练运用Javascript的设计模式可以使我们的代码逻辑更加清晰,并且更加易于维护和重构. 本文将会介绍Javascript中的单例模式,在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象.在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个

  • 原生javascript单例模式的应用实例分析

    本文实例讲述了原生javascript单例模式的应用.分享给大家供大家参考,具体如下: 总体原则:开闭原则(Open Close Principle) 开闭原则就是说对扩展开放,对修改关闭.在程序需要进行扩展的时候,不能去修改原有 的代码,实现一个热插拔的效果.所以一句话概括就是:为了使程序的扩展性好,易于维护和升 级. 1.单一职责原则 不要存在多于一个导致类变更的原因,也就是说每个类应该实现单一的职责,如若不然,就 应该把类拆分. 创建模式_单例模式  某个类只允许创建一个实例,这就是单例

  • javascript 单例模式详解及简单实例

    JS 单例模式 概要: 单例指一个类只有一个实例,这个类自行创建这个实例. 利用对象字面量直接生成一个单例: var singleton = { prop: 1, method: function(){ console.log(a); //1 } } 严格的说对象字面量可能不算单例模式,生成单例是对象字面量的作用(已经被封装),而单例模式是一个设计模式(需要自行构思或设计). 在类内部用new生成实例的单例模式: var instance; var foo = function(){ if(!i

  • JavaScript实现跑马灯抽奖活动实例代码解析与优化（二）

    在上篇文章给大家介绍了JavaScript实现跑马灯抽奖活动实例代码解析与优化(一),既然是要编写插件.那么叫做"插件"的东西肯定是具有的某些特征能够满足我们平时开发的需求或者是提高我们的开发效率.那么叫做插件的东西应该具有哪些基本特征呢?让我们来总结一下: 1.JavaScript 插件一些基本特征: 配置一定要简单 插件中定义的变量不污染全局变量: 同一段代码可以在不同的地方复用: 用户可以自定义自己功能参数: 具有销毁变量和参数的功能: 如果按照以上的几个特征来写插件的话,我们可

  • JS实现合并两个数组并去除重复项只留一个的方法

    本文实例讲述了JS实现合并两个数组并去除重复项只留一个的方法.分享给大家供大家参考,具体如下: //It's merge arr1 and arr2 , delete the same element only leave one //It's only apdapter array. If object, no. //The sequence of the two array is not required. mergeArray:function (arr1, arr2){ for (var

  • PHP单例模式定义与使用实例详解

    本文实例讲述了PHP单例模式定义与使用.分享给大家供大家参考,具体如下: 先简单的介绍一下单例模式.单例模式就是在应用程序中保持某一个类实例只存在一个,而且不可以受外部环境的影响而生成这个类的第二个实例.它的优点,实际点见,如果在WEB开发中,保持单一个数据操作类实例的存在,可以减少不必要的多余连接数据库资源的消耗,对于大型的软件开发来说,可以使用单例来维持程序的状态,使不同操作实现同步,因为单例一直占据内存,而从不会有副本. 而对于PHP,使用单例最常用的场合莫过于写一个数据库操作类.不过在P

  • JavaScript贪吃蛇小组件实例代码

    JavaScript贪吃蛇小组件实例代码

    1 写在前面 看来<JavsScript高级编程>,想做一个小demo练练自己的手,选择了贪吃蛇游戏.由于以前都是用c#写的,将贪吃蛇写到一个类里面,然后一个一个小方法的拆分,只向外提供需要提供的方法.这样就可以将贪吃蛇作为一个模块,任何地方都可以复用的.然而,用js进行编写的时候,由于不能很好的利用js语言的特性进行模块化编程,所以第一版的实现完全采用面向过程的方式,将函数中所需要的变量全部声明为全局变量.虽然这样也能够实现功能,但是做不到复用,而且定义非常多的最顶层变量,污染了全局变量.写

  • JavaScript实现跑马灯抽奖活动实例代码解析与优化（一）

    JavaScript实现跑马灯抽奖活动实例代码解析与优化（一）

    最近做了个项目,其中有项目需求是要实现跑马灯抽奖效果,实现此功能主要用到js相关知识,废话不多说,感兴趣的朋友可以阅读下全文. 开始之前先来看上篇文章遗漏的两个问题和几个知识点,是自己重构的过程中需要用到的: 1.移动端1px像素线的问题 对于设计师给我的手机端网页的设计稿都是2倍图.按照道理来说,在写网页的时候,所有对象的实际尺寸都是会除2.但是对于1像素的线呢? 先来看两张图,设计稿的效果: 在三星 S4下的实际显示效果: 可以看到这个时候1px的线竟然显示不出来了.这个问题是跟 S4手机的

随机推荐