快捷導(dǎo)航

JavaScript組合模式學(xué)習(xí)要點(diǎn)

更新時(shí)間：2016年08月26日 14:17:41 投稿：mrr

組合模式大概是設(shè)計(jì)模式里面使用最為廣泛的模式之一了，模式本身理解起來(lái)也比較簡(jiǎn)單，以至于可以毫不費(fèi)力的寫(xiě)出一個(gè)能用的組合模式偽代碼

組合模式：將一組對(duì)象組合成樹(shù)形結(jié)構(gòu)，并統(tǒng)一對(duì)待組合對(duì)象和葉對(duì)象，忽略它們之間的不同（因?yàn)槿~對(duì)象也可以也可以包含葉對(duì)象而成為組合對(duì)象），組合模式中的對(duì)象只能是一對(duì)多的關(guān)系，不能出現(xiàn)多對(duì)一。

基本單元：一個(gè)組合對(duì)象包含多個(gè)葉對(duì)象。每個(gè)基本單元又可以是別的組合對(duì)象的葉對(duì)象類似文件夾與它里面的內(nèi)容的關(guān)系網(wǎng)，一個(gè)文件夾或文件又可以是其它文件夾的內(nèi)容，但一個(gè)文件夾或文件不能同時(shí)屬于多個(gè)上級(jí)文件夾。

在JavaScript中實(shí)現(xiàn)組合模式時(shí)，要保證組合對(duì)象和葉對(duì)象擁有相同的接口方法，對(duì)同一組葉對(duì)象的操作必須具有一致性。

例子：

//定義組合對(duì)象
var Folder = function (name) {
this.name = name;
this.parent = null;
this.files = [];
};
Folder.prototype.add = function (file) {
file.parent = this;
if(this.files.indexOf(file) === -1){
this.files.push(file);
}else{
console.log('\''+file.name+'\'已存在,添加失敗');
}
};
Folder.prototype.scan = function () {
if(this.parent){
console.log('開(kāi)始掃描\''+this.parent.name+'\': '+this.name);
}else{
console.log('開(kāi)始掃描根目錄: '+this.name);
}
//關(guān)鍵在這里，調(diào)用所有它的葉對(duì)象的接口方法scan()
for(var i = 0, file; file = this.files[i++];){
file.scan();
}
};
Folder.prototype.remove = function (file) {
var n = this.files.indexOf(file);
if(n === -1){console.log('無(wú)法刪除: \''+file.name+'\'不存在:');}
if(n >= 0){
this.files.splice(n,1);
console.log('成功刪除:'+file.name);
}
};
//定義葉對(duì)象
var File = function (name) {
this.name = name;
this.parent = null;
};
File.prototype.add = function () {
console.log('不能添加在文件下面');
};
File.prototype.scan = function () {
console.log(this.parent.name+': '+this.name);
};
File.prototype.remove = function (file) {
console.log('無(wú)法刪除: \''+file.name+'\'不存在:');
};
//測(cè)試
var folder = new Folder('目錄');
var folder1 = new Folder('學(xué)習(xí)質(zhì)料');
var folder2 = new Folder('javascript');
var file1 = new File('Node.js');
var file2 = new File('qq.jpg');
folder.add(folder1);
folder.add(folder1);
folder.add(folder2);
folder1.add(file1);
folder2.add(file2);
//'學(xué)習(xí)質(zhì)料'添加成功
//'學(xué)習(xí)質(zhì)料'已存在,添加失敗
//'javascript'添加成功
//'Node.js'添加成功
//'qq.jpg'添加成功
folder.remove(folder1);
folder.remove(folder1);
file1.remove(file1);
//成功刪除:學(xué)習(xí)質(zhì)料
//無(wú)法刪除: '學(xué)習(xí)質(zhì)料'不存在:
//無(wú)法刪除: 'Node.js'不存在:
folder.scan(); //這里相當(dāng)于執(zhí)行了一個(gè)宏命令
//開(kāi)始掃描根目錄: 目錄
//開(kāi)始掃描'目錄': javascript
//javascript: qq.jpg

以上所述是小編給大家介紹的JavaScript組合模式，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: