JavaScript设计模式笔记(一)单例模式

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

对于面向对象的语言来说,单例模式即是一个类仅能有一个实例,并提供一个能访问它的全局访问点。

我们使用JavaScript来模仿面向对象中语言的单例模式

var singleton = function(name) {
    this.name = name;
    this.flag = null;
}

var create = function(name) {
    if (!singleton.flag)
        singleton.flag = new singleton(name);
    return singleton.flag;
}

var s1 = create("a")
var s2 = create("b")
console.log(s1 === s2) // true

这里的create方法只能在第一次创建实例,在后面创建实例时,会返回原来已经创建的实例,此即为单例模式。

为了符合单一职责,我们可以使用代理来把创建实例和控制其唯一性分开

var singleton = function(name) {
    this.name = name;
}

var create = function(name) {
    return new singleton(name);
}

var createProxy = (function() {
    var instance;
    return function(name) {
        if (!instance)
            instance = create(name)
        return instance;
    }
})()

var s1 = createProxy("a")
var s2 = createProxy("b")
console.log(s1 === s2)

我们也可以使用ES6中的代理来实现

var singleton = function(name) {
    this.name = name;
}

var proxy = (function() {
    var flag;
    return new Proxy(singleton, {
        construct(name) {  //  用于拦截new操作
            if (!flag)
                flag = Reflect.construct(singleton, name)  //  重新执行new操作
            return flag;
        }
    })
})()

var a = proxy("a")
var b = proxy("b")
console.log(a === b)

JavaScript实际上是一个没有类的对象(ES6中的class虽然被称为类,但实际上还是委托机制,其继承还是基于原型的),所以在JavaScript中的单例模式,即是确保只有一个实例,且能在全局中访问它。

而事实上,我们通过对象字面量创建对象时就是一个单例模式

var a={}

对于a这个对象,它是独一无二的,只要把它放在全局中,就符合了我们上面关于单例模式的定义。

但是,放在全局中的变量,很有可能在后面的代码中被不小心重新赋值了,在大型项目中,把变量放在全局中显然不是我们的首要选择,我们需要尽可能避免使用全局变量,与此同时,我们又想使用单例模式,就需要进行一些处理。

1.使用命名空间

将要使用的单例放在命名空间中,可以减少全局变量的数量,简单的方法就是使用一个对象来存储单例,但是事实上这个存储单例的对象就是污染空间的全局变量

var whole = {
    a: {},
    b: {}
}

whole作为一个全局变量为单例提供了一个访问单例的全局访问点,且这个实例是唯一的,所以a,b这两个对象/实例是单例

2.使用闭包封装单例

将要使用的单例使用闭包封装起来,返回一个对象提供访问闭包内的实例的方法,实际上这种方法也会对全局造成一定的污染,只是相比直接在全局中定义单例减少了对全局的污染。

var whole = (function() {
    var __a = {}
    return {
        getA: () => __a
    }
})()

参考自曾探的《JavaScript设计模式与开发实践》

从踩坑到填平:我在RHEL7上给Tesla A100装驱动的完整记录(含Fabric Manager配置) 本文详细记录了在RHEL7系统上为Tesla A100安装Nvidia驱动的完整过程,包括Fabric Manager配置的关键步骤。通过分析A100架构的特殊性,提供了从驱动安装到服务配置的详细指南,并分享了常见问题的排查方法和性能调优技巧,帮助用户高效部署高性能GPU计算环境。 阅读详情

相关推荐

RK3588内核崩溃日志捕获:pstore与ramoops的实战配置指南

本文详细介绍了在RK3588嵌入式设备上配置pstore与ramoops以捕获内核崩溃日志的实战指南。通过内核配置调整、设备树设置及高级调试技巧,帮助开发者有效定位系统崩溃原因,特别适合户外智能设备等无法长期连接调试器的场景。文章还提供了生产环境优化建议,确保日志捕获的可靠性与安全性。

weixin_29189363的博客 407

js设计模式之单例模式

单例模式也称为单体模式,保证一个类仅有一个实例,并提供一个访问它的全局访问点

楠姐的博客 8223

局域网tcp通信实验

IPv4 地址 . . . . . . . . . . . . : 192.168.92.79。IPv4 地址 . . . . . . . . . . . . : 192.168.92.59。子网掩码 . . . . . . . . . . . . : 255.255.255.0。子网掩码 . . . . . . . . . . . . : 255.255.255.0。使用这篇文章的小工具。

weixin_51883798的博客 434

js单例模式

一、单例模式 单例模式就是通过单独的一个实例化对象,在调用函数方法时,输入不同的参数数据,执行对应的程序效果。 多个对象可以优化 原始方法: 根据不同的数据,创建不同的实例化对象,在实例化对象中,存储不同的数据数值,函数直接调用实例化对象中的数据数值 优化方法: 创建实例化对象时,不设定存储数据,调用函数时,输入需要的参数,定义生成一个实例化对象,就可以执行所有需要的效...

Canace_Xyxjjcaw的博客 3124

论文学习:Towards Automated Infographic Design:Deep Learning-based Auto-generation of Extensible Timeline

title: “Towards Automated Infographic Design:Deep Learning-based Auto-generation of Extensible Timeline” tags: [“论文评述”, “报告”] date: 2019-08-22 author: 叶慧 mathjax: true 论文:Towards Automated Infograph...

xiaoyehahaha的博客 731

aistudio高效解压zip文件的实用技巧

本文详细介绍了在百度AI Studio平台上高效解压ZIP文件的实用技巧。针对深度学习项目数据准备中的常见痛点,重点讲解了使用Python zipfile库和Linux unzip命令两种核心方法,并提供了路径设置、大文件处理、中文乱码等关键问题的解决方案,帮助用户提升数据处理效率。

salt的博客 784

js设计模式 -- 单例模式

什么是单例模式? 保证一个类仅有一个实例,并提供一个访问它的全局访问点,这样的模式就叫做单例模式。 那么如何实现单例模式呢? 有两种方法: 1.我们现在把这段判断逻辑写成一个静态方法(其实也可以直接写入构造函数的函数体里): 2.我们也可以使用闭包来实现。 可以看出,在getInstance方法的判断和拦截下,我们不管调用多少次,SingleDog都只会给我们返回一个实例,s1和s2现在都指向这个唯一的实例。 工作实例 近年来,基于 Flux 架构的状态管理工具层出不穷,其中应用最广泛的要数 Redu

weixin_42282727的博客 1724

从SPICE到电磁场:非线性器件在CST场路协同仿真中的建模艺术

本文深入探讨了非线性器件在CST场路协同仿真中的建模技术,重点分析了SPICE模型与电磁场仿真的集成方法。通过对比线电流模型和面电流模型的优缺点,结合实际案例展示了二极管阵列在电磁散射调控中的应用,为工程师提供了优化仿真精度与效率的实用技巧。

pandas7gardener的博客 198

javascript设计模式(一)-单例模式(读书笔记)

单例模式 定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点。 用途:如线程池、全局缓存、浏览器中的window对象等,在JS开发中,如登录浮窗。 实现简单的单例模式 // 代码块1 var Singleton = function( name ){ this.name = name; this.instance = null; }; // 代码块2 Singleton.prototype.getName = function(){ return this.name };

weixin_43275787的博客 332

ESP32之 ESP-IDF + Clion 开发环境搭建(二)—— Linux版

本文介绍了 Linux 下,使用Clion IDE 用官方 ESP-IDF 开发包进行 ESP32 开发的环境搭建

Augtons 的博客 6098

LangChain + PlayWright实战:5分钟搞定网页自动化测试(附完整代码)

本文详细介绍了如何利用LangChain与PlayWright构建智能网页自动化测试系统。通过环境配置、核心架构设计、实战Agent构建及性能优化等步骤,开发者可以快速实现高效的Web操作自动化,提升测试效率。文章还提供了完整代码示例和典型问题解决方案。

weixin_27791839的博客 239

《JavaScript设计模式》初次笔记——wsdchong

《JavaScript设计模式》初次笔记 前言 设计模式一直久仰大名,但是没有去花时间去了解,于是今天特意花时间去看《JavaScript设计模式》(2013年6月出版)和w3cschool上的设计模式。然后做了一些笔记。 以《JavaScript设计模式》为目录,以w3cschool上的设计模式为补充。 讲的内容有三:设计模式、JavaScript设计模式、其他(模块化的JavaScript设计模式、jQuery设计模式、jQuery插件设计模式)。 学习目的:尝试性地了解JavaScript设计模式,方

wsdchong的博客 1万+

基于Android平台下的健康管理APP/基于android的健康管理系统

随着网络科技的发展,移动智能终端逐渐走进人们的视线,相关应用越来越广泛,并在人们的日常生活中扮演着越来越重要的角色。因此,关键应用程序的开发成为影响移动智能终端普及的重要因素,设计并开发实用、方便的应用程序具有重要的意义和良好的市场前景。Android技术作为当前最流行的操作平台,自然也存在着大量的应用服务需求。 本课题研究的是基于Android技术平台的健康管理APP,开发这款健康管理APP主要是为了帮助用户可以不用约束时间与地点进行所需信息。本文详细讲述了健康管理APP的界面设计及使用,主要包括界面的

m0_73706453的博客 1437

JavaScript 设计模式 —— 单例模式

在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案 —— 设计模式 设计模式原则:“找出程序中变化的地方,并将变化封装起来”

weixin_46653793的博客 1236

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

JavaScript 设计模式之js中的单例模式

javascript是一门无类语言,也正是因为如此,生搬硬套单例模式的概念毫无意义。在Javascript中创建对象的方法非常简单,既然我们只需要一个唯一的“对象”,为什么要为它先创建一个“类呢”? 单例模式的核心是:确保只有一个实例,并且提供全局访问 全局模式不是单例模式,但在Javascript开发中,我们经常会把全局变量当作单例来使用。例如: var a={}; 当用这种方式创建对象a的时...

仇益阳的博客 2万+

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

JavaScript设计模式----单例模式

声明:这个系列为阅读《JavaScript设计模式与开发实践》 —-曾探@著一书的读书笔记1.单例模式的特点和定义 保证一个类仅有一个实例,并且提供一个访问它的全局访问点。 2.传统面向对象语言的单例模式2.1传统语言描述的单例模式JavaScript实现var Singleton = function(name) { this.name = name; this.instanc

强子的专栏 1万+

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

JavaScript设计模式(一)单例模式、组合模式和外观模式

作者 Joseph Zimmerman http://www.joezimjs.com 创建日期 19 March 2012 本文是介绍 JavaScript 采用的常见设计模式系列文章的首篇文章。 设计模式是一些可靠的编程方式,有助于保证您的代码更加易于维护、扩展及分离,所有设计模式在创建大型 JavaScript 应用程序(特别是在大群体

buptlyz的专栏 1万+

【JavaScript 设计模式】单例模式

1. 什么是单例模式? 2. 单例模式的实现 3. Vue中的单例模式 3.1 Element UI 3.2 Vuex 4. 单例模式的优缺点 5. 单例模式的使用场景

公众号:前端充电宝 1073

JavaScript设计模式

JavaScript设计模式 **设计模式:**代码经验的总结,是可重用的用于解决软件设计中一般问题的方案。 设计模式都是面向对象的。 学习设计模式,有助于写出可复用和可维护性高的程序。 常用的12种设计模式: 工厂模式 单例模式 原型模式 适配器模式 代理模式 策略模式 迭代器模式 观察者模式 发布-订阅模式 命令模式 组合模式 建造者模式 设...

林夏天的博客 7171

JS设计模式之单例模式

在了解单例模式之前,我们要先搞懂什么是设计模式: 比较官方的设计模式定义:就是在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。 当然说白了就是:设计模式对某个特定场景下对某种问题的解决方案。 所以,我们在合适的场景下可能会条件反射一样自然而然想到符合这种场景的设计模式。 所有的设计模式的共同目标都是:高内聚,低耦合。 我们在日常的开发当中,都或多或少地接触了设计模式,但是很多时候不...

huangfuyk.的博客 5265

JavaScript 设计模式之单例模式

什么是单例模式? 单例模式的定义是:保证一个类仅有一个实例,并提供一个访问它的全局访问点 单例模式是一种常用的模式,有一些对象往往我们只需要哦一个,比如线程池,全局缓存,浏览器中的Windows对象等。 在JavaScript中,单例模式的用途非常广泛,试想一下,当我们单击登陆按钮的时候,页面上会出现一个悬浮框,并且这个悬浮框是唯一的,无论点击多少次登陆按钮,这个悬浮窗只会出现一次,那么这个登...

仇益阳的博客 2万+

JavaScript设计模式读书笔记(一)=> 创建型设计模式

简单工厂模式 为了尽量减少地创建全局变量,同一类对象在不同需求中的重复性使用。通过对简单工厂来创建一些对象,可以让这些对象共用一些资源而又私有一些资源。对于简单工厂模式来说,它的使用场合通常也就限制在创建单一对象。 // e.g. function createPop(type, text) { const o = {}; o.content = text; o.show = func...

翾的博客 894

JavaScript 设计模式——单例模式

是一种创建型设计模式,让你能够保证一个类只有一个实例,并提供一个访问该实例的全局节点。

Starry_Firmament的博客 599

js设计模式之 单例模式与应用场景

1.介绍 单例模式(Singleton Pattern)是设计模式中最简单的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 这种模式涉及到一个单一的类,该类负责创建自己的对象,同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式,可以直接访问,不需要实例化该类的对象。 简而言之:就两点 系统中被唯一使用 一个类只有一个实例 单例模式思想在项目中经...

weixin_43964148的博客 1351

设计模式——单例模式

学习了这么长的时间,设计模式却还是浅尝辄止,而且最近在回顾Vue知识的时候,发现了很多常见的设计模式:观察者啊,单例啊什么的。让我意识到,如果想要去读懂Vue底层的话,设计模式的思想是必不可少的。虽然是在学前端,但是准备通过java来学习设计模式,因为毕竟java是一个强类型的语言,通过java能更直观的去学习设计模式的思想。同时也会尽量去将设计模式通过JavaScript的方式实现出来。字面上来看,就是只有一个实例的模式。简单来说,单例模式就是在整个系统中,保持一个实例,不生成新实例的模式。当然并不是说仅

qq_45670042的博客 1248
上一篇: JavaScript null VS undefined
下一篇: JavaScript设计模式笔记(二)策略模式
前端小黑
博客等级 码龄9年 148粉丝 222原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值