JavaScript设计模式之单例模式【惰性单例】
在提高开发水平,往中高级前端工程师中,利用设计模式是必不可少的一条道路。掌握设计模式的思想远远比硬套重要,因为设计模式是一种思想,不局限于开发语言。但实际上由于语言的特性不同,往往在实现的时候会有不少差异。
《javascript设计模式文章系列》是参照《JavaScript设计模式与开发事件》以及网络博客结合自身经验总结所写,希望在写下文章分享知识的同时能够加深记忆。
javascript设计模式之单例模式
如果你学过Java那么你会想到先定义单例类,然后提供getInstance静态方法返回单例对象。但由于javascript是一种无类语言,基于原型!所以在实现上略有不同。但单例模式的核心就是:唯一对象,并且供全局使用。
- 我们可以利用全局变量来模拟单例模式(就是往window对象中添加属性),但通常不推荐这种做法,因为全局的东西损耗性能,容易污染。优化的方式可自行查询
- 惰性单例(重中之重)在实际应用中,这种单例模式非常常见且有用。惰性单例也就是说单例对象只有到使用到的时候才创建,相反就是一开始就创建单例对象然后等待使用。
- 通用惰性单例,在惰性单例的基础下优化,更加遵循职责单一的原则
惰性单例:
场景登陆弹窗 :在实际开发中,如果使用到需要登陆的功能则自动弹出登陆弹窗提醒用户进行登陆,如果此时用户取消登陆再次点击则又会弹出登陆弹窗。也就是说,登陆弹窗可能会反反复复的多次弹出。
普通实现方式:
1.先创建登陆div到页面中
2.当点击登陆,显示登陆div
3.当点击取消,隐藏登陆div
<button id='btnLogin'></button>
<script>
//自执行函数,创建登陆Pop并返回元素
let loginPop = (function () {
let loginDiv = document.createElement('div');
loginDiv.style.display = 'none';
document.body.appendChild(loginDiv);
// 点击弹窗则取消显示
loginDiv.onclick = function () {
loginDiv.style.display = 'none';
};
return loginDiv;
})();
// 点击则显示
document.getElementById('btnLogin').onclick = function () {
loginPop.style.display = 'block';
};
</script>
这样会存在一个问题,不管用户需不需要登陆,这里都创建了登陆div。如何优化?
<!-- 单例方式 -->
<script>
let createLoginPop = (function () {
let loginDiv; // 闭包 : 该对象常存
return function () {
if (!loginDiv) {
loginDiv = document.createElement('div');
loginDiv.style.display = 'none';
document.body.appendChild(loginDiv);
loginDiv.onclick = function () {
loginDiv.style.display = 'none';
};
}
return loginDiv;
}
})()
// 在使用的时候才创建登陆div
document.getElementById('btnLogin').onclick = function () {
let loginDiv = createLoginPop();
loginDiv.style.display = 'block';
}
</script>
但是该案例仍然存在问题: 不够通用【违反了单一原则,单例逻辑与创建登陆div在同个函数内】。
假设增加天气Pop,该就得复制粘贴代码了。记住时刻带着理解程序中变与不变的逻辑,将其拆分。
单例的实现逻辑不会变,但单例所创建的是登陆Pop,天气Pop这些是会变化的。
通用惰性单例
<!-- 单例方式 : 通用 -->
<script>
// 创建登陆Pop 返回创建的元素
let createLoginPop = function () {
let loginDiv = document.createElement('div');
loginDiv.style.display = 'none';
document.body.appendChild(loginDiv);
loginDiv.onclick = function () {
loginDiv.style.display = 'none';
};
return loginDiv;
}
// 创建天气Pop 返回创建的元素
let createWeatherPop = function () {
let loginDiv = document.createElement('div');
loginDiv.style.display = 'none';
document.body.appendChild(loginDiv);
loginDiv.onclick = function () {
loginDiv.style.display = 'none';
};
console.log(loginDiv);
return loginDiv;
}
// 单例模式
let getSingle = function (createElFn) {
var result; // 闭包 : 该对象常存
return function () {
return result || (result = createElFn.apply(this, arguments));
}
}
// 这一步很关键,这里一种单例只能调用一次
let getLoginPop = getSingle(createLoginPop);
let getWeatherPop = getSingle(createWeatherPop);
document.getElementById('btnLogin').onclick = function () {
// 调用多次仍是同一个对象
let loginDiv1 = getLoginPop();
let loginDiv2 = getLoginPop();
loginDiv1.style.display = 'block';
console.log(loginDiv1 === loginDiv2);
}
document.getElementById('btnWeather').onclick = function () {
let weatherDiv = getWeatherPop();
weatherDiv.style.display = 'block';
}
</script>
这里可能比较难理解的是闭包的方式。但一定要掌握,因为js中的设计模式很多都离不开闭包,传递函数作为参数的方式去实现。所以认真仔细研究一下。彻彻底底把闭包搞懂。
这篇文章先到这里!!
JavaScript设计模式之单例模式【惰性单例】的更多相关文章
- Javascript设计模式学习二(单例)
定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点 普通的单例模式: 使用一个变量来标记当前是否已经为某个类创建过对象,如果是的话,在下一次获取该类的实例时,直接返回之前创建的对象.比如:使用 ...
- JavaScript 设计模式之----单体(单例)模式
设计模式之--单体(单例)模式 1.介绍 从本章开始,我们会逐步介绍在JavaScript里使用的各种设计模式实现,在这里我不会过多地介绍模式本身的理论,而只会关注实现.OK,正式开始. 在传统开发工 ...
- 第一章 --- 关于Javascript 设计模式 之 单例模式
首先我们对单例模式先进行理论上的讲解,接下来,我们再通过具体的代码示例,来讲解,这个单例模式的使用场景和这种模式的优缺点 (这个系列的所有关于设计模式的都是面向Javascript) 一.理论定义: ...
- 再起航,我的学习笔记之JavaScript设计模式10(单例模式)
单例模式 单例模式(Singleton) : 又被称为单体模式,是只允许实例化一次的对象类.一个类有且仅有一个实例,并且自行实例化向整个系统提供. 命名空间 单例模式可能是JavaScript中我们最 ...
- JavaScript设计模式之单例模式
一.单例模式概念 单例就是保证一个类只有一个实例,实现方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象.在JavaScript里,单例作为一个 ...
- JavaScript设计模式(单例模式)
单例模式是一种简单但非常实用的模式,特别是惰性单例技术,在合适的时候才创建对象,并且只创建唯一的一个.下面我们来逐步了解单例模式的用法. 一.简版单例模式: var Singleton = funct ...
- 小菜学习设计模式(二)—单例(Singleton)模式
前言 设计模式目录: 小菜学习设计模式(一)—模板方法(Template)模式 小菜学习设计模式(二)—单例(Singleton)模式 小菜学习设计模式(三)—工厂方法(Factory Method) ...
- GOF设计模式之1:单例设计模式
1.单例设计模式核心作用: 保证一个类只有一个实例,并且提供了访问该实例的全局访问点 2.常见应用场景: window的任务管理器 项目中读取配置文件一般也是一个单例模式 数据库连接池的设计也是采用单 ...
- 学习javascript设计模式之单例模式
1.单例模式的核心是确保只有一个实例,并提供全局访问. 2.惰性单例 指的是在需要的时候才创建对象实例. 如在页面中创建唯一div 普通做法 var createDiv = (function(){ ...
随机推荐
- 0.9循环=lim(n趋于无穷大)(1-1/10的n次方),所以这是一个极限问题
0.9循环=lim(n趋于无穷大)(1-1/10的n次方),所以这是一个极限问题 因为lim(...)(1-1/10的n次方)=1 这意味着维尔斯特拉斯发明极限定义之前,这个等号是不成立的,因为没有极 ...
- flask中的endpoint是什么
app.view_functions 是一个字典,里面是存储的是 endpoint 与 视图函数的键值对,如果没指名函数视图的endpoint,默认是函数名,而 url_map 是一个列表,里面是ur ...
- logrotate nginx日志切割
1.安装 centos: yum -y install logrotate ubuntu: apt-get install -y logrotate 2. 配置文件 /etc/logrotate.co ...
- python beautifulsoup基本用法-文档搜索
以如下html段落为例进行介绍 <html> <head> <title>The Dormouse's story</title> </head& ...
- 【扩展推荐】Intervention/image 图片处理
Intervention/image 是为 Laravel 定制的图片处理工具, 它提供了一套易于表达的方式来创建.编辑图片. 一.环境要求 二.安装及配置 下载地址:https://packagis ...
- 在npm发布自己造的轮子
提到封装组件,发布到npm,很多同学都会觉得很神秘.但其实,npm包无非就是我们平时写的比较独立且可复用的模块.当然,想要发布,除了基础组件的编写外,还要进行一些包装.下文通过一个简单的案例,和大家一 ...
- dubbo泛化调用 小demo
前两天刚好有个同事来问是否用过 dubbo泛化 调用,不需要通过指定配置.第一次听到的时候,还是有点懵,但觉得有意思,可以学点东西. 立马百度了,找了demo,这篇比较容易上手(http://www. ...
- python数据处理书pdf版本|内附网盘链接直接提取|
Python数据处理采用基于项目的方法,介绍用Python完成数据获取.数据清洗.数据探索.数据呈现.数据规模化和自动化的过程.主要内容包括:Python基础知识,如何从CSV.Excel.XML.J ...
- isinstance方法判断可迭代和迭代器
from collections import Iterable print(isinstance([],Iterable)) print(isinstance( {}, Iterable)) pri ...
- C#与网络相关的两个监听的事件
今天遇到一个问题,当网络连接有问题的时候设计软件向用户发送通知,查了资料发现了两个相关的事件分享一下. 一.System.Net.NetworkInformation命名空间下的NetworkChan ...