【javascript基础——系列6】常见的5种JavaScript设计模式;发布订阅者模式

前端 专栏收录该内容
37 篇文章 0 订阅

系列文章

【javascript基础——系列1】前端页面ajax连接后台服务器传输数据

【javascript基础——系列2】前端页面axios连接后台服务器传输数据

【javascript基础——系列3】js中的事件的事件冒泡、事件捕获

【javascript基础——系列4】关于js的数据类型以及判别方法

【javascript基础——系列5】js的defer和async;parsesint;图片压缩

【javascript基础——系列6】常见的5种JS设计模式;发布订阅者模式

【javascript基础——系列7】变量提升函数提升;内存泄漏

【javascript基础——系列8】函数传参传递值还是引用;函数式编程

【javascript基础——系列9】函数防抖与节流

【javascript基础——系列10】js中隐藏元素的几种方法以及代码

【javascript基础——系列11】跨域存在的原因以及解决办法



一、常见的5种JavaScript设计模式

  1. 工厂模式
  2. 构造函数模式
  3. 单例模式
  4. 发布订阅模式
  5. 观察者模式

1.1 工厂模式

工厂模式是创建对象的一种最常用的设计模式,不暴露创建对象的具体逻辑,而是将逻辑封装在一个函数中,那么这个函数就可以被视为一个工厂。
通过对传递参数的预定,返回不同的对象实例,但是这三种实例的内部构造都非常相似,因此还可以对其进行优化。


1.2 构造函数模式

在js中每个对象都可以看成通过new一个function来创建的,而这个过程基于可以看成构造器模式

var MYobj=function(){
this.name='scott';
}
var obj=new Myobj();
console.log(obj.name)

1.3 单例模式

单例模式是js中最常见的一种模式,主要是保证一个类仅有一个实例,并且提供一个访问它的全局访问点。通过这种模式可以为我们提供一个命名空间,例如jquery库的命名空间为jquery或$,命名空间的使用是为了让代码更加整洁,在多人协作的情况下,不同的人定义的变量很可能重复,此时就需要使用命名空间来约束每个人定义的变量,使用相同名称变量放在不同的命名中,避免相互抗干扰。


function SetManager(name) {
  this.manager = name;
}
 
SetManager.prototype.getName = function() {
  console.log(this.manager);
};
 
var SingletonSetManager = (function() {
  var manager = null;
 
  return function(name) {
    if (!manager) {
        manager = new SetManager(name);
    }
 
    return manager;
  }
})();
 
SingletonSetManager('a').getName(); // a
SingletonSetManager('b').getName(); // a
SingletonSetManager('c').getName(); // a



1.4 发布订阅者模式

举一个简单的例子,你在博客上关注了A,同时其他人也关注了A,那么A在发动态时,大家都能知道,A就是发布者,你就是订阅者,博客就是调度中心。

而发布订阅模式就是指:订阅者(subscriber)把自己想订阅的事件(subscribe)注册到调度中心(topic),当发布者(publisher)发布该事件(publish topic)到调度中心,也就是该事件触发时,由调度中心统一调度(fire event)订阅者注册到调度中心处理代码。

在这里插入图片描述


1.5 观察者模式

观察者(observer)直接订阅(subscribe)主题,当主题被激活时,会触发(fire event)观察者里的事件:
在这里插入图片描述


码字不易~, 各位看官要是看爽了,可不可以三连走一波,点赞皆有好运!,不点赞也有哈哈哈~~~

  • 5
    点赞
  • 6
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

内容简介   《JavaScript设计模式》共分六篇四十章,首先讨论了几函数的编写方式,体会JavaScript在编程中的灵活性;然后讲解了面向对象编程的知识,其中讨论了的创建、数据的封装以及之间的继承;最后探讨了各模式的技术,如简单工厂模式,包括工厂方法模式、抽象工厂模式、建造模式、原型模式、单例模式,以及外观模式,包括适配器模式。本书还讲解了几适配器、代理模式、装饰模式和MVC模式,讨论了如何实现对数据、视图、控制器的分离。在讲解MVP模式时,讨论了如何解决数据与视图之间的耦合,并实现了一个模板生成器;讲解MVVM模式时,讨论了双向绑定对MVC的模式演化。本书几乎包含了关于JavaScript设计模式的全部知识,是进行JavaScript高效编程必备的学习手册。   《JavaScript设计模式》适合JavaScript初学、前端设计JavaScript程序员学习,也可以作为大专院校相关专业师生的学习用书,以及培训学校的教材。 作简介   张容铭,百度资深高级web前端研发工程师,长期工作在web前端一线上,现研发与维护百度图片搜索业务,曾主导百度新首页项目改版等。喜欢钢琴,素描,而又常带着他的单反各地旅行。 精彩书评   ★认识张容铭是在2012年年底的时候,那时张容铭来公司实习,大家都觉得这小伙子实力不俗。而且很爱钻研。在得知容铭利用业余时间完成了本书的创作,作为他的朋友,真替他感到高兴!短短几年,进步如此迅速,在前端实战开发方面有着这么多的积累,有时也会让我自愧不如。   在Web应用日益丰富的今天,越来越多的JavaScript被运用在我们的网页中。随着用户体验日益受到重视,前端的可维护性、前端性能对用户体验的影响开始备受关注,因此如何编写高效的可维护的代码,成为众多互联网公司争相研究的对象。   本书通过对话的方式详细地介绍了各设计模式的原则和准确定义、应用方法和实践,全方位比较各模式之间的异同,详细讲解不同模式的使用方法。   “极具趣味,容易理解,但讲解又极为严谨和透彻”是本书的写作风格和最大特点。希望大家在学到知识的同时,能够感受到作的风趣幽默。   最后,希望本书能够帮助业界同仁打造出更为卓越的Web产品。   ——阿里巴巴集团(淘宝) 高级Web前端研发工程师 王鹏飞   ★在百度工作的时间里,和张容铭共事过一段时光,在相处的过程中就发现张容铭对设计模式的研究和应用有很大的热情,投入精力很多,且在应用上有很好的理解和收获。本书可以说是张容铭多年来积累的技术经验的总结,涵盖了绝大多数设计模式;叙述方面采用新人与导师对话的方式,风趣幽默、通俗易懂,非常适合JavaScript初学和前段开发工程师学习。   ——百度 高级前端研发工程师 杨坤
©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值