組合模式

⭐️ 更多前端技術和知識點，搜索訂閱號 JS 菌 訂閱

• 組合模式在對象間造成樹形結構;
• 組合模式中基本對象和組合對象被一致對待;
• 無須關心對象有多少層, 調用時只需在根部進行調用;

實現原理

• 建立宏任務並維護一個任務列表 list
• 建立宏任務方法 add 將 task push 到 list 中
• 建立 execute 方法循環遍歷 list 中的 task 對象
• task 對象必須擁有一個名爲 execute 的方法（用來在宏任務中遍歷 list）

代碼實現

const MacroCommand = function() {
    this.lists = [] // 宏任務維護一個任務列表
}
MacroCommand.prototype.add = function(task) {
    this.lists.push(task) // add 方法增長任務
}
MacroCommand.prototype.execute = function() {
    for (let index = 0; index < this.lists.length; index++) {
        this.lists[index].execute() // execute 方法執行任務
    }
}

const command1 = new MacroCommand() // 經過 new 操做符建立任務

command1.add({
    execute: () => { console.log('command1-1') }
})

command1.add({
    execute: () => { console.log('command1-2') }
})

const command2 = new MacroCommand()

command2.add({
    execute: () => { console.log('command2-1') }
})

command2.add({
    execute: () => { console.log('command2-2') }
})

command2.add({
    execute: () => { console.log('command2-3') }
})

const macroCommand = new MacroCommand() // 假定 macroCommand 爲宏任務

macroCommand.add(command1) // 將其餘子任務推如任務列表
macroCommand.add(command2)

macroCommand.execute() // 宏命令執行操做後，command 將依次遞歸執行
// command1-1
// command1-2
// command2-1
// command2-2
// command2-3

應用

掃描文件夾

文件夾下面能夠爲另外一個文件夾也能夠爲文件, 咱們但願統一對待這些文件夾和文件, 這種情形適合使用組合模式。

const Folder = function(folder) {
    this.folder = folder
    this.lists = []
}
Folder.prototype.add = function(res) {
    this.lists.push(res)
}
Folder.prototype.scan = function() {
    console.log(`開始掃描文件夾: ${this.folder}`)
    for (let index = 0; index < this.lists.length; index++) {
        this.lists[index].scan()
    }
}

const File = function(file) {
    this.file = file 
}
File.prototype.add = function() {
    throw Error('文件中不可添加文件')
}
File.prototype.scan = function() {
    console.log(`開始掃描文件: ${this.file}`)
}

const folder = new Folder('根文件夾')
const folder1 = new Folder('JS')
const folder2 = new Folder('其餘')

const file = new File('JS prototype')
const file1 = new File('CSS 編程藝術')
const file2 = new File('HTML 標記語言')
const file3 = new File('HTTP-TCP-IP')

folder.add(folder1)
folder.add(folder2)

folder1.add(file)
folder2.add(file1)
folder2.add(file2)
folder2.add(file3)

folder.scan()

// 開始掃描文件夾: 根文件夾
// 開始掃描文件夾: JS
// 開始掃描文件: JS prototype
// 開始掃描文件夾: 其餘
// 開始掃描文件: CSS 編程藝術
// 開始掃描文件: HTML 標記語言
// 開始掃描文件: HTTP-TCP-IP

請關注個人訂閱號，不按期推送有關 JS 的技術文章，只談技術不談八卦 😊