摘要：序列文章面試之函數(shù)面試之對(duì)象面試之?dāng)?shù)組的幾個(gè)不操作面試之對(duì)比分析面試之?dāng)?shù)據(jù)結(jié)構(gòu)與算法前言設(shè)計(jì)模式如果應(yīng)用到項(xiàng)目中，可以實(shí)現(xiàn)代碼的復(fù)用和解耦，提高代碼質(zhì)量。

JS面試之函數(shù)(1)
JS面試之對(duì)象(2)
JS面試之?dāng)?shù)組的幾個(gè)不low操作(3)
JS面試之http0.9~3.0對(duì)比分析(4)
JS面試之?dāng)?shù)據(jù)結(jié)構(gòu)與算法 (5)

設(shè)計(jì)模式如果應(yīng)用到項(xiàng)目中，可以實(shí)現(xiàn)代碼的復(fù)用和解耦，提高代碼質(zhì)量。 本文主要介紹14種設(shè)計(jì)模式
寫UI組件,封裝框架必備

1.定義：又叫靜態(tài)工廠方法，就是創(chuàng)建對(duì)象，并賦予屬性和方法
2.應(yīng)用：抽取類相同的屬性和方法封裝到對(duì)象上
3.代碼：

    let UserFactory = function (role) {
  function User(opt) {
    this.name = opt.name;
    this.viewPage = opt.viewPage;
  }
  switch (role) {
    case "superAdmin":
      return new User(superAdmin);
      break;
    case "admin":
      return new User(admin);
      break;
    case "user":
      return new User(user);
      break;
    default:
      throw new Error("參數(shù)錯(cuò)誤, 可選參數(shù):superAdmin、admin、user")
  }
}

//調(diào)用
let superAdmin = UserFactory("superAdmin");
let admin = UserFactory("admin") 
let normalUser = UserFactory("user")
//最后得到角色,可以調(diào)用

1.定義：對(duì)產(chǎn)品類的抽象使其創(chuàng)建業(yè)務(wù)主要負(fù)責(zé)用于創(chuàng)建多類產(chǎn)品的實(shí)例
2.應(yīng)用:創(chuàng)建實(shí)例
3.代碼:

var Factory=function(type,content){
  if(this instanceof Factory){
    var s=new this[type](content);
    return s;
  }else{
    return new Factory(type,content);
  }
}

//工廠原型中設(shè)置創(chuàng)建類型數(shù)據(jù)對(duì)象的屬性
Factory.prototype={
  Java:function(content){
    console.log("Java值為",content);
  },
  PHP:function(content){
    console.log("PHP值為",content);
  },
  Python:function(content){
    console.log("Python值為",content);
  },
}

//測(cè)試用例
Factory("Python","我是Python");

1.定義:設(shè)置函數(shù)的原型屬性
2.應(yīng)用:實(shí)現(xiàn)繼承
3.代碼:

function Animal (name) {
  // 屬性
  this.name = name || "Animal";
  // 實(shí)例方法
  this.sleep = function(){
    console.log(this.name + "正在睡覺！");
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + "正在吃：" + food);
};

function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = "cat";

//　Test Code
var cat = new Cat();
console.log(cat.name);//cat
console.log(cat.eat("fish"));//cat正在吃：fish  undefined
console.log(cat.sleep());//cat正在睡覺！ undefined
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true  

1.定義:只允許被實(shí)例化依次的類
2.應(yīng)用:提供一個(gè)命名空間
3.代碼:

let singleCase = function(name){
    this.name = name;
};
singleCase.prototype.getName = function(){
    return this.name;
}
// 獲取實(shí)例對(duì)象
let getInstance = (function() {
    var instance = null;
    return function(name) {
        if(!instance) {//相當(dāng)于一個(gè)一次性閥門,只能實(shí)例化一次
            instance = new singleCase(name);
        }
        return instance;
    }
})();
// 測(cè)試單體模式的實(shí)例,所以one===two
let one = getInstance("one");
let two = getInstance("two");   

1.定義:為子系統(tǒng)中的一組接口提供一個(gè)一致的界面
2.應(yīng)用:簡(jiǎn)化復(fù)雜接口
3.代碼:
外觀模式

