javascript中的设计模式(一)

单例模式(single)

单例模式简单来说就是向外只输出一个实例,对于js来说,一个字面量,一个数组都可以说是单例。
单例的应用场景:
比如我们有一个事件管理器(观察者模式),我们需要他在一处订阅另一处发布,那就要保证两处引用的是同一实例,那么你写的文件向全局输出的就应该只有一个实例。

class EventBus {
 // ```
}
const eventBus = new EventBus();
export default eventBus;

优化点:
单例因为需要全局唯一,所以生成的时间点有时会很重要,如果一个实例开销巨大,我们并不像再声明时就执行他,而需要在第一次引用时才去生命,那我们需要用到懒汉单例的形式。比如:

class EventBus {
//
}
let eventBus;
export default function getInstance() {
  return eventBus || (eventBus = new EventBus())
}

以上第一种我们称为饿汉式单例,后者称为懒汉式单例。
他们在后端语言中各有优缺点,懒汉式节省资源,而饿汉式线程安全。但因为js本身就是单线程的语言,所以如果仅仅是写web前端的代码的话,我们可以尽量应用懒汉式单例的模式。

工厂模式(factory)

工厂模式根据不同条件返回不同的实例,我们最常说的工厂模式的作用就是隐藏new
比如Array.from 来代替 new Array 我们就可以说是一种工厂模式
工厂模式非常重要,因为他对开闭原则与接口原则有非常重要的实践,他也是最不被理解的一种模式之一,因为他让本来很简单的代码复杂度直线上升。
首先,工厂模式的写法是为了以后扩展的方便,之后的逻辑变更可以通过扩展而不是修改代码来完成,那么你的代码就是成功的。
但是,因为工厂模式涉及到了很多接口,类,抽象,重写的概念,所以在js里不能够很好的实践,或者说,我们平常写代码,并不会应用这些对象的概念来编写代码,毕竟js本身还是函数为第一顺位的语言,也许当ts成为主流时,他的在前端的实践意义会变得更大。
具体的代码就不写了,简单的很简单会觉得像废话,复杂的很复杂,但在js里我不觉得有实践意义。

原型模式(prototype)

原型模式的定义: 是指用原型实例指向创建对象的种类,并且通过拷贝这些原型创建新的对象
而js的new这一过程很好的实践了上面的这句话:
创建一个空对象,让构造函数的this指向这个空对象,并执行该构造函数。设置原型链,将对象的proto成员指向了构造函数对象的prototype成员对象。

建造者模式(builder)

通过分布,拆分等方式构建复杂逻辑的过程,可以成为建造者模式。
其实我们应用vue以及react通过简单组件构建复杂页面,就是建造者模式。

以上四种设计模式称为创建型模式。工厂模式的抽象与方法模式定义由于个人觉得实践场景不突出,所以没有单独细分。

这四种都是创建时经常用到的类型,比如我们构建复杂页面时对模块的拆分其实就是建造者模式,我们寻求一个文件在全局的唯一就是在应用单例模式。再比如boots代码里代替你实例化boots的对象的过程就可以称为工厂。

但我们不必纠结于他到底是什么设计模式,毕竟设计模式也不过是应用中重复开发与优化解决方案的总结,也许你不知道这些,但其实在不知不觉中,已经开始在应用设计模式了。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 10,722评论 0 21
  • 创建型模式 工厂模式 工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设...
    隔墙送来秋千影阅读 7,611评论 0 11
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,904评论 1 32
  • 创建型模式 工厂模式 工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设...
    liuyang7519阅读 2,695评论 0 2
  • 1.简单工厂模式(静态工厂方法) (1)模式动机:只要知道水果名就可以得到相应的水果 (2)在简单工厂模式中,可以...
    XMUBeike阅读 3,785评论 0 0

友情链接更多精彩内容