分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

JS设计模式(1)单例模式

发布时间:2023-09-06 02:10责任编辑:胡小海关键词:暂无标签

什么是单例模式

特点:1.只有一个实例。2.可以全局访问

主要解决:一个全局使用的类频繁地创建与销毁。

何时使用:当您想控制实例数目,节省系统资源的时候。

如何解决:判断系统是否已经有这个单例,如果有则返回,如果没有则创建。

优点: 1、在内存里只有一个实例,减少了内存的开销,尤其是频繁的创建和销毁实例(比如管理首页页面缓存)。 2、避免对资源的多重占用(比如写文件操作)。

缺点:没有接口,不能继承,与单一职责原则冲突,一个类应该只关心内部逻辑,而不关心外面怎么样来实例化。

使用场景: 1.全局缓存。2.弹窗

实现单例模式

const singleton = function(name) { ???this.name = name ???this.instance = null}singleton.prototype.getName = function() { ???console.log(this.name)}singleton.getInstance = function(name) { ???if (!this.instance) { // 关键语句 ???????this.instance = new singleton(name) ???} ???return this.instance}// testconst a = singleton.getInstance(‘a‘) // 通过 getInstance 来获取实例const b = singleton.getInstance(‘b‘)console.log(a === b)

因为 JavaScript 是无类的语言,而且 JS 中的全局对象符合单例模式两个条件。很多时候我们把全局对象当成单例模式来使用

var obj = {}

弹框层的实践

实现弹框的一种做法是先创建好弹框,然后使之隐藏,这样子的话会浪费部分不必要的 DOM 开销,我们可以在需要弹框的时候再进行创建,同时结合单例模式实现只有一个实例,从而节省部分 DOM 开销。下列为登入框部分代码:

//弹框层的实践const createLoginLayer = function() { ???const myDiv = document.createElement(‘div‘) ???myDiv.innerHTML = ‘登入浮框‘ ???// myDiv.style.display = ‘none‘ ???document.body.appendChild(myDiv); ???return myDiv}//使单例模式和创建弹框代码解耦const getSingle = function(fn) { ?let result = null; ?return function() { ?????if(!result){ ?????????result = fn.apply(this, arguments); ?????} ???return result; ?}}const createSingleLoginLayer = getSingle(createLoginLayer)document.getElementById(‘loginBtn‘).onclick = function() { ???createSingleLoginLayer()}

JS设计模式(1)单例模式

原文地址:https://www.cnblogs.com/wuguanglin/p/singleton.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved