JavaScript设计模式

JavaScript设计模式

设计模式概念

经过代码设计经验总结之后设计出的一种固定解决问题的方式

设计模式作用

• 代码复用

• 保证代码可靠性

• 将编程工程化

• 更易被他人理解

设计模式的分类(W3C平台)

构造器模式，模块化模式，暴露模块模式，单例模式，中介者模式，原型模式，命令模式，外观模式，工厂模式，Mixin模式，装饰模式，亨元(Flyweight)模式，MVC模式，MVP模式，MVVM模式，组合模式，适配器模式，外观模式，观察者模式，迭代器模式，惰性初始模式，代理模式，建造者模式，...

常用设计模式

1. 单例模式

概念 :

多次操作是在同一个实例对象上实现 即第一次为创建实例对象 后面的都是在原有的实例对象上操作

优点 :

节省性能 提升执行速度

  function Fn(){
      // 这里自定义__obj__是为了防止和Fn内置对象名重叠
      if(!Fn.__obj__){
          // 这里没有这个对象存在再创建 有则不创建
          // 保证单例的核心
          Fn.__obj__ = {};
      }
      Fn.__obj__.name = "admin";
      return Fn.__obj__;
  }

2. 工厂模式

概念 :

多次创建多个具有相同属性名相同方法功能的不同实例对象

工厂模式的标志 :

原料(创建基础对象) 加工(给基础对象添加属性或方法) 出厂(将基础对象返回到外部)

优点 :

相互独立 分别控制 互不干扰

  function Fn(name, age){
    this.name = name;
    this.age = age
  }
  const f1 = new Fn("admin", 18)
  const f2 = new Fn("root", 19)
  // 工厂模式和单例模式不同 每次创建的都是新实例对象
  console.log(f1 === f2);
  // false

3. 抽象工厂模式

概念 :

在工厂模式的基础上进行二次封装，将相同的属性值再次封装

  // 造车厂
  function CreateCar(brand, color, type){
    this.brand = brand;
    this.color = color;
    this.type = type;
  }

  // 专门用来生产比亚迪的生产线
  function BYDCar(color, type){
    return new CreateCar("比亚迪", color, type);
  }

  const b1 = new BYDCar("白色", "SUV");
  const b2 = new BYDCar("红色", "轿车");

  // 专门用来生产大众的生产线
  function WCar(color, type){
    return new CreateCar("大众", color, type);
  }

  const w1 = new WCar("黑色", "SUV");
  const w2 = new WCar("灰色", "轿车");

4. 适配器模式

概念 :

解决两个软件实体间的接口不兼容的问题，对不兼容的部分进行适配

例 : 手机没有3.5耳机插口，所以就需要增加一个转接头来完成适配功能以确保耳机的正常使用

  // 创建一个手机构造器 有打电话打游戏功能
  function CreatePhone(){
    this.name = "手机"
    this.call = function(){
      console.log("打电话")
    }
    this.game = function(){
      console.log("玩游戏")
    }
  }

  // 创建一个电脑构造器 有游戏功能
  function CreateComputer(){
    this.name = "电脑"
    this.game = function(){
      console.log("玩游戏")
    }
  }

  // 测试打电话和游戏功能
  function test(obj){
    obj.call();
    obj.game();
  }

  const p = new CreatePhone()
  const c = new CreateComputer()

  // 如果没有适配器 电脑因为没有打电话功能test会报错
  function Adapter(obj){
    // 如果没有这个功能则定义一个这个功能
    if(!obj.call){
      obj.call = function(){
        console.log("这是" + obj.name + "没有打电话功能")
      }
    }
    return obj;
  }

  test(p);
  // 打电话
  // 玩游戏
  test( Adapter(c) );
  // 这是电脑没有打电话功能
  // 玩游戏

  console.log(p)
  console.log(c)

5. 代理模式

概念

不直接访问对象 而是提供一个中间对象(代理)来控制对这个对象的访问

