這篇文章主要講解了JS中工廠模式的定義與實現(xiàn)方法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

公司主營業(yè)務(wù)：網(wǎng)站設(shè)計、成都做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)公司推出德宏州免費做網(wǎng)站回饋大家。

前言

上次我們介紹了單例模式，沒看過的小伙伴可以看這個鏈接：

淺析 JS 設(shè)計模式之：單例模式

今天來說一說一種常見的設(shè)計模式：工廠模式。

工廠模式是一種創(chuàng)建對象的 創(chuàng)建型模式，遵循 DRY（Don't Repeat Yourself）原則。在該模式下，代碼將會根據(jù)具體的輸入或其他既定規(guī)則，自行決定創(chuàng)建哪種類型的對象。簡單點兒說就是，動態(tài)返回需要的實例對象。

回顧上次的例子

讓我們繼續(xù)使用單例模式中的例子，一個日志工具 Logger ：

class Logger {
 log (...args) {
  console.log(...args);
 }
}

上面是最核心的 api，每次使用都需要使用 new Logger() 來創(chuàng)建一個 logger 對象，然后使用方法就和 console 一樣啦~

多種 Logger

假如我們現(xiàn)在的代碼要支持 electron環(huán)境，即日志既可以是 console 日志，也可以是 file 日志，那么我們就需要有兩種類型的 logger：

ConsoleLogger

// logger/console.js
class ConsoleLogger {
 log (...args) {
  console.log(...args)
 }
}
export default ConsoleLogger

FileLogger

// logger/file.js
class FileLogger {
 log (...args) {
  dumpLog(...args)
 }
}
export default FileLogger

這里先不用管 dumpLog 的具體實現(xiàn)，只用知道它就是將日志寫在文件中的即可~

使用工廠

我們已經(jīng)有了兩種類型的 logger，但是這兩種 logger 的 api 實際上都是一樣的，在項目中直接導(dǎo)入當(dāng)然也可以使用，只不過每次都要導(dǎo)入對應(yīng)類型的模塊，然后再使用，像下面這樣：

使用 console logger

import ConsoleLogger from './logger/console'
const logger = new ConsoleLogger()

使用 file logger

import FileLogger from './logger/file'
const logger = new FileLogger()

是不是很繁瑣？如果還有其他 logger 類型，如遠(yuǎn)程日志，就會出現(xiàn)更多種使用方式了。為了把 logger 模塊的使用方式統(tǒng)一，這時候就會用到工廠模式啦~

讓我們新建一個 index.js：

// logger/index.js
import ConsoleLogger from './console.js'
import FileLogger from './file.js'

function createLogger(type = 'console') {
 if (type === 'console') {
  return new ConsoleLogger()
 } else if (type === 'file') {
  return new FileLogger()
 }
 throw new Error(`Logger type not found: ${type}`)
}

export default createLogger

好了，這下我們的使用方式就會變成這樣：

import createLogger from './logger'
// console logger
const logger1 = createLogger('console')
// file logger
const logger2 = createLogger('file')

重構(gòu)一下

上面的 if else 不是很優(yōu)雅？如果有更多中 logger 類型添加起來很麻煩？那我們可以使用對象來映射一下，從而拋棄 if else，同時添加一個 logger 選項。

// logger/index.js
import ConsoleLogger from './console.js'
import FileLogger from './file.js'

const loggerMap = {
 console: ConsoleLogger,
 file: FileLogger
}
// 可選參數(shù)一般放在最后面
function createLogger(options, type = 'console') {
 const Logger = loggerMap[type]
 if (Logger) {
  return new Logger(options)
 }
 throw new Error(`Logger type not found: ${type}`)
}

上面這種封裝的方式，其實也符合 SOLID 原則中的 開閉原則，即 對擴展開放，對修改關(guān)閉，每當(dāng)我們添加一種 logger 類型時，只需要新增一個文件，然后將構(gòu)造器注冊進 loggerMap 中即可。而外面的使用方式都是不變的，這樣就用最少的修改完成了功能的新增，是不是很棒呀~

總結(jié)

下面我們來回顧一下工廠模式的優(yōu)點：

• 動態(tài)創(chuàng)建對象：可以用于需要在 運行時確定對象類型的情況。
• 抽象：封裝了對象創(chuàng)建的細(xì)節(jié)，用戶不會接觸到對象的構(gòu)造器，只需要告訴工廠需要哪種對象。
• 可用性 / 可維護性：將相似的對象用一個工廠管理，提供統(tǒng)一的創(chuàng)建接口，滿足 開閉原則，使我們可以輕松添加多種類型的對象，而無需修改大量代碼。

看完上述內(nèi)容，是不是對JS中工廠模式的定義與實現(xiàn)方法有進一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。