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 ...
随机推荐
- 牛客-小w的a=b问题
题目传送门 sol1:老实做,预处理出所有2到1e5的素数,对所有数进行分解质因数,然后对比因子个数.感觉有点卡常,用了快读然后多次优化之后才过的,map也用上了. 素数筛,快速分解质因数 #incl ...
- 网页中常见返回HTTP状态码含义
在日常网页浏览的过程中大家经常会碰到400,403,404,500,502等HTTP状态码,这些状态码对于一般用户来说出现什么都是一样的,反正就是页面打不开了,但是作为网站开发人员或者从事相关工作者认 ...
- seckill
京东自动登录 注:本文所做操作皆以京东web为例 包含:xpath,splinter,ocr 遇到的坑: 登录页面通过查看网页元素,能看到账户,密码唯一id,但是执行 12 browser.fill( ...
- Halcon算子函数
Chapter_1_:Classification 1.1 Gaussian-Mixture-Models 1.add_sample_class_gmm 功能:把一個訓練樣本添加到一個高斯混合模型的 ...
- Starting php-fpm [18-Jun-2019 12:56:59] NOTICE: PHP message: PHP Warning: Version warning提示报错解决
php-fpm在命令行重启时出现如下提示信息在终端上,虽然不影响使用,但是不够干净利落,参考了一篇国外博客得以解决,参考链接:https://community.centminmod.com/thre ...
- ConxtMenu高级用法
##背景我们经常在列表的页面中,点击列表中的行,一般进入详情页面,长按列表中一行,会弹出一个菜单,包含了对某一行的操作(编辑.删除等等),也知道通常的用法: 0x01. 在Activity中注册需要上 ...
- Proto3:C++ API概览
包名 说明 google::protobuf Protocol Buffer运行时库核心组件. google::protobuf::io I/O操作辅助类. google::protobuf::uti ...
- 用手机应用追踪城市噪声污染——微软Azure助力解决城市问题
噪声无孔不入的城市地带(图片来自于网络) 2014年4月19日发行的<经济学人>杂志预言,到2030年,中国人口的70%(约10亿人)会在城市中居住.中国城镇化的高速发展一方面大大提高了 ...
- 80 remove duplicates from sorted array 2
| 分类 leetcode | Follow up for "Remove Duplicates": What if duplicates are allowed at most ...
- Windows下python3登陆和操作linux服务器
一.环境准备 python3远程连接需要用到pycrytodome和paramiko库,其中后者依赖前者,所以按照顺序来安装 1. 安装pycrytodome 1 pip install pycryt ...