生活中也有比较常见的代理模式：中介、寄卖、经纪人等等

  // 发送数据方 target为接收方 name为发送方名字
  function sender(target, name){
    this.name = name;
    // 定义发送方式
    this.send = function(msg){
      console.log(this.name + "将" + msg + "交给了" + target.name);
    }
  }

  // 接收数据方 name为接收方名字
  function reciver(name){
    this.name = name;
  }

  // 创建'bob'实例对象用于接收数据
  const s = new reciver("bob");

  // 定义中间代理 target为接收方
  function poster(target){
    // 创建发送方实例对象
    const f = new sender(s, "tom");
    //message用于存储各种数据
    this.message = [];
    this.send = function(msg){
      this.message.push({
        发件人: f.name,
        收件人: target.name,
        物品: msg,
        时间: Date.now()
      })
      //调用发送方send方法 msg为传进来参数
      f.send(msg);
    }
  }

  // 创建代理实例对象
  const k = new poster(s);
  // 代理发送方tom发送数据给接收方bob
  k.send("一批教材");
  k.send("一批教具");
  k.send("一批学生");

  console.log(k.message);

6. 观察者模式

又称发布订阅模式(Publish/Subscribe)

概念

观察者模式定义了一种一对多的关系 让一个对象(发布者Dep)能被多个观察者(订阅者Observer)同时监听

优点

• 支持简单的广播通信 自动通知所有订阅者
• 页面载入后发布者很容易与观察者存在一种动态关联 增加了灵活性
• 发布者与观察者之间的抽象耦合关系能够单独扩展以及重用(解耦)

  function MyEvent() {
    // 定义一个对象存储dep和数组形式的observer
    this.message = {};

    // 绑定发布者和目标订阅者
    this.binding = function(dep, observer) {
      if (this.message[dep]) {
        // 发布者存在 则加入新的订阅者
        this.message[dep].push(observer);
      } else {
        // 发布者不存在 则创建一个数组 存入第一个订阅者
        this.message[dep] = [observer];
      }
    }

    // 绑定发布者和目标订阅者
    this.unbinding = function(dep, observer) {
      // 发布者不存在 则返回
      if (!this.message[dep]) return;
      // 找到订阅者在数组中的索引
      var index = this.message[dep].indexOf(observer);
      if (index != -1) {
        // 如果有 则从索引位置删除他
        this.message[dep].splice(index, 1);
      }
    }
    
    // 执行目标发布者的所有订阅者的行为
    this.emit = function(dep) {
      // 发布者不存在 则返回
      if (!this.message[dep]) return;
      // 调用所有订阅者方法
      this.message[dep].forEach((val) => {val(dep);})
    }
  }

  // 创建实例对象
  const event = new MyEvent();

  // 绑定发布者和订阅者
  event.binding('bob', follower1);
  event.binding('bob', follower2);

  event.binding('tom', follower1);
  event.binding('tom', follower2);

  // 解绑发布者和目标订阅者
  event.unbinding('tom', follower1);

  // 执行目标发布者所有订阅者行为
  event.emit('bob');
  event.emit('tom');

  // 定义订阅者行为
  function follower1(dep) {
    console.log('follower1订阅了' + dep)
  }
  function follower2(dep) {
    console.log('follower2我订阅了' + dep)
  }

7. 策略模式

概念 :

将多个功能封装起来 定义一系列算法 并使他们能直接相互替换

优点 :

• 利用组合 委托 避免了条件语句
• 使代码更易理解和扩展
• 代码复用

  // 需求: 绩效计算
  // 条件选择方式 if分支随着绩效分类增多而增多 影响性能
  let bonus = function (performance, salary) {
    if(performance == "S") {
      return salary * 4;
    } else if (performance == "A") {
      return salary * 3;
    } else if (performance == "B")
      return salary * 2;
  }

  // 策略模式
  
  let calculateBonus = {
    "S": function ( salary ){
      return salary * 4;
    },
    "A": function ( salary ) {
      return salary * 3;
    },
    "B": function ( salary ) { 
      return salary * 2;
    }
  }

  function calculate(level, salary) {
    return calculateBonus[level](salary);
  }

  console.log(calculate('S', 20000) + '$')

8. MVC模式

全名: Model View Controller 模型 视图 控制器

• M: 模型 按照要求来取出数据
• V: 视图 用户直观看到的页面
• C: 控制器 向系统发出指令的工具

优点

• 降低代码耦合
• 分工合作 提高开发效率
• 组件重用

工作流程

1. 用户的请求提交给控制器

2. 控制器接收到用户请求后根据用户的具体需求 调用相应的程序来处理用户的请求

