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

前言

今天在复习设计模式中的-创建型模式,发现JS实现单例模式的方案有很多种,稍加总结了一下,列出了如下的6种方式与大家分享

大体上将内容分为了ES5(Function)与ES6(Class)实现两种部分

单例模式的概念

单例模式就是在系统中保存一个实例,就是一个全局变量,在团队开发中,为了实现一些相似的功能,比如不同页面之间的表单验证,可能需求是不一样的,但是呢命名可能一样,这时就会产生冲突,这时候单例模式就能很好的解决这个问题。

  • 一个实例只生产一次
  • 保证一个类仅有一个实例,并提供一个访问它的全局访问点

说说它的优点:

1,单例模式声明一个命名空间,它生成一个唯一的全局变量,一个命名空间,可以用声明对象的方式来声明:

var mapleTao={ name:"mapleTao",init:function(){console.log(this.name)}};

有木有发现这个和对象有点类似呢,其实name,init是它的属性,通过mapleTao.name就获取它name的值,通过mapleTao.init()就可以调用init方法,这样在哎处理多需求页面,多人开发时就能很好的解决命名冲突的问题,以及可以更好的维护代码,更好的控制代码。

2,单例模式在全局中只声明一个变量,大家都知道在js中,假设你写了一个方法,如 function aa(){},这样就会在window中生成一个叫aa的变量,当实现一个功能时,在代码封装中,会创建好多函数,好多function,这样就会在window中创建好多变量,会占用更多的内存单元,全局变量的作用域很广,在众多处理函数中都可能改变,这样当出现bug时不容易快速找到,而通过单例模式创建的对象变量中可以更快速的找到问题,从而解决,这大大减少的问题修复的时间以及系统加载的时间。

3.在实现同一个功能的地方比通过new新创建对象对内存对资源的占用更据优势。

方式1

利用instanceof判断是否使用new关键字调用函数进行对象的实例化

function User() {
    if (!(this instanceof User)) {
        return
    }
    if (!User._instance) {
        this.name = '无名'
        User._instance = this
    }
    return User._instance
}

const u1 = new User()
const u2 = new User()

console.log(u1===u2);// true

方式2

在函数上直接添加方法属性调用生成实例

function User(){
    this.name = '无名'
}
User.getInstance = function(){
    if(!User._instance){
        User._instance = new User()
    }
    return User._instance
}

const u1 = User.getInstance()
const u2 = User.getInstance()

console.log(u1===u2);

方式3

使用闭包,改进方式2

function User() {
    this.name = '无名'
}
User.getInstance = (function () {
    var instance
    return function () {
        if (!instance) {
            instance = new User()
        }
        return instance
    }
})()

const u1 = User.getInstance()
const u2 = User.getInstance()

console.log(u1 === u2);

方式4

使用包装对象结合闭包的形式实现

const User = (function () {
    function _user() {
        this.name = 'xm'
    }
    return function () {
        if (!_user.instance) {
            _user.instance = new _user()
        }
        return _user.instance
    }
})()

const u1 = new User()
const u2 = new User()

console.log(u1 === u2); // true

当然这里可以将闭包部分的代码单独封装为一个函数

在频繁使用到单例的情况下,推荐使用类似此方法的方案,当然内部实现可以采用上述任意一种

function SingleWrapper(cons) {
    // 排除非函数与箭头函数
    if (!(cons instanceof Function) || !cons.prototype) {
        throw new Error('不是合法的构造函数')
    }
    var instance
    return function () {
        if (!instance) {
            instance = new cons()
        }
        return instance
    }
}

function User(){
    this.name = 'xm'
}
const SingleUser = SingleWrapper(User)
const u1 = new SingleUser()
const u2 = new SingleUser()
console.log(u1 === u2);

方式5

在构造函数中利用new.target判断是否使用new关键字

class User{
    constructor(){
        if(new.target !== User){
            return
        }
        if(!User._instance){
            this.name = 'xm'
            User._instance = this
        }
        return User._instance
    }
}

const u1 = new User()
const u2 = new User()
console.log(u1 === u2);

