前端設計模式——單例模式和工廠模式

来源:https://www.cnblogs.com/yinhaiying/archive/2019/04/27/10779697.html
-Advertisement-
Play Games

作為一個前端新人，學習了設計模式以後，希望能從源頭上，用淺顯易懂的語言來解釋它。當然不一定是正確的，只是我個人對設計模式的一點淺顯理解。 創建型設計模式 創建型設計模式：故名思意，這些模式都是用來創建實例對象的。 單例模式：首先我們需要理解什麼是單例。單：指的是一個。例：指的是創建的實例。單例：指的 ...


作為一個前端新人，學習了設計模式以後，希望能從源頭上，用淺顯易懂的語言來解釋它。當然不一定是正確的，只是我個人對設計模式的一點淺顯理解。

創建型設計模式

創建型設計模式：故名思意，這些模式都是用來創建實例對象的。

單例模式：首先我們需要理解什麼是單例。
單：指的是一個。
例：指的是創建的實例。
單例：指的是創建的總是同一個實例。也就是使用類創建的實例始終是相同的。
我們先看下麵的一段代碼：

class Person{
  constructor(){}
}
let p1 = new Person();
let p2 = new Person();
console.log(p1===p2) //false

 

上面這段代碼，定義了一個Person類，通過這個類創建了兩個實例，我們可以看到最終這兩個實例是不相等的。也就是說，通過同一個類得到的實例不是同一個(這本就是理所應當)，但是如果我們想始終得到的是同一個實例，那麼這就是**單例模式**。那麼應該如何實現單例模式了：
想要實現單例模式，我們需要註意兩點：

  1. 需要使用return。使用new的時候如果沒有手動設置return,那麼會預設返回this。但是，我們這裡要使得每次返回的實例相同，也就是需要手動控制創建的對象，因此這裡需要使用return。
  2.  我們需要每次return的是同一個對象。也就是說實際上在第一次實例的時候，需要把這個實例保存起來。再下一個實例的時候，直接return這個保存的實例。因此，這裡需要用到閉包了。

代碼實現如下：

(function(){
  let instance = null;
  return class{
      constructor(){
        if(!instance){
         //第一次創建實例，那麼需要把實例保存
          instance = this;
        }else{
          return instance;
      }
  }
  }
})()
let p3= new Person();
let p4 = new Person();
console.log(p3===p4)  //true

 

從上面的代碼中，我們可以看到在閉包中，使用instance變數來保存創建的實例，每次返回的都是第一次創建的實例。這樣的話就實現了無論創建多少次，創建的都是同一個實例，這就是單例模式。

工廠模式

對於工廠來說，我們的印象可能是裡面具有各種各樣的模具，根據你想要的產品的模型，生產你需要的產品。比如說你請工廠幫你加工一個產品，你只需要告訴工廠你這個產品的結構，工廠就會有對應的模型幫你生產，你不需要去關心它具體是怎麼加工的。同樣工廠模式也是這樣，(工廠模式也是創建型設計模式，用於創建實例對象的)你不需要自己去找對應的類來創建實例，你只需要告訴工廠類你要創建什麼實例，他就會返回你需要的實例對象。
工廠模式根據抽象程度的不同，分為三種：
1. 簡單工廠模式
2. 工廠方法模式
3. 抽象工廠模式
簡單工廠模式
定義：定義一個工廠類，通過工廠函數，根據傳入的參數不同，返回不同的實例。看下麵的代碼：

//學生類
class Student{
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  showName(){
    console.log(this.name)
  }
}

//老師類
class Teacher{
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  showName(){
    console.log(this.name)
  }
}

//警察類
class Policeman{
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  showName(){
    console.log(this.name)
  }
}
根據類創建對象
const s1 = new Student('王小一',24);
const t1 = new Teacher('李一老師',39);
const p1= new Policeman('張一警官',40);

 

我們可以看到，上面代碼中定義了三個類，學生類，老師類和警察類。而且它們具有相同的屬性和方法。當我們需要創建學生實例時，我們調用學生類。當我們需要創建老師實例時，我們調用老師類，當我們需要創建警察實例，我們調用警察類。假設我們有更多的人物類，它們具有相同的功能，那麼當我們需要創建實例的時候，我們同樣需要調用相對應的類。事實上，這些類實現的都是相同的功能，那麼我們可不可以把所有的創建這些人物實例都通過一個類來實現了。我們嘗試將代碼修改為如下：

//學生類
class Student{
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  showName(){
    console.log(this.name)
  }
}

//老師類
class Teacher{
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  showName(){
    console.log(this.name)
  }
}

//警察類
class Policeman{
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  showName(){
    console.log(this.name)
  }
}

//工廠類
class Factory{
  let obj = null;
  //工廠函數
  constructor(role,name,age){
    switch(role){
      case 'student':
         obj = new Student(name,age);
         break;
     case 'teacher':
         obj = new Teacher(name,age);
         break;
     case 'policeman':
         obj = new Policeman(name,age);
         break;
    }
  }
 return obj;
}

const s2 = new Factory('student','王小二',25);
const t2 = new Factory('teacher','李二老師',39);
const p2 = new Factory('policeman','張二警官',40);

 

從上面的代碼中，我們可以看到我們同樣定義了學生類，老師類，警察類這三個類，但是我們創建實例時通過Factory這個類，不再通過相對應的人物類了。這個Factory類就是工廠類，我們觀察工廠類的實現，發現裡面是一個工廠函數(這裡直接使用了constructor,也可以自己定義工廠函數)，通過傳遞給工廠函數的參數不同，返回不同的實例。這就是簡單工廠模式。

簡單工廠模式總結：
實現：從上面的代碼中我們可以知道，所謂簡單工廠模式就是一個工廠類和一個工廠函數，通過傳入參數的不同，返回不同的實例。
特點：1. 需要創建的類較少，因為需要根據傳入的參數來判斷返回的實例，如果類太多，那麼就會導致邏輯複雜。2. 不需要關註實例的創建過程，只需要傳入相對應的值即可。
適用場景：舉一個生活中實際的使用場合，假如我們上體育課需要去拿籃球，足球和排球，我們可以自己去一個一個找對應的球(類似於上面通過自己來創建對象)，也可以通過管理員，告訴管理員需要什麼樣的球，至於管理員是怎麼找到這個相對應的球，就與我們不相關了。這個管理員就是工廠類。
缺點：從簡單工廠模式的特點中我們可以知道，簡單工廠模式適合於創建的類較少，一旦需要的類較多，邏輯就會複雜。而且一旦需要添加新的類，就得重新修改工廠類，這樣顯得非常不方便。

工廠方法模式
工廠方法模式是對簡單工廠的進一步優化， 在工廠方法模式中，我們不再提供一個統一的工廠類來創建所有的對象，而是針對不同的對象提供不同的工廠。也就是說每個對象都有一個與之對應的工廠。說的好像挺複雜，其實在我看來他就是解決簡單工廠模式存在的不方便添加新的類，因為添加新的類以後需要修改工廠函數。而工廠方法模式就是解決這個問題，看下麵的代碼：

let Factory = (function(){
  let s = {
    Student(name,age){
      this.name = name;
      this.age = age;
      return this;
    },
    Teacher(name,age){
      this.name = name;
      this.age = age;
      return this;
    },
    Policeman(name,age){
      this.name = name;
      this.age = age;
      return this;
    },
    //在這裡添加新的類
    Doctor(name,age){
      this.name = name;
      this.age = age;
      return this;
    }
  }

  return class {
    //工廠函數根據傳進來的來的參數不同而不同。
    constructor(type,name,age){
      if(s.hasOwnProperty(type)){
        return s[type].call(this,name,age)
      }else{
        throw new Error(`不存在${type}類`)
      }

    }
  }


})()

