简单说：前端常用几种设计模式

BlickindieZukunft
395 阅读2分钟

​

本篇将介绍以下几个比较常见的设计模式：

不过，有一说一，啥是设计模式，不就是你写了一个觉得很好用，很牛逼的代码，觉得可以被人们广泛使用，给它起了个名字嘛。所以，不要觉得设计模式有多少难，也不要说按照设计模式去写，而是你写了之后去发现，你用到了什么设计模式( •̀ ω •́ )✧

  • 工厂模式
  • 单例模式
  • 代理模式
  • 观察者模式
  • 策略模式
  • 模块模式
  • 构造函数模式
  • 混合模式

详情可以去往我的博客HZCann的博客  如果可以 点个star⭐ 感谢！！！

一、工厂模式

工厂模式是用来创建对象的一种最常用的设计模式，不暴露创建对象的具体逻辑，而是将逻辑封装在一个函数中，那么这个函数就可以被视为一个工厂，工厂模式根据抽象程度的不同可以分为：简单工厂，工厂方法和抽象工厂，接下来，将对简单工厂和工厂方法在JavaScript中的运用举个简单的例子：

1. 简单工厂

简单工厂模式又叫静态工厂模式，由一个工厂对象决定创建某一种产品对象类的实例，主要用来创建同一类对象

比如说，在实际的项目中，我们常常需要根据用户的权限来渲染不同的页面，高级权限的用户所拥有的页面有些是无法被低级权限的用户所查看，所以我们可以在不同权限等级用户的构造函数中，保存该用户能够看到的页面。 ​

let UserFactory = function(role){
    function SuperAdmin(){
        this.name ='超级管理员',
        this.viewPage =['首页','用户管理','订单管理','应用管理','权限管理']
    }
    function Admin(){
        this.name ='管理员',
        this.viewPage = ['首页','订单管理','应用管理']
    }
    function Normaluser(){
        this .name ='普通用户',
        this.viewPage=['首页','订单管理']
    }
    switch (role){
        case 'superAdmin':
        return new SuperAdmin();
        break;
        case 'admin':
        return new Admin();
        break;
        case 'user':
        return new Normaluser();
        break;
        default:
        throw new Error('参数错误,可选参数:superAdmin、admin、user')
    }
}//调用
    let superAdmin = UserFactory('superAdmin');
    let admin = UserFactory('admin')
    let normalUser= UserFactory('user')

总结： 在上面的例子中，UserFactory就是一个简单工厂，在该函数中有3个构造函数分别对应不同的权限的用户，当我们调用工厂函数时，只需要传递superAdmin, admin, user这三个可选参数中的一个获取对应的实例对象。

优点： 简单工厂的优点在于，你只需要一个正确的参数，就可以获取到你所需要的对象，而无需知道其创建的具体细节;

缺点： 在函数内包含了所有对象的创建逻辑(构造函数)和判断逻辑的代码，每增加新的构造函数还需要修改判断逻辑代码，我们的对象不是上面的3个而是30个或更多时，这个函数会成为一个庞大的超级函数，便得难以维护，简单工厂只能作用于创建的对象数量较少，对象的创建逻辑不复杂时使用。

2. 工厂方法

工厂方法模式的本意是将实际创建对象的工作推迟到子类中，这样核心类就变成了抽象类，但是在JavaScript中很难像传统面向对象那样去实现创建抽象类，所以在JavaScript中我们只需要参考它的核心思想即可，我们可以将工厂方法看作是一个实例化对象的工厂类

比如说上面的例子，我们用工厂方法可以这样写，工厂方法我们只把它看作是一个实例化对象的工厂，它只做实例化对象这一件事情，我们采用安全模式创建对象

//安全模式创建的工厂方法函数
let UserFactory = function (role) {
  if (this instanceof UserFactory) {
    var s = new this[role]()
    return s;
  } else {
    return new UserFactory(role);
  }
}
//工厂方法函数的原型中设器所有对象的构造函数
UserFactory.prototype = {
  SuperAdmin: function () {
    this.name = "超级管理员"
    this.viewPage = ['首页', '用户管理', '订单管理', '应用管理', '权限管理']
  },
  Admin: function () {
    this.name = "管理员"
    this.viewPage - ['首页', '订单管理', '应用管理']
  },
  NormalUser: function () {
    this.name = "普通用户"
    this.viewPage = ['首页', '订单管理']
  }
}//调用
let superAdmin = UserFactory("SuperAdmin")
let admin = UserFactory("Admin")
let normalUser = UserFactory("NormalUser")

总结： 在简单工厂中，如果我们新增加一个用户类型，需要修改两个地方的代码，一个是增加新的用户构造函数，一个是在逻辑判断中增加对新的用户的判断，而在抽象工厂方法中，我们只需要在UserFactory.prototype中添加就可以啦。 ​

二、单例模式

定义：是保证一个类只有一个实例，并且提供一个访问它的全局访问点。

需求：一些对象我们往往只需要一个，比如线程池、全局缓存、浏览器中的window对象、登录浮窗等。

实现：用一个变量标识当前是否已经为某个类创建过对象，如果是，则在下一次获取这个类的实例时，直接返回之前创建的对象。

优点：

  • 可以用来划分命名空间，减少全局变量的数量
  • 可以被实例化，且实例化一次，再次实例化生成的也是第一个实例

下面举个例子，在js中，我们可以使用闭包来创建实现这种模式：

var single = (function () {
  var unique
  function getInstance() {
    // 如果实例存在，直接返回，否则实例化
    if (unique === undefined) {
      unique = new Construct()
    }
    return unique
  }
  function Construct() {
    // 生成单例的构造函数代码
  }
  return { getInstance: getInstance }
})

总结： 在上面的代码中，我们可以使用single.getInstance来获取到例，并且每次调用均获取到同一个单例。

在我们平时的开发中，我们也经常会用到这种模式，比如当我们单击登录按钮的时候，页面中会出现一个登录框，而这个浮窗是唯一的，无论单击多少次登录按钮，这个浮窗只会被创建一次，因此这个登录浮窗就适合用单例模式。

三、代理模式

代理模式主要是为其他对象提供一种代理以控制对这个对象的访问，主要解决在直接访问对象时带来的问题。

比如说：要访问的对象在远程的机器上，在面向对象系统中，有些对象由于某些原因(比如对象创建开销很大，或者某些操作需要安全控制，或者需要进程外的访问)，直接访问会给使用者或者系统结构带来很多麻烦，我们可以在访问此对象时加上一个对此对象的访问层。

代理模式最基本的形式是对访问进行控制，代理对象和另一个对象(本体)实现的是同样的接口。

实际上工作还是本体在做，它才是负责执行所分派的任务的那个对象或类，代理对象所做的不外乎节制对本体的访问，代理对象并不会在另一对象的基础上添加方法或修改其方法，也不会简化那个对象的接口，它实现的接口与本体完全相同，所有对它进行的方法调用都会被传递给本体。

(function () {
  // 示例代码
  // 目标对象，是真正被代理的对象
  function Subject() { }
  Subject.prototype.request = function () { };
  /**
  * 代理对象
  * @param {Object} realSubject [持有被代理的具体的目标对象]
  */
  function Proxy(realSubject) { this.realSubject = realSubject; }
  Proxy.prototype.request = function () {
    this.realSubject.request()
  }
}());

总结： 在上面的代码中，Proxy可以控制对真正被代理对象的一个访问。在代理模式中，比较常见的就是虚拟代理，虚拟代理用于控制对那种创建开销很大的本体的访问，它会把本体的实例化推迟到有方法被调用的时候。

比如说，现在我们假设PublicLibrary的实例化很慢，不能在网页加载的时候立即完成，我们可以为其创建一个虚拟代理，让它把PublicLibrary的实例化推迟到必要的时候，比如说我们在前端中经常用到的图片懒加载，就可以用虚拟代理.

四、观察者模式

如果大家学过一些像vue，react这些框架，相信大家对观察者模式一定很熟悉，现在很多mvvm框架都用到了观察者模式这个思想，观察者模式又叫做发布—订阅模式。