方式6

使用static静态方法

class User {
    constructor() {
        this.name = 'xm'
    }
    static getInstance() {
        if (!User._instance) {
            User._instance = new User()
        }
        return User._instance
    }
}

const u1 = User.getInstance()
const u2 = User.getInstance()

console.log(u1 === u2);

总结

到此这篇关于JS实现单例模式的文章就介绍到这了,更多相关JS单例模式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • js单例模式的两种方案

    方案一:利用闭包的两个作用,可以变通地读到内部的变量,二是可以让这些变量始终在内存中. 复制代码 代码如下: //方案一     var SingletonTester = (function () {         //单例方法         function Singleton(args) {             var args = args || {};             this.name = 'SingletonTester'; //方法对外的属性,另外一种方式就是返回

  • JavaScript的单例模式 (singleton in Javascript)

    单例模式的基本结构: 复制代码 代码如下: MyNamespace.Singleton = function() { return {}; }(); 比如: 复制代码 代码如下: MyNamespace.Singleton = (function() { return { // Public members. publicAttribute1: true, publicAttribute2: 10, publicMethod1: function() { ... }, publicMethod2

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

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

  • javascript 单例模式演示代码 javascript面向对象编程

    js的单例写法 JS单例模式 div{height:100px; width:100px; background:#CCC; border:#000 1px solid;} my = new function yangbin() { this.name = "我是单例funnyzak!"; }; function yangbin1(){ this.name = "我是funnyzak!"; } function myname(){ var u = new yangb

  • js单例模式详解实例

    什么是单例? 单例要求一个类有且只有一个实例,提供一个全局的访问点.因此它要绕过常规的控制器,使其只能有一个实例,供使用者使用,而使用着不关心有几个实例,因此这是设计者的责任 复制代码 代码如下: In JavaScript, Singletons serve as a shared resource namespace which isolate implementation code from the global namespace so as to provide a single po

  • JS设计模式之单例模式(一)

    命名空间 单例模式是JavaScript中最常见的一种模式,通过这种模式可以为我们提供一个命名空间,例如jQuery库的命名空间为jQuery或$.命名空间的使用是为了让代码更加整洁,在多人协作开发的情况下,不同的人定义的变量很有可能重复,此时就需要使用命名空间来约束每个人定义的变量,使相同名称的变量放在不同的命名空间中,避免相互干扰.例如: // A程序员的命名空间 var A = { get: function(id){ return document.getElementById(id);

  • [js高手之路]单例模式实现模态框的示例

    什么是单例呢? 单,就是一个的意思.例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能new出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如:弹出一个模态框,一般来说在网站中弹出的模态框,不停的一直点击,一般只能创建一个.还有后台的数据库连接,一般都是保证一个连接等等.今天的主题就是单例在模态框中的应用,我们先要搞清楚,怎么弄个单例出来. 我们先看下普通的构造函数加原型方式.下面这种是常见的方式 function Singleton (

  • 轻松掌握JavaScript单例模式

    定义:保证一个对象(类)仅有一个实例,并提供一个访问它的全局访问点: 实现原理:利用闭包来保持对一个局部变量的引用,这个变量保存着首次创建的唯一的实例;  主要用于:全局缓存.登录浮窗等只需要唯一一个实例的时候: 一. 为一个非单例模式对象(如:Demo)实现单例模式的方法:  给Demo添加一个静态方法来实现单例: Demo.getSingle = (function(){ var demo = null; return function(name){ if(!demo){ demo = ne

  • JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能

    本文实例讲述了JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能.分享给大家供大家参考,具体如下: 单例模式 单例模式的核心结构中只包含一个被称为单例的特殊类.通过单例模式可以保证系统中一个类只有一个实例 单例模式最初的定义出现于<设计模式>(艾迪生维斯理, 1994):"保证一个类仅有一个实例,并提供一个访问它的全局访问点." 单例模式定义:"一个类有且仅有一个实例,并且自行实例化向整个系统提供." var Singleton

  • JavaScript设计模式之单例模式实例

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

随机推荐