DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript組合模式學習要點
JavaScript組合模式學習要點
編輯:關於JavaScript     

組合模式:將一組對象組合成樹形結構,並統一對待組合對象和葉對象,忽略它們之間的不同(因為葉對象也可以也可以包含葉對象而成為組合對象),組合模式中的對象只能是一對多的關系,不能出現多對一。

基本單元:一個組合對象包含多個葉對象。每個基本單元又可以是別的組合對象的葉對象類似文件夾與它裡面的內容的關系網,一個文件夾或文件又可以是其它文件夾的內容,但一個文件夾或文件不能同時屬於多個上級文件夾。

在JavaScript中實現組合模式時,要保證組合對象和葉對象擁有相同的接口方法,對同一組葉對象的操作必須具有一致性。

例子:

//定義組合對象
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);
}
//關鍵在這裡,調用所有它的葉對象的接口方法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('學習質料');
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);
//'學習質料'添加成功
//'學習質料'已存在,添加失敗
//'javascript'添加成功
//'Node.js'添加成功
//'qq.jpg'添加成功
folder.remove(folder1);
folder.remove(folder1);
file1.remove(file1);
//成功刪除:學習質料
//無法刪除: '學習質料'不存在:
//無法刪除: 'Node.js'不存在:
folder.scan(); //這裡相當於執行了一個宏命令
//開始掃描根目錄: 目錄
//開始掃描'目錄': javascript
//javascript: qq.jpg

以上所述是小編給大家介紹的JavaScript組合模式,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved