作用

JavaScript设计模式的作用 - 提高代码的重用性，可读性，使代码更容易的维护和扩展。

正文

单例模式

确保一个类仅有一个实例，并提供一个访问它的全局访问点。一般我们是这样实现单例的，用一个变量来标志当前的类已经创建过对象，如果下次获取当前类的实例时，直接返回之前创建的对象即可

单例模式下对象只会实例化一次，我们可以利用闭包，当该对象已经存在的时候，直接返回该对象，否则重新创建

var singleton = function( fn ){var result;return function(){return result || ( result = fn .apply( this, arguments ) );}
}
var createMask = singleton( function(){
return document.body.appendChild( document.createElement('div') );})

http://www.alloyteam.com/2012/10/common-javascript-design-patterns/

工厂模式

提供一个创建一系列相关或相互依赖对象的接口，而无需指定他们具体的类。
工厂就是把成员对象的创建工作转交给一个外部对象，好处在于消除对象之间的耦合(何为耦合？就是相互影响)。通过使用工厂方法而不是new关键字及具体类，可以把所有实例化的代码都集中在一个位置，有助于创建模块化的代码，这才是工厂模式的目的和优势。

能解决多个相似的问题，但不能知道对象识别的问题(对象的类型不知道)
使用工厂模式生成xhr

var XMLHttpFactory =function(){};　　　　　　//这是一个简单工厂模式XMLHttpFactory.createXMLHttp =function(){var XMLHttp = null;if (window.XMLHttpRequest){XMLHttp = new XMLHttpRequest()}elseif (window.ActiveXObject){XMLHttp = new ActiveXObject("Microsoft.XMLHTTP")}return XMLHttp;}//XMLHttpFactory.createXMLHttp()这个方法根据当前环境的具体情况返回一个XHR对象。var AjaxHander =function(){var XMLHttp = XMLHttpFactory.createXMLHttp();...}

抽象工厂模式

将其成员对象的实列化推迟到子类中，子类可以重写父类接口方法以便创建的时候指定自己的对象类型。父类就变成了一个抽象类，但是父类可以执行子类中相同类似的方法，具体的业务逻辑需要放在子类中去实现。

定义函数实现子类继承父类，然后子类重写父类中的抽象方法。
工厂中定义多个抽象类，实现具体子类继承抽象类
实现方式—>https://segmentfault.com/a/1190000012422055

策略模式

定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换
使用策略模式重构代码，可以消除程序中大片的条件分支语句。在实际开发中，我们通常会把算法的含义扩散开来，使策略模式也可以用来封装一系列的“业务规则”。只要这些业务规则指向的目标一致，并且可以被替换使用，我们就可以使用策略模式来封装他们

普通模式

  var awardS = function (salary) {return salary * 4};var awardA = function (salary) {return salary * 3};var awardB = function (salary) {return salary * 2};var calculateBonus = function (level, salary) {if (level === 'S') {return awardS(salary);}if (level === 'A') {return awardA(salary);}if (level === 'B') {return awardB(salary);}};calculateBonus('A', 10000);

策略模式

  var strategies = {'S': function (salary) {return salary * 4;},'A': function (salary) {return salary * 3;},'B': function (salary) {return salary * 2;}}var calculateBonus = function (level, salary) {return strategies[level](salary);}calculateBonus('A', 10000);

模板方法模式

模板方法模式使用了原型链的方法，封装性好，复用性差
模板方法模式由二部分组成，第一部分是抽象父类，第二部分是具体实现的子类，一般的情况下是抽象父类封装了子类的算法框架，包括实现一些公共方法及封装子类中所有方法的执行顺序，子类可以继承这个父类，并且可以在子类中重写父类的方法，从而实现自己的业务逻辑。

模板方法是基于继承的设计模式，可以很好的提高系统的扩展性。 java中的抽象父类、子类
模板方法有两部分结构组成，第一部分是抽象父类，第二部分是具体的实现子类。

实现：父类定义方法，子类实现方法（抽象工厂模式封装了继承函数）。
示例---->https://blog.csdn.net/ligang2585116/article/details/50365276

职责链模式

职责链，一系列可能处理请求的对象被连接成一条链，请求在这些对象之间依次传递，直到遇到一个可以处理它的对象，减少了很多重复代码。

使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。

https://div.io/topic/1800#1职责链模式的定义

发布订阅者模式（观察者模式）

发布订阅模式，顾名思义，就是一个发布消息，一个监听消息，当有消息接收时处理消息。

