设计模式

一.概念        

        设计模式(Design pattern）是一套被反复使用、思想成熟、经过分类和无数实战设计经验的总结的。使用设计模式是为了让系统代码可重用、可扩展、可解耦、更容易被人理解且能保证代码可靠性。

二.特点

• 设计模式使代码开发真正工程化;
• 设计模式是软件工程的基石脉络，如同大厦的结构一样。

设计模式并不是一种固定的公式，而是一种思想，是一种解决问题的思路；恰当的使用设计模式，可以实现代码的复用和提高可维护性；

三.设计原则

高内聚、低耦合。

总体原则：开闭原则（对扩展开放，对修改关闭）

四.分类（23种）

• 创建型

 抽象工厂模式；工厂方法模式；建造者模式；原型模式；单例模式（又称单体模式）

• 结构型

适配器模式；桥接模式；组合模式；装饰者模式；外观模式；享元模式；代理模式

• 行为型

职责链模式；命令模式；解释器模式；迭代器模式；中介者模式；备忘录模式；观察者模式（又称发布/订阅模式）；状态模式策略模式；访问者模式；模板方法模式；　　

五.常见模式

单例模式

1.定义：是指确保一个类在任何情况下都绝对只有一个实例，并提供一个全局访问点。

2.举例：

①比如注册账号的时候，如果我们注册的账号已经存在，那么系统会提示我们“账号已经存在是否使用该账号登陆”，我们无法再次创建一个一模一样的账号，除非把原账号注销。这就是单例模式的生动体现。

②网页上的登陆弹框，无论我们点击多少次登陆按钮，界面上始终只会显示一个登陆弹框，无法再创建第二个。

3.实现思路

        单例是保证一个类只有一个实例，实现方法一般是先判断实例存在与否，如果存在则直接返回，否则创建了再返回，这就确保了一个类只有一个实例对象。

4.基本形式

   class Utils{}
    function  Singleton(){
        return new Utils();
    }  
    var u = Singleton()
    ------------------------------
    class Utils{}
    var instance;
    function Singleton(){
        if (!instance) {
            instance = new Utils();
        }
        return instance;
    }
    ------------------------------------
      const singleTon = (function(){
            class Utils{}
            let men;
            return function(){
                if (!men) {
                    men= new Utils();
                }
                return men;
            }
        })();
        var n1 = singleTon();
        var n2 = singleTon();
        console.log(n1===n2);
 // 单例模式的函数名称直接以功能名称命名
    const Utils = (function () {
        class Abc { }
        let instance = undefined
        return function () {
            if (!instance) {
                instance = new Abc()
            }
            return instance
        }
    })()
    const u = Utils()
    const u2 = Utils()
    console.log(u===u2);

单例模式的运用案例：

const utils = (function () {
    class Abc {
      constructor () {
        this.flag = addEventListener
      }
      setCss (ele, options) {
        for (let attr in options) {
          ele.style[attr] = options[attr]
        }
      }
     // 用来绑定事件
      on (ele, type, cb) {
        // 每一次执行的时候都要找一下有没有 addEventListener
        if (this.flag) {
          ele.addEventListener(type, cb)
        } else {
          ele.attachEvent('on' + type, cb)
        }
      }
      // 获取非行间样式
      getStyle (ele, attr) {
        if (this.flag) {
          return window.getComputedStyle(ele)[attr]
        } else {
          return ele.currentStyle[attr]
        }
      }
      // setCookie
      // ajax
      // pAjax
    }
    let instance
    return function () {
      if (!instance) {
        instance = new Abc()
      }
      // console.log(instance)
      return instance
    }
  })()

组合模式

1.定义：用小的子对象来构建更大的对象，而这些子对象本身也许使用更小的孙对象构成的

2.包含对象：

• 叶对象
• 组合对象

        叶对象和叶对象组合而成的组合对象。由组合对象和叶对象构成了树结构，这种树结构就是组合模式的基本结构。

class Tab{
      init(){}
}
class Banner{
    init(){}
}
const t = new Tab();
t.init(); 
const b = new Banner();
t.init(); 
//当两个实例化对象，普通对象，使用同样的方式启动的时候
//我们把两个组合在一起
//如果想实现刷新页面，三个init函数自动执行，我们可以把内容组合到一起。统一执行

class Compose{
    //需要一个队列 [new Tab(),new Banner()]
    //将来要启动的时候，只要遍历数组，让每一个成员执行以下init方法，
    constructor(){
        this.event = []
    }
    add(obj){
        this.event.push(obj);
    },
     execute(){
         for(var i =0;i<this.event.length;i++){
             this.event[i].init();
         }
     }
}
const c = new Compose();
c.add(new Tab());
c.add(new Banner())
console.log(c)
c.execute();

代理模式

1.定义：是把对一个对象的访问，交给另一个代理对象来操作。

2.举例：

①一般人需要打官司，需要找代理律师《术业有专攻〉﹔

②你需要打扫房子，可以找保洁公司﹔

③在租房子的时候去找中介《因为你对该地区房屋的信息掌握的不够全面，希望找一个更熟悉的人去帮你做)

