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

JS面試之函數(shù)(1)
JS面試之對象(2)
JS面試之數(shù)組的幾個不low操作(3)
JS面試之http0.9~3.0對比分析(4)
JS面試之數(shù)據(jù)結構與算法 (5)

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

1.定義：又叫靜態(tài)工廠方法，就是創(chuàng)建對象，并賦予屬性和方法
2.應用：抽取類相同的屬性和方法封裝到對象上
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ù)錯誤, 可選參數(shù):superAdmin、admin、user")
  }
}

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

1.定義：對產品類的抽象使其創(chuàng)建業(yè)務主要負責用于創(chuàng)建多類產品的實例
2.應用:創(chuàng)建實例
3.代碼:

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

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

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

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

function Animal (name) {
  // 屬性
  this.name = name || "Animal";
  // 實例方法
  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.定義:只允許被實例化依次的類
2.應用:提供一個命名空間
3.代碼:

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

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

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

1.定義:不改變原對象的基礎上,給對象添加屬性或方法
2.代碼

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

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

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

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

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

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

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

//測試用例
  //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.定義:一個對象狀態(tài)改變會導致行為變化
2.作用:解決復雜的if判斷
3.代碼
狀態(tài)模式

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

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

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