前端需要了解设计模式吗（一）？-一一网

这是我参与更文挑战的第10天，活动详情查看：更文挑战

刚开始工作的时候曾被问到你了解哪些设计模式吗？当时我就蒙了，前端还有设计模式呢，不是只需要写写页面，写写交互事件吗？当时我天真的认为作为一个前端能够高效率的依照原型图写出页面，再写写交互事件就足够了。然而前端发展到如今，却不在只是一个前端切图仔那么简单了，随着技术的发展，对于前端的要求也越来越高，所以得不断学习，不断扩充自己的知识面才能不被行业所抛弃。学习设计模式，最显而易见的好处就是面试是提升竞争力，开发中可以提高代码质量，对于涉及大型的类库也是很有帮助的。

什么是设计模式？

设计模式就是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式可以重构整体架构的代码，提高代码的复用性，减少代码冗余，是别人能够快速的看懂我们所写的代码。常见的设计模式一般有单例模式、工厂模式、代理模式、观察者模式、策略模式等，当然除了这几种，还有很多种设计模式，本篇文章先介绍下单例模式、工厂模式以及代理模式，其余模式后续有时间在研究。

单例模式

含义： 一个类只有一个实例对象，并且该类能自行创建这个实例，该类对外提供一个访问该单例的全局访问点。例如，windows只能打开一个任务管理器，登录页面只能出现一个登录弹框等都是单例模式的体现。

举个栗子：

(function(){
  let example = null;
  return class{
      constructor(){
        if(!example){
          example = this; // 保存第一次创建的实例
        }else{
          return example;
      }
  }
  }
})()
let p1= new Person();
let p2 = new Person();
console.log(p1===p2)  //两次创建的实例一样，此时符合该类只有一个实例对象
复制代码

上面使用闭包实现了单例设计模式，通过保存第一次创建的实例对象，以确保之后每次创建都返回的是第一次的实例，所以做到了一个类只有一个实例对象。

工厂模式

含义： 顾名思义，工厂就是根据图纸模型，生产用户所需要的产品，无需关系产品是如何生产出来的。工厂模式的原理也接近于此，工厂模式是创建型设计模型，用来创建实例对象的。使用工厂模式的时候，不需要我们自己去找创建实例的类，只需要告诉工厂类需要什么样的实例，便会自动返回我们所需要的实例。在项目中，我们经常会需要根据用户的权限来渲染不同的页面，所以我们可以在不同权限的角色的构造函数中保存该角色能够看到的页面。

举个栗子：

// 创建工厂函数
let FactoryClass = function(role) {
    if(this instanceof FactoryClass) {
        let obj = new this[role]()
        return obj
    } else {
        return new FactoryClass(role)
    }
}
// 添加构造函数
FactoryClass.prototype = {
    Teachers: function(){
        this.name = "教师类"
        this.permission = ['首页', '系统管理', '学生信息管理']
    },
    Students: funciton(){
        this.name = "学生类"
        this.age = ['首页', '个人信息']
    }
}
// 调用
let newTeacher = FactoryClass('Teachers')
let newStudent = FactoryClass('Students')
复制代码

代理模式

含义： 给某一个对象提供一个代理对象，并由代理对象控制对原对象的引用，主要解决直接访问对象时带来的问题。通俗来说，代理模式其实就是我们生活中常见的中介。

举个栗子：

目前到了一年一度的毕业季，刚毕业肯定需要找房吧，如果你想自己找的话流程如下：

let yourself = {
    giveMoney() { // 给房东钱租房子
      houseOwner.lease(3000)
    }
}
let houseOwner = {
    lease(money){
        console.log('房东收到钱出租房子')
    }
}
yourself.giveMoney() // 你给房东钱，房东把房子租给你
复制代码

上面是向房东直租的流程，但是想象很美好，现实却很残酷，我们没有那么多的时间去一家一家的找房东，而且也不可能满大街随时都能遇到房东。所以，这时就需要房屋中介出场了，我们只需要把自己的需求告知中介，中介便可以帮我们筛选到合适的房子，并且直接和房东签约，以至于我们不用和房东碰面，就可以租到房东的房子了。

let yourself = {
    async giveMoney(money){
      await agent.receive(2000) // 再你向中介租房之前，中介需要先收房
      agent.lease(money)  // 中介将房子租给你
    }
}
let agent = {
    receive(money){  // 中介收房
        houseOwner.lease(money)
    }
    lease(money){
        console.log('中介收到钱租给租客')
    }
}
let houseOwner = {
    lease(money){
        console.log('房东收到钱出租房子给中介')
    }
}
yourself.giveMoney(3000) // 你给中介交钱，租房
复制代码