3.应用场景

• 修改原有的方法来适应。这样违反了“对扩展开放，对修改关闭”的原则。
• 就是采用一个代理类调用原有的方法，且对产生的结果进行控制。这种方法就是代理模式。使用代理模式,可以将功能划分的更加清晰,有助于后期维护!

 // 1. 房东
    function fangdong(maijia){
        this.name = maijia.name;
        this.maifang = function(money){
            console.log('收到了买家'+this.name+'一共'+money+'元');
        }
    }
    // 2. 买家
    function maijia(){
        this.name = '小明'
    }
    // 3. 中介
    function zhongjie(){}
    zhongjie.prototype.maifang = function(){
        new fangdong(new maijia()).maifang('20万')
    }
    new zhongjie().maifang();

工厂模式

1.定义：用工厂的思路，创建对象。工厂是造产品的。现在用工厂来造对象。即一个工厂可以制造很多种类型的对象，这些对象一般具有共同的父类。即相似的类。

所谓工厂模式就是像工厂一样重复的产生类似的产品，工厂模式只需要我们传入正确的参数，就能生产类似的产品；

2.分类：简单工厂模式；工厂方法模式；抽象工厂模式。

简单工厂模式
   

 function factory(role){
        function superAdmin(){
            this.name="超级管理员";
            this.viewPage=["首页","发现页","通讯录","应用数据","权限管理"];
        }
        function admin(){
            this.name="管理员";
            this.viewPage=["首页","发现页","通讯录","应用数据"];
        }
        function user(){
            this.name="普通用户";
            this.viewPage=["首页","发现页","通讯录"];
        }
        switch(role){
            case "superAdmin":
                return new superAdmin();
                break;
            case "admin":
                return new admin();
                break;
            case "user":
                return new user();
                break;
        }
    }
    let superAdmin = factory("superAdmin");
    console.log(superAdmin);
    let admin = factory("admin");
    console.log(admin);
    let user = factory("user");
    console.log(user);

        factory是一个工厂，factory有三个函数分别是对应不同的产品，switch中有三个选项，这三个选项相当于三个模具，当匹配到其中的模具之后，将会new一个构造函数去执行生产工厂中的function；但是我们发现上面的简单工厂模式会有一定的局限性，就是如果我们需要去添加新的产品的时候，我们需要去修改两处位置（需要修改function和switch）才能达到添加新产品的目的；

// JS设计模式之简单工厂改良版
    function factory(role){
        function user(opt){
            this.name = opt.name;
            this.viewPage = opt.viewPage;
        }
        switch(role){
            case "superAdmin":
                return new user({name:"superAdmin",viewPage:["首页","发现页","通讯录","应用数据","权限管理"]});
                break;
            case "admin":
                return new user({name:"admin",viewPage:["首页","发现页","通讯录","应用数据"]});
                break;
            case "normal":
                return new user({name:"normal",viewPage:["首页","发现页","通讯录"]});

        }

    }

    let superAdmin = factory("superAdmin");
    console.log(superAdmin);
    let admin = factory("admin");
    console.log(admin);
    let normal = factory("normal");
    console.log(normal);

观察者模式

1.定义：观察者模式，属于行为型模式的一种，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时，会通知所有的观察者对象，使他们能够自动更新自己。

注意：有些人认为观察者模式就是发布订阅模式，但实际上观察者模式和发布订阅模式是有区别的。

2.区别：

• 观察者模式只有两个，一个是观察者一个是被观察者。
• 发布订阅模式不一样，发布订阅模式还有一个中间层，发布订阅模式的实现是，发布者通知给中间层 => 中层接受并通知订阅者 => 订阅者收到通知并发生变

3.举例：上课和下课的铃声就是被观察者，学生就是观察者，当下课铃声响了，学生就知道下课了，就出去跑着玩了，然后过了10分钟，上课铃声又响了，然后学生听到上课铃，又开始从外面往教室跑，去上课。