3. 控制器调用程序处理完数据后 将数据显示出来

  // 定义模型 按照要求读取数据
  class Model {
    m1() {
      return 'Model1';
    }
    m2() {
      return 'Model2';
    }
  }

  // 定义视图 用于数据展示
  class View {
    v1(m) {
      console.log(m);
    }
    v2(m) {
      document.write(m);
    }
  }

  // 根据控制器找到对应数据
  class Control {
    constructor() {
      this.m = new Model();
      this.v = new View();
    }
    c1() {
      let value = this.m.m1();
      this.v.v1(value);
    }
    c2() {
      let value = this.m.m2();
      this.v.v2(value);
    }
  }

  // 创建一个控制器实例对象
  const c = new Control();

  // 发出指令
  c.c1();
  c.c2();

9. 组合模式

概念 :

把多个对象组成树状结构来表示局部与整体，使得用户可以同时操作单个对象或对象的组合

优点 :

• 组合模式可以非常方便地描述对象部分-整体层次结构
• 组合模式将一批子对象组织为树形结构 一条根命令能操作下面所有子元素

  // <style>
  //   img{width:100px;}
  //   *{margin: 10px;padding: 10px;}
  // </style>

  // 枝
  class Team {
    constructor(id) {
      // 组合模式核心之一 使得每个元素都能保存自己所有的子元素
      this.children = [];
      this.ele = document.createElement('div');
      this.ele.id = id;
    }
  
    add(child) {
      // 在数组中加入child元素
      this.children.push(child);
      // 将child添加到当前实例对象对应元素(this.ele)中
      this.ele.appendChild(child.ele);
    }

    remove(child) {
      // 找到这个child元素在数组中索引
      let c = this.children.indexOf(child);
      // 根据索引删除元素
      this.children.splice(c, 1);
      // child为实例对象 找到实例对象对应元素 并删除节点元素
      child.ele.remove();
    }

    addBorder() {
      // 给当前实例对象对应元素添加边框
      this.ele.style.border = '2px solid black';
      // 以下递归和核心之一
      // 给当前实例对象children数组(保存所有子元素对应实例对象)中所有元素也添加边框 如果子实例对象对应实例对象中还有实例对象则递归进去 重复之前步骤 直到所有子孙元素
      this.children.forEach(val => {val.addBorder()});
    }

    removeBorder() {
      // 给当前实例对象对应元素删除边框
      this.ele.style.border = 'none';
      // 原理同addBorder
      this.children.forEach(val => {val.removeBorder()});
    }
  }

  // 叶
  class Item {
    constructor(src) {
      // 此处ele为核心之一 这里的ele必须和上面枝中的ele相同 如果不同 this.ele在递归到叶中实例对象时 因找不到ele元素而报错而报错
      this.ele = document.createElement('img');
      this.ele.src = src;
    }
    add() {
      console.log('此为叶节点 不能添加');
    }
    remove() {
      console.log('此为叶节点 不能删除');
    }
    addBorder() {
      // 叶没有子元素 所以只要给自己添加边框
      this.ele.style.border = '2px solid red';
    }
    removeBorder() {
      // 叶没有子元素 所以只要给自己删除边框
      this.ele.style.border = 'none';
    }
  }

  // 创建叶实例对象
  const img1 = new Item("https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF");
  const img2 = new Item("https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF");
  const img3 = new Item("https://t7.baidu.com/it/u=2511982910,2454873241&fm=193&f=GIF");
  const img4 = new Item("https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF");

  // 创建枝对象
  const box1 = new Team("box1");
  const box2 = new Team("box2");
  const box3 = new Team("box3");
  const box4 = new Team("box4");
  const box5 = new Team("box5");

  // 将盒子 和 img组合
  box1.add(box2);
  box1.add(box3);
  box3.add(box4);
  box4.add(box5);

  box1.add(img1);
  box4.add(img2);
  box4.add(img3);
  box5.add(img3);

  // 以下为box在body中排列
    //   box1
    //     box2
    //     box3
    //       box4
    //         box5
              // img3
          //   img2
          //   img3
          // img1

  // 将根box1添加到body中
  document.body.appendChild(box1.ele);

  // 给元素添加删除边框
  box1.addBorder();
  box3.addBorder();

  img2.removeBorder();