设计模式在js里中的应用

最近在看网易的公开课，有一节课有讲到设计模式在js中的应用，觉得把之前一直不太理解的这块内容讲得还挺直白的，现在就把课上的内容整理下来，当个笔记。
老师把二十多种设计模式分成了四个大类，分别是：创建型设计模式、结构型设计模式、行为型设计模式、技巧型设计模式。

创建型设计模式

创建型设计模式包括工厂模式、建造者模式、原型模式、单例模式。主要都是在创建一个对象时候需要考虑的。

工厂模式

工厂模式主要用于批量创建对象，当需要创建的对象的一些特性相对固定的时候，工厂模式是一种非常合适的模式。

  function ballFactor(type){
    if(typeof type!='string'){
       throw new Error('type must be a string');
    }
    //第一，不要遗漏防错处理
    //第二，定义一个方法或者一个类，你得这样写保证安全
    if(this instanceof ballFactor){
        var s = new this[type]();
        return s;
    }else{
        return new ballFactor(type);
    }
  }
  //定义球的类型
  ballFactor.prototype = {
    basketball : function(){
      this.name='basketball';
    },
    tennis : function(){
      this.name='tennis';
    }
  };
  //新创建一个球
  var a = new ballFactor('tennis');

建造者模式

建造者模式用于定制化的创建对象，当需要对一个对象的所有属性进行配置的时候，可以考虑建造者模式。

  //建造模式
    //需要关心如何组装对象
 function hand(size){
    console.log(size)
 }
 function foot(size){
    console.log(size);
 }
 function face(status){
    console.log(status);
 }
 function person(){
    this.hand = new hand(100);
    this.foot = new foot(180);
    this.face =new face('good');
 }

原型模式

原型模式用于创建一系列共享原型的对象，由于js天生自带原型属性，这里就不具体举例了。

单例模式

单例模式用于创建独一无二的对象,我们只能从这个对想象中的方法拿到里面的属性、方法，而无法通过new去实例化。

  //单例模式
    //保证全局只有一个对象
 var single = (function(){
  //定义私有变量
  function _a(){
     this.a = 123;
  };
  var ob = new _a();
  return {
    get:function(name){
        return ob[name];
     }
  }
 })();

结构型设计模式

在创建完对象之后，要对对象进行结构设计，结构包含了内部结构和外部结构，内部结构就是指对象内部的结构规划，外部结构更多的是处理对象与对象间的关系。结构型设计模式主要包括：外观模式、适配器模式、装饰器模式、代理模式、享元模式。

外观模式

外观模式就是把零散的接口组合到一起供外部调用的一种模式，类似于快餐店的套餐组合。

适配器模式

适配器模式就好比是转接头，将不适合的接口调整成适合的接口。

 //适配器模式
   //把不合适的东西进行适配

 //假设要把A框架的改为jquery框架，可以对A框架的实现进行重写
var A = {
  on:function(){
  
  }
}
 //重写on方法，实质上是去调用jquery的on方法
 A.on = function(dom,type,fn){
   return $(dom).on(dom,type,fn)
 }
 A.on();

装饰器模式

装饰器模式就是一种不修改源码地扩展方法地思路。

 //装饰器模式
   //不去修改源码的去扩张方法。
   var A = {
     c:function(){
        console.log(1)
      };
   }
  function deco(fn1, fn2){
    var _fn1 = fn1;
    var _fn2 = fn2;
    return function(){
        _fn1();
        _fn2();
    }
  }
  var a = deco(A.c, function(){
    console.log(2);
  });
  A.c = a;

享元模式

享元模式是一种优化程序性能的手段，通过共享公用数据来减少对象数量以达到优化程序的手段。享元模式适用于拥有大量类似对象并且对性能有要求的场景。dom中的事件委托就是享元模式的一种实际应用。

行为型设计模式

行为型设计模式主要是用来组织对象之间沟通的一种设计模式，主要包括：观察者模式、策略模式、状态模式、迭代器模式、解释器模式、命令模式。

观察者模式

观察者模式主要用于模块之间的沟通，例如jq中的自定义事件、vuex状态管理。

var obs={
    fallback:{},
    on : function(type,fn){
      this.fallback[type] = fn;
    },
    fire : function(type){
      this.fallback[type]();
    },
    delete : function(){
      this.fallback[type] = null;
    }
}
obs.on('mytest',function(){
  console.log(1);
})
obs.fire('mytest');

策略模式

 //策略模式
通过策略模式，将需要传相同类型的参数的几个函数封装成一个对象，单纯的通过调用实现具体的功能。
   function calc(type,a,b){
       var a={
          add : function(a,b){
            return a+b;
          },
          minus : function(a,b){
            return a-b
          }
       }
       a[type](a,b);
   }

状态模式

在策略模式的基础上加上一个状态管理。

      //状态模式
var a={
  statusArr:[],
  on : function(){
    this.statusArr.push(type);
  },
  fire : function(){
    this.statusArr.forEach((item,index) => {
      this.catorlist[item]();
    })
  },
  catorlist : {
    add : function(a,b){
      return a+b;
    },
    minus : function(a,b){
      return a-b;
    }           
  }
}
a.on('add');
a.on('minus');
a.fire();

命令模式

命令模式是一种指导思想，将具体的实现和需求解耦。

  //命令模式
var arr = [
                  document.getElementById("dom1"),
                  {title:'title',pic:"url1"},
                  {title:'title2',pic:"url2"},
                  {title:'title3',pic:"url4"}
];

function command () {
  var _html='';
  function create(arr){
    arr.forEach(function(item,index){
      _html+="
";
    })
  }
  function display(content){
    content.innerHTML=_html;
  }
  function _excute(command){
    create(command.splice(1));
    display(command[0]);
  }
  return {
    excute:_excute;
  }
}
command().excute(arr);

迭代器模式

迭代器模式就是一系列的数据处理。

 //迭代器模式
  //把一系列数据的处理先写好
function calc(){

}
calc.prototype.equal = function(arr,num){
  var istrue = false;
  arr.forEach(function(item,index){
     if(item == num){
       istrue = true;
     }
  })
  return istrue;
}

解释器模式

解释器模式就相当于模版引擎的概念。

技巧性设计模式

技巧性设计模式包括：链模式、委托模式、节流模式、惰性模式、等待模式。许多技巧型模式都有对应的实例。

链模式

jq链式调用。

委托模式

js的事件委托。

节流模式

防抖截流。

惰性模式

目的是减少判断。

//惰性模式
  //b的值一开始制定，就不会变
  var b = 100;
  var a = (function(){
    if(b === 100){
       a = function(){console.log(1)};
    }else{
       a = function(){console.log(2)};
    }
  })();

等待者模式

等待者模式就类似于es2017中的async await的概念，等待上一个步骤执行完了，再执行下一个操作。

以上就是设计模式在js中的应用的相关整理，先放这里，以后有实际应用的时候翻看。