let s3 = new Factory('Student','王小三',25);
let t3 = new Factory('Teacher','李三老師',25);
let p3 = new Factory('Policeman','張三警官',28);
let d3 = new Factory('Doctor','楊醫生',33);

 

從上面的代碼中，我們可以看到，相比於簡單工廠函數，工廠方法模式的工廠函數不是固定的，而是根據type不同而不同。當我們需要添加新的類時，只需要在s對象中添加實例即可，不需要修改工廠函數。這樣的話就不會因為需要添加新的類，而修改過多的代碼邏輯。這就是工廠方法模式。其實就是對簡單工廠模式的優化而已。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 用原生JS從零到一實現Redux架構
    前言 最近利用業餘時間閱讀了鬍子大哈寫的《React小書》，從基本的原理講解了React，Redux等等受益頗豐。眼過千遍不如手寫一遍，跟著作者的思路以及參考代碼可以實現基本的Demo，下麵根據自己的理解和參考一些資料，用原生JS從零開始實現一個Redux架構。 一.Redux基本概念 經常用Rea ...
  • 【原】無腦操作：TypeScript入門
    概述：本文描述TypeScript環境搭建，以及基於VSCode的自動編譯設置和調試設置。網路上很多相應文章的方式過時了或者無法試驗成功。 TypeScript簡介：由微軟開發的開源免費的編程語言，是JavaScript語言的一個超集，本質上為JavaScript語言添加了可選的靜態類型和基於類的面 ...
  • es6學習筆記-proxy對象
    前提摘要 尤大大的vue3.0即將到來，雖然學不動了，但是還要學的啊，據說vue3.0是基於proxy來進行對值進行攔截並操作，所以es6的proxy也是要學習一下的。 一 什麼是proxy Proxy 對象用於定義基本操作的自定義行為（如屬性查找，賦值，枚舉，函數調用等） 摘自MDN Proxy ...
  • Easyui 關閉jquery-easui tab標簽頁前觸發事件
    關閉jquery-easui tab標簽頁前觸發事件 by:授客 QQ：1033553122 測試環境 jquery-easyui-1.5.3 需求場景 點擊父頁面tab 頁關閉按鈕時，需要做判斷，判斷該tab頁面是否可以關閉：獲取子頁面js中定義的taskStatus，如果taskStatu不為t ...
  • js比較兩個單獨的數組或對象是否相等
    所謂js的中的傳值,其實也就是說5種基本數據類型(null,undefind,boolean,number,string) 傳引用也就是說的那個引用數據類型,(array和object) 基本數據類型的值不可變,而引用數據類型的值是可變的 所以當你比較數組和對象時,都是false;除非你是克隆的原份 ...
  • JavaScript基礎（一）
    JS的基本語法要求 1. 嚴格區分大小寫 2. 標識符命名要求（與java完全相同） 首個字元只能是 字母、下劃線、美元符號 其他位置只能是 字母、下劃線、美元符號、數字 3. 變數的聲明 JavaScript的聲明必須要使用var關鍵字，聲明方式有兩種。 聲明並且賦值：var 變數名 = 值 先聲 ...
  • canvas實現隨機驗證碼
    canvas實現隨機驗證碼 知識點 canvas生成背景圖和文字 設置字體樣式和大小 String的fromCharCode(code碼)生成大小寫字母和數字 str.toLowerCase()轉小寫 隨機抽取不重覆的6位數字組成驗證碼字元串 效果圖 html: css: js: javascrip ...
  • quillJS 富文本編輯器源碼分析系列1
    quillJS 富文本編輯器目前是一款很火富文本編輯器，使用廣泛，github 上面的 star 有 22,492，雖然說不以 star 論英雄，不過這可以說明它還是比較受歡迎的； 它的特點是：輕量，易上手，易擴展，開源，所見即所得的一款現代編輯器，還有一點是它的實現思路和其他的編輯器有點不一樣（會 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類