組合模式

FreeZinG 發(fā)布于2019-08-26 10:24 / 1335人閱讀

摘要：更多前端技術(shù)和知識點，搜索訂閱號菌訂閱組合模式在對象間形成樹形結(jié)構(gòu)組合模式中基本對象和組合對象被一致對待無須關(guān)心對象有多少層調(diào)用時只需在根部進(jìn)行調(diào)用實現(xiàn)原理創(chuàng)建宏任務(wù)并維護一個任務(wù)列表創(chuàng)建宏任務(wù)方法將到中創(chuàng)建方法循環(huán)遍歷中的對象對象必須擁有

?? 更多前端技術(shù)和知識點，搜索訂閱號 JS 菌 訂閱

組合模式在對象間形成樹形結(jié)構(gòu);

組合模式中基本對象和組合對象被一致對待;

無須關(guān)心對象有多少層, 調(diào)用時只需在根部進(jìn)行調(diào)用;

實現(xiàn)原理

創(chuàng)建宏任務(wù)并維護一個任務(wù)列表 list

創(chuàng)建宏任務(wù)方法 add 將 task push 到 list 中

創(chuàng)建 execute 方法循環(huán)遍歷 list 中的 task 對象

task 對象必須擁有一個名為 execute 的方法（用來在宏任務(wù)中遍歷 list）

代碼實現(xiàn)

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

const command1 = new MacroCommand() // 通過 new 操作符創(chuàng)建任務(wù)

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 為宏任務(wù)

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

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

應(yīng)用 掃描文件夾

文件夾下面可以為另一個文件夾也可以為文件, 我們希望統(tǒng)一對待這些文件夾和文件, 這種情形適合使用組合模式。

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 編程藝術(shù)")
const file2 = new File("HTML 標(biāo)記語言")
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 編程藝術(shù)
// 開始掃描文件: HTML 標(biāo)記語言
// 開始掃描文件: HTTP-TCP-IP

請關(guān)注我的訂閱號，不定期推送有關(guān) JS 的技術(shù)文章，只談技術(shù)不談八卦