JavaScript - 设计模式 - 命名空间

---

本小节主要讲解三种常用的设计模式和命名空间,第一种是工厂模式,第二种是单利模式,第三种是观察者模式

---

设计模式概述

是为了解决在开发中可能遇到的需求(相似),而提出的一套解决方法.

设计模式要求：

• 在开发中整个系统需要一套设计模式（架构师）
• 来源：建筑（建房子）领域
• 设计模式的四人帮： Erich Gamma、Richard Helm、Ralph Johnson 和 John Vlissides
• 设计模式：总共有23种．
• **设计模式类型：单利（例）模式　｜观察者模式　｜　代理模式　｜工厂模式　｜适配器模式　｜桥接模式 | .... **
• 设计模式的书：＜设计模式＞＜大话设计模式｜大话数据结构＞＜23种常见的设计模式＞

工厂模式

批量创建大量的同类型的对象

优点 :

• 可以通过统一的借口来创建对象,根据传入的参数不同来创建不同的对象,易于扩展和维护,稳定性更好

核心过程 :

• 提供一个父构造函数
• 设置这个父构造函数的原型对象(属性|方法)
• 在父构造函数身上添加静态工厂方法

1.需要接收传入的参数(要生产的产品的类型)
2.判断 是否支持生产
3.设置子构造函数的原型对象
4.把新创建的对象返回

• 定制合作伙伴

• 直接使用父构造函数的静态工厂方法来创建指定的产品对象

• 示例代码 :

单利模式

在整个程序的运行过程中,一个类只有一个实例对象

js中的单利模式

• js没有类(ES6才有的) ,js实现单利模式(限定讨论的范围)

1.字面量
2.内置构造函数(Array Date Function Object)
3.工厂函数
4.自定义构造函数(单利模式)

• js是什么样的语言

1.弱类型,脚本,轻量级,面向对象,基于原型(对象),解释行语言.函数式.
2.js到底是不是一门面向对象(类)的语言?
3.js是一门支持面向对象的语言.(封装|继承|多态)

单利模式实现之后的表现

var p1 = new 构造函数()
var p2 = new 构造函数()
p1 == p2

• 示例代码 :

单利模式的实现方式01 ----> 全局变量

全局变量来保存对象实现单利模式

• 提供一个全局的变量
• 提供一个构造函数Person
• 在构造函数内部先判断全局变量是否有值,如果有那么就直接返回
• 如果没有,那么就把this赋值给全局变量
• 通过this设置属性和方法

存在的问题

• 使用一个全局变量来保存单利对象,该全局变量在整个作用域中都可以被访问或者是修改,可能会轻易的被覆盖或者是修改.

• 修改之后,创建出来的实例对象就不再是之前的那个单利对象了.

• 示例代码 :

单利模式的实现方式02 ----> 静态属性

静态成员:直接添加到构造函数身上的属性或者是方法

存在的问题

• 构造函数的静态属性其实也可能被修改,因此这种方法也不安全

• 示例代码 :

单利模式的实现方式03 ----> 惰性函数

核心过程

• 提供一个构造函数

• 在构造函数内部声明一个私有的变量

• 使用惰性函数定义更新构造函数的实现(直接把instance返回)

• 设置原型对象[新构造函数的原型对象 = 旧构造函数的原型对象]
  构造函数,prototype == 对象.proto

• 使用新的构造函数创建实例对象,并且赋值给instance

• 修正对象的构造函数指向

• 通过instance设置实例属性和方法

• 示例代码 :

单利模式的实现方式04 ----> 全局变量 + 即时函数

• 示例代码 :

观察者模式

观察者模式举例说明

• 男生A和男生B同时都喜欢女生C,他们想时时监视女生C的动向,动态,所以他们找了女生C的闺蜜作为观察者帮他们监视实时动态.这样不管女生C有什么最新的动态都会被男生A和男生B监听到,开发中就是男生多了点,动态多了点,核心内容就是这样

• 要求:

女神:rose(发布者)
男生:jack(订阅者)
男生:tom(订阅者)

• 过程:

创建或者是设置一个发布者
创建订阅者对象
注册订阅者
测试(发状态)

• 示例代码1 : 一个发布者,两个订阅者,关注的是一个状态

• 示例代码2 : 多个状态

• 示例代码4 : 订阅者成为发布者

备忘模式(函数结构缓存)

特定场合:

• 计算的函数f()
• 某些参数需要进行大规模反复的计算,可以考虑吧计算的结果保存起来

    f(n) ..... =>1000m
    代码中某些参数可能会反复计算
    f(10) ===>ssddd
    f(10) ===>ssddd

使用一个缓存对象cacheObj{key-value}

• 思路:

1.提供一个全局的对象(缓存对象),key-value
2.当我们传递参数需要进行计算(逻辑)的时候,先检查缓存对象中是否有对应的结果
3.如果有缓存数据,那么就直接使用(可以节省时间,提高效率)
4.如果没有缓存数据,那么这个时候再执行计算操作,处理得到结果之后,把这个数据保存起来
5.函数的参数作为缓存对象的key,把函数计算的结果作为这个key对应的值

• 示例代码 :

命名空间模式:

写法:就是把所有的东西都写在一个对象里面.

命名:命名空间的名称一般是项目的名称或者是简写,要求所有的字符都大写

• 示例代码 :

通用的命名空间函数

在命名空间上面提供一个方法(nameSpace)

• 得到调用函数传入的字符串
• 把字符串转换为字符串数组
• 把MOMO最外层去掉(删除)
• 遍历
• 示例代码 :

---

截至今日,面向对象和JavaScript进阶内容已经全部更新完毕! 内容是比较详细的,只要跟着每一篇的博文仔细学习,比你看网上的垃圾视频强多了 ! 理论和实践相结合 更多的是得动手去敲,以后还请大家多多关注更新,日后定会上一些新颖的东西和大家见面 !

---