一、单例模式

1.保证一个类仅有一个实例,并提供一个访问它的全局访问点

2.设计思路:如果存在,不创建,直接返回,不存在才创建。

  在类的constructor方法里添加一个判断条件属性,并且让创建的实例赋给这个属性。判断该属性,没有则创建,有则返回该属性。

实际开发中,单例模式下最有用的是惰性单例

3.惰性单例指的是在需要的时候才创建对象实例。
  应用场景:当我们单击登录按钮的时候,页面中会出现一个登录浮窗,而这个登录浮窗是唯一的,无论单击多少次登录按钮,这个浮窗都只会被创建一次,那么这个登录浮窗就适合用单例模式来创建。
  这里将一个自执行函数给box,返回创建的这个登录浮窗,开始是隐藏的。点击事件触发后,改变box的display属性为block。
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';
}

二、组合模式

  组合模式将对象组合成树形结构,以表示“部分整体”的层次结构。 除了用来表示树形结构之外,组合模式的另一个好处是通过对象的多态性表现,使得用户对单个对象和组合对象的使用具有一致性。
应用:
1、也就是说,假如要封装个addClass函数,需要添加class值的节点可能是单个节点或者多个节点。函数内部通过判断是单个或多个节点,实现添加class,实现代码会针对两种情况做一定的修改。这样这个函数无论是单个或多个DOM节点添加class都能实现了。
2、如果遇到这种问题:实际开发时,可设置入口方法。每一个对象,都可以调用入口方法来调用类里的方法。但是如果实例对象过多,会造成冗余。
解决:在constructor方法里设置一个可以存储实例对象的数组,然后给一个execute方法,遍历执行数组方法里的对象的入口方法。
//组合模式解决。
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();//执行
三、观察者模式
发布——订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。在 JavaScript开发中,我们一般用事件模型来替代传统的发布 — 订阅模式。
To be continued......

JS的3种核心设计模式的更多相关文章

  1. js实现23种设计模式(收藏)

    js实现23种设计模式 最近在学习面向对象的23种设计模式,使用java 和 javascript 实现了一遍,但是因为目前大三,还没有比较正规的大项目经验,所以学习的过程种我觉得如果没有一定的项目经 ...

  2. 23种经典设计模式UML类图汇总

    在这里23种经典设计模式UML类图汇总       创建型模式 1.FACTORY—追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基 ...

  3. TensorFlow.js之安装与核心概念

    TensorFlow.js是通过WebGL加速.基于浏览器的机器学习js框架.通过tensorflow.js,我们可以在浏览器中开发机器学习.运行现有的模型或者重新训练现有的模型. 一.安装     ...

  4. javaEE Design Patter(1)初步了解23种常用设计模式

    设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接模式.组合模式.享元模式. ...

  5. js的6种继承方式

    重新理解js的6种继承方式 注:本文引用于http://www.cnblogs.com/ayqy/p/4471638.html 重点看第三点 组合继承(最常用) 写在前面 一直不喜欢JS的OOP,在学 ...

  6. 002-创建型-00-简单工厂【非23种GOF设计模式】

    一.概述 简单工厂模式是属于创建型模式,又叫做静态工厂方法(Static Factory Method)模式,但不属于23种GOF设计模式之一. 简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实 ...

  7. 细说 js 的7种继承方式

    在这之前,先搞清楚下面这个问题: function Father(){} Father.prototype.name = 'father'; Father.prototype.children = [ ...

  8. JAVA基础之两种核心机制

    突然之间需要学习Java,学校里学的东西早就忘记了,得用最短的时间把Java知识理顺,重点还是J2EE,毕竟所有的ava项目中95%都是J2EE,还是先从基础的J2SE学起吧....... 首先是了解 ...

  9. MyEclipse取消验证Js的两种方法

    MyEclipse取消验证Js的两种方法 作者: 字体:[增加 减小] 类型:转载 通过js写一个web工程的相关页面时感觉很卡,修改内存也不行下面有两种解决方法,大家可以尝试下 前言:有时我们通过j ...

随机推荐

  1. 牛客-小w的a=b问题

    题目传送门 sol1:老实做,预处理出所有2到1e5的素数,对所有数进行分解质因数,然后对比因子个数.感觉有点卡常,用了快读然后多次优化之后才过的,map也用上了. 素数筛,快速分解质因数 #incl ...

  2. 网页中常见返回HTTP状态码含义

    在日常网页浏览的过程中大家经常会碰到400,403,404,500,502等HTTP状态码,这些状态码对于一般用户来说出现什么都是一样的,反正就是页面打不开了,但是作为网站开发人员或者从事相关工作者认 ...

  3. seckill

    京东自动登录 注:本文所做操作皆以京东web为例 包含:xpath,splinter,ocr 遇到的坑: 登录页面通过查看网页元素,能看到账户,密码唯一id,但是执行 12 browser.fill( ...

  4. Halcon算子函数

    Chapter_1_:Classification 1.1  Gaussian-Mixture-Models 1.add_sample_class_gmm 功能:把一個訓練樣本添加到一個高斯混合模型的 ...

  5. Starting php-fpm [18-Jun-2019 12:56:59] NOTICE: PHP message: PHP Warning: Version warning提示报错解决

    php-fpm在命令行重启时出现如下提示信息在终端上,虽然不影响使用,但是不够干净利落,参考了一篇国外博客得以解决,参考链接:https://community.centminmod.com/thre ...

  6. ConxtMenu高级用法

    ##背景我们经常在列表的页面中,点击列表中的行,一般进入详情页面,长按列表中一行,会弹出一个菜单,包含了对某一行的操作(编辑.删除等等),也知道通常的用法: 0x01. 在Activity中注册需要上 ...

  7. Proto3:C++ API概览

    包名 说明 google::protobuf Protocol Buffer运行时库核心组件. google::protobuf::io I/O操作辅助类. google::protobuf::uti ...

  8. 用手机应用追踪城市噪声污染——微软Azure助力解决城市问题

    噪声无孔不入的城市地带(图片来自于网络) 2014年4月19日发行的<经济学人>杂志预言,到2030年,中国人口的70%(约10亿人)会在城市中居住.中国城镇化的高速发展一方面大大提高了 ...

  9. 80 remove duplicates from sorted array 2

    | 分类 leetcode  | Follow up for "Remove Duplicates": What if duplicates are allowed at most ...

  10. Windows下python3登陆和操作linux服务器

    一.环境准备 python3远程连接需要用到pycrytodome和paramiko库,其中后者依赖前者,所以按照顺序来安装 1. 安装pycrytodome 1 pip install pycryt ...