JavaScript设计模式之单例模式

海军 等级 298 0 0

JavaScript 设计模式 之旅

JavaScript设计模式之单例模式

设计模式开篇

日常开发中,我们都很注重开发技巧,好的开发 技巧可以事半功倍得解决此刻的问题。

那么这些技巧如何来得呢?

我的理解: 经过不断踩坑,解BUG,总结出来一些处理对应问题解决方案,这就所谓的 技巧

说起设计模式,其实我们日常开始中也经常用到,只是你不知道用的解决方案方案对应的设计模式名称.

学习设计模式的作用

在软件设计中,模式是一些经过了大量实际项目验证的优秀解决方案。熟悉这些模式的程序员,对某些模式的理解也会自然的形成条件反射。当遇到合适的场景出现时,可以快速找到对应的模式来处理当前的问题。

单例模式

定义: 保证 类 仅有 一个实例,并可以全局访问这个实例.

全局变量 不是 单例模式,但是在JavaScript 中, 我们经常把单例模式当作全局变量使用。

因为它满足单例模式的两点:

  • 创建的全局变量是独一无二的
  • 它可以全局访问这个变量实例
// login.js
var loginInfo = {
  username: '',
    token: '',
    .......
}



//login.vue

import logins from './login.js'

logins.name =  this.username

但是它也有缺点,容易造成命名空间污染。

定义的全局变量多了, 会覆盖掉之前定义的全局变量,这样会造成不必要的BUG.

如何处理命名空间污染呢?

如何处理呢?

  • 1.使用命名空间
  • 2.使用闭包封装私有变量

命名空间

对象自变量的形式:

// login.js
export default var loginInfo = {
    names:'' ,
    token: '',
    setName: function (name) {
        this.names = name
    },
    getName: function () {
        return this.name
    }
}


//login.vue
import logins from './login.js'

logins.token =  this.token

使用闭包封装私有变量

把一些变量封装在闭包内部,只暴露一些接口跟外界通信。

外界是访问不到 内部定义的私有变量的,这样就避免了全局命令污染。

var user = (function () {
    //外界是访问不了 _name _age 
    var _name = '张三',
        _age = 22;
    
        return {
            //这块留给外界通信用
            getUserInfo: function () {
                console.log(`姓名为:${_name},年龄为:${_age}`) 
            }
        }
})()
                                                                                                                                              
user.getUserInfo()

通用的惰性单例模式

在该执行的情况下,执行操作步骤 / DOM.

优点: 节约了性能。

场景1

有时候,例如登陆弹窗,在加载首页的同时,它会渲染这个页的全部DOM,如果首页DOM 内容多,加载速度也会相应的很慢,有很多不需要DOM提前渲染。

这时,可以通过惰性单例模式来解决此问题,例如单击了登陆按钮,才会创建登陆弹窗的DOM,并且记录此次点击状态,如果下次还要打开,只是更改 DOM 的 styledisplay 属性即可。 这样节约了首页加载时间,提升页面性能。

// 定义全局通用单例模式
var getSingle = function (fn) {
    var result;
    return function () {
        return result || (result = fn.apply(this, arguments));
    }
}

// 创建登陆窗口
var createLoginLayer =  function() {
    var div = document.createElement('div')
    div.innerHTML = '登陆框'
    div.style.display = 'none'
    document.body.appendChild(div)
    return div
}

//  创建单例模式 登陆框
var createSingleLoginLayer =  getSingle(createLoginLayer);

document.getElementById('btn').onclick = () => {
    // 获取单例模式中 返回得登陆框
    var  loginLayer = createSingleLoginLayer();
    // 改变样式
    loginLayer.style.display = 'block'
}
场景2

创建唯一的 iframe 用于加载第三方页面

var createSingleIframe =  getSingle( function() {
    var iframe = document.createElement('iframe');
    document.body.appendChild(iframe)
    return iframe
})

document.getElementById('redirect').onclick = () => {
    var  iframeLayer = createSingleIframe();
    iframeLayer.src = 'http://www.baidu.com'
}

本文使用 👉mdnice 排版

参考资料

<<JavaScript 设计模式与开发实践>>


JavaScript设计模式之单例模式

本文内容如有错的地方,欢迎各位大佬指正,学习了😆
收藏
评论区

相关推荐

创建型模式之单例设计模式
什么是单例设计模式? 顾名思义,只有一个实例。 单例模式它主要是确保一个类只有一个实例,并且可以提供一个全局的访问点。 废话少说,直接上干货了 单例模式之饿汉式 所谓饿汉式,顾名思义,“ 它很饿 ”。所以说,它一旦被加载进来,就会直接实例化一个对象。 例如: language class Singleton { private static fin
c++11 实现单例模式
C11出来后,里面新增加了好多好用的功能 下面的单例就是使用了C11中的标准库中的mutex和unique_prt 进行内存管理的. 此单例模式不用担心内存的释放问题 pragma once include <memory include <mutex template <class T class Singleton { public: ty
[占山为王]我是如何四步将一个微信小程序请求库改成Taro的
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; color: black; padding: 0 10px; lineheight: 1.6; wordspacing: 0px; lettersp
JavaScript设计模式之单例模式
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; color: black; lineheight: 1.6; wordspacing: 0px; letterspacing: 0px; word
[前端必知 ]HTTP or TCP/IP 基础
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; padding: 0 10px; wordspacing: 0px; wordbreak: breakword; wordwrap: break
多人协作必备技能Git
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; color: black; padding: 0 10px; lineheight: 1.6; wordspacing: 0px; lettersp
全栈进阶:Nginx基本功能及其原理
<div class"output_wrapper" id"output_wrapper_id" style"fontsize: 16px; color: rgb(62, 62, 62); lineheight: 1.6; wordspacing: 0px; letterspacing: 0px; fontfamily: 'Helvetica
2021前端技术面试必备Vue:(一)基础快速学习篇
由于疫情的影响,相信很多小伙伴都在家里待着。中小公司由于运营困难会出现裁员, 我们也面临着 '失业',你是否感到了焦虑.最近做了个调研: '现在的你找到工作了吗 ?<br/1.大部分的回复: 求职平台都是 ‘已回复’,然后没有下文,你遇到了吗?<br/2.各个公司对技术的要求增高<br/3.有人说开始搞副业<br/ 在我来看,这一年已经过去了四分
2021前端技术面试必备Vue:(三)Router篇
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"padding: 0 10px; wordspacing: 0px; wordwrap: breakword; textalign: left; fontfamily: Opti
2021前端技术面试必备Vue:(四)Vuex状态管理
前三章陆续已经更新了Vue基本使用 和Vue Router的基本使用,如果你读了前三篇文章的话,并且掌握差不多,那么你现在可以开发简单的应用了,例如Blog,电商网站........唯一不足的是,随着你的业务需求不断增加,页面中的状态数据也不断庞大,维护起来就特别困难了,Vue 提供了一种状态管理 解决办法 Vuex,它的思想和React 的R
Webpack 打包资源篇
<section datatools"新媒体排版" dataid"13439" datastyletype"9" style"visibility: visible;"<p style"maxwidth: 100%; visibility: visible;"<br mpafromtpl"t" style"visibility
目前最全的第三方平台 授权(OAuth2.0)登录接入指南
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; color: black; padding: 0 10px; lineheight: 1.6; wordspacing: 0px; lettersp
什么是索引?Mysql目前主要的几种索引类型
一、索引MySQL索引的建立对于MySQL的高效运行是很重要的,索引可以大大提高MySQL的检索速度。打个比方,如果合理的设计且使用索引的MySQL是一辆兰博基尼的话,那么没有设计和使用索引的MySQL就是一个人力三轮车。索引分单列索引和组合索引。单列索引,即一个索引只包含单个列,一个表可以有多个单列索引,但这不是组合索引。组合索引,即一个索引包含多个列。创
【单例深思】饿汉式
1、抛出问题1. 为什么饿汉式单例是线程安全的?2. 为什么饿汉式单例没有延迟加载(Lazy Loading)? 2、JVM类加载机制饿汉式单例的实现:javapublic class Singleton private static Singleton singleton new Singleton(); private S
Python基础7——单例模式
15 单例模式 15.1 init和new方法执行步骤1. 实例化一个对象,先执行new方法,在new方法中返回对象2. 然后再调用init方法 15.1.1 \\init\\方法init 是构造方法<font color"red"其实最先调用的方法是new方法</font,但是大部分情况下是不使用new方法pythonclass Test(object):