它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知和更新，观察者模式提供了一个订阅模型，其中对象订阅事件并在发生时得到通知，这种模式是事件驱动的编程基石，它有利益于良好的面向对象的设计

定义： 对象间的一种一对多的依赖关系。

需求： 当一个对象的状态发生变化时，所有依赖于他的对象都将得到通知。

优点： 时间上的解耦，对象之间的解耦。

实现：

  • 指定好谁充当发布者;
  • 给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者;
  • 发布消息的时候，发布者会遍历这个缓存列表，依次触发里面存放的订阅者回调函数。

下面举个例子，比如我们给页面中的一个dom节点绑定一个事件，其实就可以看做是一种观察者模式：

document.body.addEventListener("click", function () {
  alert("Hello World")
}, false)
document.body.click() //模拟用户点击

总结： 在上面的例子中，需要监听用户点击 document.body 的动作，但是我们是没办法预知用户将在什么时候点击的，因此我们订阅了 document.body 的 click 事件，当 body 节点被点击时，body 节点便会向订阅者发布 "Hello World" 消息。

五、策略模式

策略模式指的是定义一些列的算法，把他们一个个封装起来，目的就是将算法的使用与算法的实现分离开来，避免多重判断条件，更具有扩展性。

下面也是举个例子，现在超市有活动，vip为5折，老客户3折，普通顾客没折，计算最后需要支付的金额，如果不使用策略模式，我们的代码可能和下面一样：

function Price(personType, price) {
  if (personType == 'vip') {
    return price * 0.5;  // vip 5 折
  }
  else if (personType == 'old') {
    return price * 0.3;  // 老客户 3 折
  } else {
    return price;   //其他都全价
  }
}

在上面的代码中，我们需要很多个判断，如果有很多优惠，我们又需要添加很多判断，这里已经违背了刚才说的设计模式的六大原则中的开闭原则了，如果使用策略模式，我们的代码可以这样写：

//对于vip客户
function vipPrice() {
  this.discount = 0.5;
}
vipPrice.prototype.getPrice = function (price) {
  return price * this.discount;
}
//对于老客户
function oldPrice() {
  this.discount = 0.3;
}
oldPrice.prototype.getPrice = function (price) {
  return price * this.discount;
}
//对于普通客户
function Price() {
  this.discount = 1;
}
Price.prototype.getPrice = function (price) {
  return price;
}
// 上下文,对于客户端的使用
function Context() {
  this.name = ''
  this.strategy = null;
  this.price = 0;
}

Context.prototype.set = function (name, strategy, price) {
  this.name = name;
  this.strategy = strategy;
  this.price = price;
}
Context.prototype.getResult = function () {
  console.log(this.name + '的结账价为: ' + this.strategy.getPrice(this.price));
}

var context = new Context();

var vip = new vipPrice()
context.set('vip客户', vip, 200);
context.getResult();  // vip客户的结账价为:100

var old = new oldPrice();
context.set('老客户', old, 200);
context.getResult();  // 老客户的结账价为: 60

var Price = new Price();
context.set('普通客户', Price, 200);
context.getResult(); //普通客户的结账价为:200

总结： 在上面的代码中，通过策略模式，使得客户的折扣与算法解藕，又使得修改跟扩展能独立的进行，不影到客户端或其他算法的使用。

当我们的代码中有很多个判断分支，每一个条件分支都会引起该“类”的特定行为以不同的方式作出改变，这个时候就可以使用策略模式，可以改进我们代码的质量，也更好的可以进行单元测试。

六、模块模式

模块模式可以指定类想暴露的属性和方法，并且不会污染全局。采用闭包的形式，实现如下：

var Person = (function() {
    var name = 'xxx'
    function sayName() {
        console.log(name)
    }
    return{
        name: name,
        sayName: sayName
    }
})()

七、构造函数模式和混合模式

构造函数和混合模式就是js中继承的两种实现方式，前者通过构造函数的形式定义类，通过new新增实例。而后者是将构造函数的引用属性和方法放到其原型上，子类是父类原型的一个实例。

参考文章：www.jianshu.com/p/4f3014fb8… ​

​

​

avatar
文章
阅读
粉丝