JS的3种核心设计模式
一、单例模式
1.保证一个类仅有一个实例,并提供一个访问它的全局访问点
2.设计思路:如果存在,不创建,直接返回,不存在才创建。
在类的constructor方法里添加一个判断条件属性,并且让创建的实例赋给这个属性。判断该属性,没有则创建,有则返回该属性。
实际开发中,单例模式下最有用的是惰性单例。
const oBtn = document.querySelector('button');
let box = (function () {
let cDiv = document.createElement('div');
cDiv.innerHTML = '我是登录浮窗';
cDiv.style.display = 'none';
document.body.appendChild(cDiv);
return cDiv;
})();
oBtn.onclick = function () {
box.style.display = 'block';
}
不过这种方式有个问题:一开始就会有个display为none的div,这样浪费一些DOM节点。
解决:
这里box函数里通过return一个函数(这个函数里放如何实现创建这个浮窗),这样在点击事件触发前,不会执行return里的函数,也就不会创建浮窗。
const oBtn = document.querySelector('button');
let box = (function () {
let cDiv = null;//需要创建的对象
return function () {
if (!cDiv) {//不存在,创建
cDiv = document.createElement('div');
cDiv.innerHTML = '我是登录浮窗';
cDiv.style.display = 'none';
document.body.appendChild(cDiv);
}
return cDiv;//存在直接返回
}
})();
oBtn.onclick = function () {
let cdiv = box();
cdiv.style.display = 'block';
}
二、组合模式
//组合模式解决。
class Compose {
constructor() {
this.objarr = [];//存储对象的数组
}
add(obj) {//将实例化的对象添加到数组里面。
this.objarr.push(obj);
}
execute() {//遍历执行数组里面对象,对象调用入口方法。
for (let i = 0; i < this.objarr.length; i++) {
this.objarr[i].init();
}
}
}
let p1 = new Compose();
p1.add(new A());//添加实例化方法。
p1.add(new B());
p1.add(new C());
p1.execute();//执行
JS的3种核心设计模式的更多相关文章
- js实现23种设计模式(收藏)
js实现23种设计模式 最近在学习面向对象的23种设计模式,使用java 和 javascript 实现了一遍,但是因为目前大三,还没有比较正规的大项目经验,所以学习的过程种我觉得如果没有一定的项目经 ...
- 23种经典设计模式UML类图汇总
在这里23种经典设计模式UML类图汇总 创建型模式 1.FACTORY—追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基 ...
- TensorFlow.js之安装与核心概念
TensorFlow.js是通过WebGL加速.基于浏览器的机器学习js框架.通过tensorflow.js,我们可以在浏览器中开发机器学习.运行现有的模型或者重新训练现有的模型. 一.安装 ...
- javaEE Design Patter(1)初步了解23种常用设计模式
设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接模式.组合模式.享元模式. ...
- js的6种继承方式
重新理解js的6种继承方式 注:本文引用于http://www.cnblogs.com/ayqy/p/4471638.html 重点看第三点 组合继承(最常用) 写在前面 一直不喜欢JS的OOP,在学 ...
- 002-创建型-00-简单工厂【非23种GOF设计模式】
一.概述 简单工厂模式是属于创建型模式,又叫做静态工厂方法(Static Factory Method)模式,但不属于23种GOF设计模式之一. 简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实 ...
- 细说 js 的7种继承方式
在这之前,先搞清楚下面这个问题: function Father(){} Father.prototype.name = 'father'; Father.prototype.children = [ ...
- JAVA基础之两种核心机制
突然之间需要学习Java,学校里学的东西早就忘记了,得用最短的时间把Java知识理顺,重点还是J2EE,毕竟所有的ava项目中95%都是J2EE,还是先从基础的J2SE学起吧....... 首先是了解 ...
- MyEclipse取消验证Js的两种方法
MyEclipse取消验证Js的两种方法 作者: 字体:[增加 减小] 类型:转载 通过js写一个web工程的相关页面时感觉很卡,修改内存也不行下面有两种解决方法,大家可以尝试下 前言:有时我们通过j ...
随机推荐
- Jumpserver 一键部署(支持离线安装)
1.教程介绍1.1::通过本教程起到抛砖引玉效果,希望各位喜爱Jumpserver堡垒机的朋友受益良多. 1.2::以下提供的任何软件仅供学习交流使用. 2.下载链接2.1::centos_1810最 ...
- 荼菜的iOS笔记--UIView的几个Block动画
前言:我的第一篇文章荼菜的iOS笔记–Core Animation 核心动画算是比较详细讲了核心动画的用法,但是如你上篇看到的,有时我们只是想实现一些很小的动画,这时再用coreAnimation就会 ...
- 吴裕雄--天生自然python学习笔记:Python3 迭代器与生成器
迭代器 迭代是Python最强大的功能之一,是访问集合元素的一种方式. 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退 ...
- keepalive笔记之二:keepalive+nginx(自定义脚本实现,上述例子也可以实现)
keepalive的配置文件 ! Configuration File for keepalived global_defs { notification_email { acassen@firewa ...
- 了解DocumentFragment 给我们带来的性能优化
首先我们需要了解 DocumentFragment 是什么? w3c 上面的详细解释:link here 我把关键点写下来了: DocumentFragment 节点不属于文档树,继承的 parent ...
- 秒搭Kubernetes之使用Rancher
Rancher 在接触Docker和K8s的前阶段就耳闻目睹到Rancher,但是没有进一步接触过.直到将K8s搭建完成.才进一步了学习与实践Rancher. Rancher是简便易用的容器管理.其中 ...
- 对RLC重排序窗口大小的一点讨论
在LTE协议栈的PDCP层和RLC层,都有一个重排序窗口(reordering window),主要用来保证数据的可靠传输,PDCP层的重排序窗口主要用于handover时保证数据的可靠传输,这里暂且 ...
- 从Note 5看三星大招 究竟能不能秒杀iPhone
5看三星大招 究竟能不能秒杀iPhone" title="从Note 5看三星大招 究竟能不能秒杀iPhone"> 从当年HTC发布第一代Android手机G1开始 ...
- nginx增加访问验证
使用OpenSSL实用程序创建密码文件 如果您的服务器上安装了OpenSSL,则可以创建没有附加软件包的密码文件.我们将在/ etc / nginx配置目录中创建一个名为.htpasswd的隐藏文件来 ...
- Python的Flask框架开发RESTful API
web框架选择 Django,流行但是笨重,还麻烦,人生苦短,肯定不选 web.py,轻量,但据说作者仙逝无人维护,好吧,先pass tornado,据说倡导自己造轮子,虽然是facebook开源的吧 ...