![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript设计模式
文章平均质量分 60
晚来听雨雪
晚来天欲雪 能饮一杯无
展开
-
JavaScript设计模式 职责链模式
一.生活场景早高峰时,公交车上人实在太多了,经常上车后找不到售票员在哪,所以只好把两块钱硬币往前面递。除非你运气够好,站在你前面的第一个人就是售票员,否则,你的硬币通常要在 N 个人手上传递,才能最终到达售票员的手里。这种通过传递,最终传到售票员的模式就是职责链模式。二.定义职责链模式(Chain of Responsibility Pattern):使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止。请原创 2021-01-14 23:25:13 · 154 阅读 · 0 评论 -
JavaScript设计模式 模板方法模式
一.定义模板模式(Template Pattern):一个抽象类公开定义了执行它的方法的方式/模板。它的子类可以按需要重写方法实现,但调用将以抽象类中定义的方式进行。这种类型的设计模式属于行为型模式。二.Coffee or Tea(模板方法经典案例)现在我们需要用代码实现冲泡一杯咖啡和一杯茶,不妨分析一下步骤:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-id63AYqC-1610462824194)(http://img.jsmeng.top/%E5%92%96原创 2021-01-12 22:48:36 · 176 阅读 · 0 评论 -
JavaScript设计模式 迭代器模式
一.定义迭代器(Iterator)模式:迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。目前,主流浏览器都已支持Array.prototype.forEach方法,而forEach就是迭代器模式的实现。二.实现自己的迭代器each 函数接受 2 个参数,第一个为被循环的数组,第二个为循环中的每一步后将被触发的回调函数。var each = function (ary, callback) { for (var i = 0, l = ary.len原创 2021-01-12 09:26:01 · 147 阅读 · 0 评论 -
JavaScript设计模式 装饰者模式
一.生活场景现在有 4 种型号的自行车,我们为每种自行车都定义了一个单独的类。现在要给每种自行都装上前灯、尾灯和铃铛这 3 种配件。如果使用继承的方式来给每种自行车创建子类,则需要 4×3 = 12 个子类。但是如果把前灯、尾灯、铃铛这些对象动态组合到自行车上面,则只需要额外增加3 个类。这种给对象动态地增加职责的方式称为装饰者(decorator)模式。二.定义装饰者(decorator)模式:动态地给某个对象添加一些额外的职责,而不会影响从这个类中派生的其他对象。在不改变原有对象的基础之上原创 2021-01-11 10:15:54 · 344 阅读 · 3 评论 -
JavaScript设计模式 中介者模式
一.生活场景在机场中,塔台起着着中介者作用,有了塔台,附近需要降落的飞机就不需要互相通信,取而代之的是附近需要降落的飞机将信息发送给塔台,塔台统筹调度飞机。二.定义中介者(Mediator)模式:定义一个中介对象来封装一系列对象之间的交互,使原有对象之间的耦合松散,且可以独立地改变它们之间的交互。中介者模式又叫调停模式,它是迪米特法则的典型应用。中介者模式是一种对象行为型模式,其主要优点如下。类之间各司其职,符合迪米特法则。降低了对象之间的耦合性,使得对象易于独立地被复用。将对象间的一对原创 2021-01-08 14:05:35 · 201 阅读 · 0 评论 -
JavaScript设计模式 发布-订阅模式
一.生活场景小明、小红、小强最近看上了一个楼盘,到了售楼处之后才被告知,该楼盘的房子早已售罄。售楼MM 告诉他们,不久后有尾盘推出。小明、小红、小强离开之前,把电话号码留在了售楼处。售楼 MM 答应他们,新楼盘一推出就马上发信息通知。他们的电话号码都被记在售楼处的花名册上,新楼盘推出的时候,售楼 MM 会翻开花名册,遍历上面的电话号码,依次发送一条短信来通知他们。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kFHqUu1H-1610067262991)(http:/原创 2021-01-08 08:55:47 · 180 阅读 · 0 评论 -
JavaScript设计模式 代理模式
JavaScript设计模式(三) 代理模式一.生活场景明星都有经纪人作为代理。如果想请明星来办一场商业演出,只能联系他的经纪人。经纪人会把商业演出的细节和报酬都谈好之后,再把合同交给明星签。二.定义代理模式 :为一个对象提供一个代用品或占位符,以便控制对它的访问。虚拟代理: 把一些开销很大的对象,延迟到真正需要它的时候才去创建。缓存代理: 缓存代理可以为一些开销大的运算结果提供暂时的存储,在下次运算时,如果传递进来的参数跟之前一致,则可以直接返回前面存储的运算结果。三.应用场景1.原创 2021-01-06 17:14:05 · 105 阅读 · 0 评论 -
JavaScript设计模式 策略模式
策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。笔者以为,策略模式的思想在于将算法的使用与算法的实现分离开来。根据需求的不同,将各自的算法封装在一个函数中,不同的部分以入参形式传入函数,调用相应算法,利用多态性自由调用算法函数中的算法。表单验证便可借鉴策略模式的思想。策略模式的实现并不复杂,关键是如何从策略模式的实现背后,找到封装变化、委托和多态性这些思想的价值。以实现通用的一个表单验证为例:<body> <form id="reg.原创 2021-01-05 09:40:53 · 93 阅读 · 0 评论 -
JavaScript设计模式 单例模式
#JavaScript设计模式(一) 单例模式单例模式的定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点实际开发中我们可以用一个变量来标志当前是否已经为某个类(函数)创建过对象,如果是,则在下一次获取该类的实例时,直接返回之前创建的对象。实际应用中,比如浮层页面 下面举个例子:var login = function () { let div; return function () { if (!div) { div = docum原创 2020-12-30 10:44:23 · 133 阅读 · 0 评论