JavaScript设计模式浅析

[](()01 前言

---

---

设计模式我们其实听过不少，但是当别人问具体是什么或者有哪些设计模式的时候，我们有可能会不知道或者回答不全。其实我们在开发的过程中可能很少会用到设计模式，因为很多东西别人都帮我们封装好了，我们直接拿过来用即可。

前端的开发经过一遍封装过后变得无比容易，我们在运用的过程中得心应手，只有在源码阅读的过程中才会看到。大概浏览了一下JavaScript设计模式这本书，所以总结一下常用的几种模式，面试也有可能会问到。

[](()02 设计模式

---

---

[](()工厂模式

故名思意，我们从字面上的意思就可以看到，可以想象一座工厂源源不断产出一样的产品，流水线作业。没错，工厂模式就是这样。

class Person {

constructor(name) {

this.name = name

}

getName() {

console.log(this.name)

}

}

class Factory {

static create(name) {

return new Person(name)

}

}

Factory.create(‘alanwu’).getName() //alanwu

我们首先创建一个工厂，我们只要传递参数进去，里面具体的过程我们不用去关心，最后返回一个对象。

[](()单例模式

单例模式就是保证一个类仅有一个实例，并提供一个访问它的全局访问点。其实这有一点像我们vuex当中的实现，也是一个全局的状态管理，并且提供一个接口访问。

var Singleton = function (name) {

this.name = name;

}

Singleton.prototype.getName = function () {

console.log(this.name);

}

Singleton.getInstance = (function(){

var instance = null;

return function(name){

if(!instance){

instance = new Singleton(name);

}

return instance;

}

}

)()

var a = Singleton.getInstance(‘alan1’);

var b = Singleton.getInstance(‘alan2’);

console.log(a===b); //true

《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 #### [](()适配器模式

适配器模式就相当于一个转换接口，大家想想我们手机充电器通常是二岔口的，但是电源只有三岔口的。这时候就需要一个适配器把三岔口的转换成二岔口的。

它的作用其实就是解决两个软件实体间的接口不兼容问题，使用之后就可以一起工作了。

var googleMap = {

show: function () {

console.log(‘googleMap show!’);

}

}

var baiduMap = {

show: function () {

console.log(‘baiduMap show!’);

}

}

var renderMap = function (map) {

if (map.show instanceof Function) {

map.show()

}

}

renderMap(googleMap);

renderMap(baiduMap);

上面这段程序能够运行是因为百度地图和谷歌地图用的同一种show方法，但是我们在不知道对方使用的函数接口的时候，我们就不能这样用了（可能百度是使用了display方法来显示）。下面的baiduMapAdapter就是我们使用的适配器。

var googleMap = {

show: function () {

console.log(‘googleMap show!’);

}

}

var baiduMap = {

display: function () {

console.log(‘baiduMap show!’);

}

}

var renderMap = function (map) {

if (map.show instanceof Function) {

map.show()

}

}

var baiduMapAdapter = {

show:function(){

return baiduMap.display()

}

}

renderMap(googleMap);

renderMap(baiduMapAdapter);

[](()代理模式

我们在事件代理的时候其实就是使用了代理模式，通过把监听事件全部交由父节点进行监听，这样你添加节点或者删除节点的时候就不用去改变监听的代码。