一、单例模式

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. Jumpserver 一键部署(支持离线安装)

    1.教程介绍1.1::通过本教程起到抛砖引玉效果,希望各位喜爱Jumpserver堡垒机的朋友受益良多. 1.2::以下提供的任何软件仅供学习交流使用. 2.下载链接2.1::centos_1810最 ...

  2. 荼菜的iOS笔记--UIView的几个Block动画

    前言:我的第一篇文章荼菜的iOS笔记–Core Animation 核心动画算是比较详细讲了核心动画的用法,但是如你上篇看到的,有时我们只是想实现一些很小的动画,这时再用coreAnimation就会 ...

  3. 吴裕雄--天生自然python学习笔记:Python3 迭代器与生成器

    迭代器 迭代是Python最强大的功能之一,是访问集合元素的一种方式. 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退 ...

  4. keepalive笔记之二:keepalive+nginx(自定义脚本实现,上述例子也可以实现)

    keepalive的配置文件 ! Configuration File for keepalived global_defs { notification_email { acassen@firewa ...

  5. 了解DocumentFragment 给我们带来的性能优化

    首先我们需要了解 DocumentFragment 是什么? w3c 上面的详细解释:link here 我把关键点写下来了: DocumentFragment 节点不属于文档树,继承的 parent ...

  6. 秒搭Kubernetes之使用Rancher

    Rancher 在接触Docker和K8s的前阶段就耳闻目睹到Rancher,但是没有进一步接触过.直到将K8s搭建完成.才进一步了学习与实践Rancher. Rancher是简便易用的容器管理.其中 ...

  7. 对RLC重排序窗口大小的一点讨论

    在LTE协议栈的PDCP层和RLC层,都有一个重排序窗口(reordering window),主要用来保证数据的可靠传输,PDCP层的重排序窗口主要用于handover时保证数据的可靠传输,这里暂且 ...

  8. 从Note 5看三星大招 究竟能不能秒杀iPhone

    5看三星大招 究竟能不能秒杀iPhone" title="从Note 5看三星大招 究竟能不能秒杀iPhone"> 从当年HTC发布第一代Android手机G1开始 ...

  9. nginx增加访问验证

    使用OpenSSL实用程序创建密码文件 如果您的服务器上安装了OpenSSL,则可以创建没有附加软件包的密码文件.我们将在/ etc / nginx配置目录中创建一个名为.htpasswd的隐藏文件来 ...

  10. Python的Flask框架开发RESTful API

    web框架选择 Django,流行但是笨重,还麻烦,人生苦短,肯定不选 web.py,轻量,但据说作者仙逝无人维护,好吧,先pass tornado,据说倡导自己造轮子,虽然是facebook开源的吧 ...