JavaScript組合模式學(xué)習(xí)要點(diǎn)
組合模式:將一組對象組合成樹形結(jié)構(gòu),并統(tǒng)一對待組合對象和葉對象,忽略它們之間的不同(因?yàn)槿~對象也可以也可以包含葉對象而成為組合對象),組合模式中的對象只能是一對多的關(guān)系,不能出現(xiàn)多對一。
基本單元:一個(gè)組合對象包含多個(gè)葉對象。每個(gè)基本單元又可以是別的組合對象的葉對象類似文件夾與它里面的內(nèi)容的關(guān)系網(wǎng),一個(gè)文件夾或文件又可以是其它文件夾的內(nèi)容,但一個(gè)文件夾或文件不能同時(shí)屬于多個(gè)上級文件夾。
在JavaScript中實(shí)現(xiàn)組合模式時(shí),要保證組合對象和葉對象擁有相同的接口方法,對同一組葉對象的操作必須具有一致性。
例子:
//定義組合對象 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('開始掃描\''+this.parent.name+'\': '+this.name); }else{ console.log('開始掃描根目錄: '+this.name); } //關(guān)鍵在這里,調(diào)用所有它的葉對象的接口方法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('無法刪除: \''+file.name+'\'不存在:');} if(n >= 0){ this.files.splice(n,1); console.log('成功刪除:'+file.name); } }; //定義葉對象 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('無法刪除: \''+file.name+'\'不存在:'); }; //測試 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ì)料 //無法刪除: '學(xué)習(xí)質(zhì)料'不存在: //無法刪除: 'Node.js'不存在: folder.scan(); //這里相當(dāng)于執(zhí)行了一個(gè)宏命令 //開始掃描根目錄: 目錄 //開始掃描'目錄': javascript //javascript: qq.jpg
以上所述是小編給大家介紹的JavaScript組合模式,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- JavaScript適配器模式詳解
- javascript設(shè)計(jì)模式之Adapter模式【適配器模式】實(shí)現(xiàn)方法示例
- JavaScript設(shè)計(jì)模式之適配器模式介紹
- 深入理解JavaScript系列(39):設(shè)計(jì)模式之適配器模式詳解
- 詳解JavaScript實(shí)現(xiàn)設(shè)計(jì)模式中的適配器模式的方法
- javascript設(shè)計(jì)模式 – 適配器模式原理與應(yīng)用實(shí)例分析
- JavaScript設(shè)計(jì)模式學(xué)習(xí)之適配器模式
- JavaScript 設(shè)計(jì)模式之組合模式解析
- 設(shè)計(jì)模式中的組合模式在JavaScript程序構(gòu)建中的使用
- javascript設(shè)計(jì)模式 – 組合模式原理與應(yīng)用實(shí)例分析
- JavaScript設(shè)計(jì)模式開發(fā)中組合模式的使用教程
- javascript適配器模式和組合模式原理與實(shí)現(xiàn)方法詳解
相關(guān)文章
JavaScript深入V8引擎以及編寫優(yōu)化代碼的5個(gè)技巧
這篇文章主要介紹了JavaScript深入V8引擎以及編寫優(yōu)化代碼的5個(gè)技巧,JavaScript引擎是執(zhí)行 JavaScript 代碼的程序或解釋器。JavaScript引擎可以實(shí)現(xiàn)為標(biāo)準(zhǔn)解釋器,或者以某種形式將JavaScript編譯為字節(jié)碼的即時(shí)編譯器。,需要的朋友可以參考下2019-06-06Bootstrap modal使用及點(diǎn)擊外部不消失的解決方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap modal使用及點(diǎn)擊外部不消失的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12localStorage過期時(shí)間設(shè)置的幾種方法
聊到localStorage想必熟悉前端的朋友都不會陌生,在實(shí)際的應(yīng)用場景中,我們往往需要讓localStorage設(shè)置的某個(gè)key能在指定時(shí)間內(nèi)自動失效,所以基于這種場景,我們?nèi)绾稳ソ鉀Q呢,本文就詳細(xì)的介紹一下2021-12-12