簡單工廠模式

抽象各個對象的共同點，加工出最初形態，對于不同點進行獨立設計。

function createBook(name, time, type) {
  //創建一個對象，并對對象拓展屬性和方法
  const o = new Object();
  //共同參數
  o.name = name;
  o.time = time;
  o.getName = function () {
    console.log(this.name);
  }
  //差異性
  if (type === "js") {
    //js類書差異處理
  } else if (type === "css") {
    //css類書差異處理
  } else if (type === "html") {
    //html類書差異處理
  }
  return o;
}

const book1 = createBook('js book', 2014, 'js');
const book2 = createBook('css book', 2013, 'css');
const book3 = createBook('html book', 2012, 'css');

book1.getName();
book2.getName();
book3.getName();

安全工廠模式

安全工廠模式可以屏蔽對類的錯誤使用，如忘記寫new實例化對象避免產生一些非預期的行為。

function Factory(type, content) {
  //如果忘記寫new實例化了，加工重新執行一次
  if (this instanceof Factory) {
    this[type](content);
  } else {
    new Factory(type, content);
  }
}
Factory.prototype = {
  JAVAScript: (content) => {
    console.log(content)
  },
  Java: (content) => {
    console.log(content)
  },
}

Factory('JavaScript', 'JavaScript哪家強');
Factory('Java', 'Java哪家強');

建設者模式

顧名思義，結合多個類，創造出結合出來的終極人物（對象）

//創建人類
function Human(param) {
  //技能
  this.skill = param && param.skill || "保密";
  //興趣愛好
  this.hobby = param && param.hobby || "保密";
}
Human.prototype.getSkill = function () {
  return this.skill;
}
Human.prototype.getHobby = function () {
  return this.hobby;
}
//創建姓名類
function Name(name) {
  (function (_this, name) {
    _this.wholeName = name;
    _this.firstName = name.slice(0, name.indexOf(" "));
    _this.secordName = name.slice(name.indexOf(" "));
  })(this, name)
}
//創建職位類
function Work(work) {
  (function (_this, work) {
    switch (work) {
      case "code":
        _this.work = "工程師";
        _this.workDescript = "每天沉醉于編程";
        break;
      case "UI":
      case "UE":
        _this.work = "設計師";
        _this.workDescript = "設計更是一種藝術";
        break;
      case "teach":
        _this.work = "教師";
        _this.workDescript = "分享頁是一種快樂";
        break;
      default:
        _this.work = work;
        _this.workDescript = "對不起，我們還不清楚您所選擇職位的相關描述";
    }
  })(this, work)
}
//創建建設者類
function Person(name, work) {
  var person = new Human();
  person.name = new Name(name);
  person.work = new Work(work);
  return person;
}

const person = new Person("xiao ming", "code");
console.log(person.skill);                  //保密
console.log(person.work.workDescript);      //每天沉醉于編程
console.log(person.name.firstName);         //xiao

這里結合了Humer、Name、Work，最后在Person中構造出了一個應聘者。

原型模式

用原型實例指向創建對象的類，適用于創建新的對象的類共享原型對象的屬性以及方法。簡而言之，就是根據一個基類（原型類）構造出多個子類，將公用方法和屬性保存在原型類中。

//圖片輪播基類
function LoopImages(imgArr, contAIner) {
  this.imgArr = imgArr;
  this.container = container;
}
LoopImages.prototype = {
  //創建輪播圖片
  createImage: function (img) {
    this.imgArr.push(img);
    console.log('LoopImages createImage function');
  },
  //切換下一張圖片
  changeImage: () => {
    console.log('LoopImages changeImage function');
  }
}
//上下滑動切換類
function SlideLoopImg(imgArr, container) {
  LoopImages.call(this, imgArr, container);
}
SlideLoopImg.prototype = new LoopImages();
//重寫繼承的切換下一張圖片方法
SlideLoopImg.prototype.changeImage = () => {
  console.log('SlideLoopImg changeImage function');
}

//漸隱切換類
function FadeLoopImg(imgArr, container, arrow) {
  LoopImages.call(this, imgArr, container);
  this.arrow = arrow;
}
FadeLoopImg.prototype = new LoopImages();
//重寫繼承的切換下一張圖片方法
FadeLoopImg.prototype.changeImage = () => {
  console.log('FadeLoopImg changeImage function');
}

const fade = new FadeLoopImg([
  '01.jpg',
  '02.jpg',
  '03.jpg',
  '04.jpg'
], 'div', [
  'left.jpg',
  'right.jpg'
])
console.log(fade.arrow);        //['left.jpg','right.jpg']
console.log(fade.imgArr);       //['01.jpg', '02.jpg', '03.jpg', '04.jpg']
fade.createImage('05.jpg');     //LoopImages createImage function
console.log(fade.imgArr);        //['01.jpg', '02.jpg', '03.jpg', '04.jpg', '05.jpg']
fade.changeImage();             //FadeLoopImg changeImage function

可以看到，原型模式可以讓多個對象分享同一個原型對象的屬性與方法，這也是一種繼承方式。原型對象更加適合在創建復雜的對象時，對于那些需求一直在變化而導致對象結構不停改變時，將那些比較穩定的屬性與方法公共提取，實現繼承，代碼復用。

單例模式

單例模式，顧名思義，一個類只能有一個實例，重復實例化只會返回第一次實例的對象。

靜態變量

通過一個立即執行函數，將所有方法掛載，并且為靜態變量，無法改變。

const React = (function () {
  var react = {
    useState: () => { },
    useEffect: () => { },
    useRef: () => { },
    useMemo: () => { },
    useCallback: () => { },
    useReducer: () => { },
    useContext: () => { }
  }
  return {
    get: function (name) {
      return react[name] || null;
    }
  }
})()

console.log(React.get('useState'))

實例化單例

創建一個立即執行函數，利用閉包，使記錄值常駐在內存中，每次實例化的時候判斷是否為第一次實例化，實現單例。

const React = (function () {
  let instance = null;
  return function (params) {
    if (instance) {
      return instance
    }
    this.params = params;
    return instance = this;
  }
})()

console.log(new React({
  useState: () => { },
  useEffect: () => { },
  useRef: () => { },
  useMemo: () => { },
  useCallback: () => { },
  useReducer: () => { },
  useContext: () => { }
}) === new React('hh'));      //true

惰性單例

非實例化創建方式，也是一種延遲創建的方式。

function React(fns) {
  this.fns = fns;
}
React.instance = null;
React.getFn = function () {
  console.log(this.fns)
}
React.getInstance = function (name) {
  if (!this.instance) {
    return this.instance = new React(name)
  }
  return this.instance
}

console.log(React.getInstance({
  useState: () => { },
  useEffect: () => { },
  useRef: () => { },
  useMemo: () => { },
  useCallback: () => { },
  useReducer: () => { },
  useContext: () => { }
}) === React.getInstance('xx'));    //true