function Publisher(name) {this.name = '报纸' + name// 订阅了本出版社的读者列表this.subscribers = [];
}// 添加一个迭代方法，遍历所有投递列表
Publisher.prototype.deliver = function(data) {// 遍历当前出版社对象所有的订阅过的方法const context = thisthis.subscribers.forEach(function(fn) {//data用于传参数给内部方法fn.fire(context.name, data);});return this;
}// 观察者
function Observe(callback) {this.fire = callback;
}// 给予订阅者阅读的能力
Observe.prototype.subscribe = function(publisher) {var that = this;// some如果有一个返回值为true则为truevar alreadyExists = publisher.subscribers.some(function(el){// 这里的el指的是函数对象return el.fire === that.fire // 查看是否已经订阅了，如果订阅了就不再订阅});// 如果存在这个函数对象则不进行添加if (!alreadyExists) {publisher.subscribers.push(this);}return this;
};// 给予观察者退订的能力
Observe.prototype.unsubscribe = function(publisher) {var that = this;// 过滤，将返回值为true的重组成数组publisher.subscribers = publisher.subscribers.filter(function(el) {// 这里的el.fire指的是观察者传入的callback// that.fire就是当前对象对callback的引用return !(el.fire === that.fire) // 删除掉订阅})return this;
};var publisher1 = new Publisher('xixi');// 实例化的读者，这个需要改进
var observer1 = new Observe(function(publisher, text) {console.log('得到来自'+publisher +'的订阅消息：'+ text + ',哈哈哈')
});
var observer2 = new Observe(function(publisher, text) {console.log('得到来自'+publisher +'的订阅消息：'+ text + ',嘻嘻嘻')
});// 读者订阅了一家报纸,在报社可以查询到该读者已经在订阅者列表了，
// publisher1.subscribers->[observer1]
observer1.subscribe(publisher1);
observer2.subscribe(publisher1)
// 分发报纸，执行所有内在方法
publisher1.deliver(13);// 输出123// 退订
observer1.unsubscribe(publisher1);
publisher1.deliver(12388);

桥接模式
https://segmentfault.com/a/1190000012547750
适配器模式

适配器模式（Adapter）是将一个类（对象）的接口（方法或属性）转化成客户希望的另外一个接口（方法或属性），适配器模式使得原本由于接口不兼容而不能一起工作的那些类（对象）可以一些工作。

https://segmentfault.com/a/1190000012436538

代理模式

代理模式的定义是把对一个对象的访问, 交给另一个代理对象来操作.

保护代理、虚拟代理（图片预加载）、缓存代理
https://juejin.im/post/5a68491cf265da3e5661b342#heading-0

前端面试题目整理——设计模式相关推荐

最近美团前端面试题目整理
代码输出结果 const promise = new Promise((resolve, reject) => {console.log(1);console.log(2); }); promi ...
2018年中高级前端面试题目小结
2018年中高级前端面试题目小结前言关于前端面试,及面试题目,我之前有很多文章总结过,可以在右侧搜索面试,进行查找.其实面试中可以问的问题很多,最近几年,我也面试过很多工作2-4年的前端,我一般会 ...
各公司 Java 面试题目整理（基础+高级+算法+数据库）
包含 Java 面试的各个方面,史上最全,苦心整理最全 Java 各公司面试题目整理包括但不限于基础+高级+算法+数据库优化+算法优化,使用层面广,知识量大,涉及你的知识盲点.要想在面试者中出类拔萃就 ...
【面试】网易游戏面试题目整理及答案（3）
网易游戏面试题目整理及答案(3) 数据库部分 MySQL 事务 MySQL锁机制 MySQL调优 MySQL分区.分表.分库主从复制其他问题数据库部分 MySQL 事务事务的隔离级别有哪些?M ...
嵌入式软件工程师面试题目整理（一）
文章目录嵌入式软件工程师面试题目整理(一) Arm有多少32位寄存器? Arm2440和6410有什么区别 CPU,MPU,MCU,SOC,SOPC联系与差别上拉&下拉&高阻态串 ...
【面试题】某司社招面试题目整理及答案
某司社招面试题目整理及答案 Java基础部分 HashMap的实现原理如何解决Hash碰撞 HashMap的存储(hash算法.hash冲突.初始化.扩容) HashMap和HashTable的区别 ...
前端面试知识点整理——网络
前端面试知识点整理--网络文章目录一. 进程(process)和线程(thread) 二. 浏览器属于一种多进程的架构三.CRP,关键渲染路径(critical rendering path) ...
前端面试知识点整理——项目整理
前端面试知识点整理--项目整理文章目录一.华工线上黑市(安卓) 二.二手闲置商场&健身管理系统(小程序) 三.birthday app(swift) 四.给Joey的生日页面(移动端) 五 ...
【面试】网易游戏面试题目整理及答案（5）
网易游戏面试题目整理及答案(5) 算法操作系统 Linux部分其他参考资料算法 Leetcode 75题:请写出一个高效的在m*n矩阵中判断目标值是否存在的算法,矩阵具有如下特征: 1)每一行 ...

前端面试题目整理——设计模式

作用

目录

正文

前端面试题目整理——设计模式相关推荐

最新文章

热门文章