1.定義:將一個(gè)接口轉(zhuǎn)換成客戶端需要的接口而不需要去修改客戶端代碼，使得不兼容的代碼可以一起工作
2.應(yīng)用:適配函數(shù)參數(shù)
3.代碼:
適配器模式

1.定義:不改變?cè)瓕?duì)象的基礎(chǔ)上,給對(duì)象添加屬性或方法
2.代碼

let decorator=function(input,fn){
  //獲取事件源
  let input=document.getElementById(input);
  //若事件源已經(jīng)綁定事件
  if(typeof input.onclick=="function"){
    //緩存事件源原有的回調(diào)函數(shù)
    let oldClickFn=input.onclick;
    //為事件源定義新事件
    input.onclick=function(){
      //事件源原有回調(diào)函數(shù)
      oldClickFn();
      //執(zhí)行事件源新增回調(diào)函數(shù)
      fn();
    }
  }else{
    //未綁定綁定
    input.onclick=fn;
  }
}

//測(cè)試用例
decorator("textInp",function(){
  console.log("文本框執(zhí)行啦");
})
decorator("btn",function(){
  console.log("按鈕執(zhí)行啦");
})

1.定義:將抽象部分與它的實(shí)現(xiàn)部分分離，使它們都可以獨(dú)立地變化
2.代碼
橋接模式

1.定義:定義一個(gè)模板,供以后傳不同參數(shù)調(diào)用
2.代碼:
模塊方法模式

1.作用:解決類與對(duì)象,對(duì)象與對(duì)象之間的耦合
2.代碼:

let Observer=
  (function(){
    let _message={};
    return {
      //注冊(cè)接口,
        //1.作用:將訂閱者注冊(cè)的消息推入到消息隊(duì)列
        //2.參數(shù):所以要傳兩個(gè)參數(shù),消息類型和處理動(dòng)作,
        //3.消息不存在重新創(chuàng)建,存在將消息推入到執(zhí)行方法
        
      regist:function(type,fn){
        //如果消息不存在,創(chuàng)建
        if(typeof _message[type]==="undefined"){
          _message[type]=[fn];
        }else{
          //將消息推入到消息的執(zhí)行動(dòng)作
          _message[type].push(fn);
        }
      },

      //發(fā)布信息接口
        //1.作用:觀察這發(fā)布消息將所有訂閱的消息一次執(zhí)行
        //2.參數(shù):消息類型和動(dòng)作執(zhí)行傳遞參數(shù)
        //3.消息類型參數(shù)必須校驗(yàn)
      fire:function(type,args){
        //如果消息沒有注冊(cè),則返回
        if(!_message[type]) return;
          //定義消息信息
          var events={
            type:type, //消息類型
            args:args||{} //消息攜帶數(shù)據(jù)
          },
          i=0,
          len=_message[type].length;
          //遍歷消息
          for(;i=0;i--){
            //如果存在該動(dòng)作在消息隊(duì)列中移除
            _message[type][i]===fn&&_message[type].splice(i,1);
          }
        }
      }
    }
  })()

//測(cè)試用例
  //1.訂閱消息
  Observer.regist("test",function(e){
    console.log(e.type,e.args.msg);
  })

  //2.發(fā)布消息
  Observer.fire("test",{msg:"傳遞參數(shù)1"});
  Observer.fire("test",{msg:"傳遞參數(shù)2"});
  Observer.fire("test",{msg:"傳遞參數(shù)3"});

1.定義:一個(gè)對(duì)象狀態(tài)改變會(huì)導(dǎo)致行為變化
2.作用:解決復(fù)雜的if判斷
3.代碼
狀態(tài)模式

1.定義:定義了一系列家族算法，并對(duì)每一種算法多帶帶封裝起來(lái)，讓算法之間可以相互替換，獨(dú)立于使用算法的客戶
2.代碼
策略模式

1.定義:通過(guò)繼承封裝一些該數(shù)據(jù)類型不具備的屬性,
2.作用:讓對(duì)象具備數(shù)組的操作方法
3.代碼:
訪問者模式

1.定義:設(shè)置一個(gè)中間層,處理對(duì)象之間的交互
2.代碼:
中介者模式