组合模式

csxiaoyaojianxian · csxiaoyaojianxian · commit a9a06195f8cf · 2019-09-04T00:09:33.000+08:00
diff --git a/06-设计模式/10.1 组合模式-命令模式优化.html b/06-设计模式/10.1 组合模式-命令模式优化.html
@@ -0,0 +1,78 @@
+组合模式可以使用树形方式创建对象的结构
+可以把相同的操作应用在组合对象和单个对象上，可以忽略组合对象和单个对象之间的差别，用一致的方式来处理它们
+
+<body>
+    <button id="button">按我</button>
+</body>
+<script>
+var MacroCommand = function(){
+    return {
+        commandsList: [],
+        add: function( command ){
+            this.commandsList.push( command );
+        },
+        execute: function(){
+            for ( var i = 0, command; command = this.commandsList[ i++ ]; ){
+                command.execute();
+            }
+        }
+    }
+};
+var openAcCommand = {
+    execute: function(){
+        console.log( '打开空调' );
+    }
+};
+/**********家里的电视和音响是连接在一起的，所以可以用一个宏命令来组合打开电视和打开音响的命令*********/
+var openTvCommand = {
+    execute: function(){
+        console.log( '打开电视' );
+    }
+};
+var openSoundCommand = {
+    execute: function(){
+        console.log( '打开音响' );
+    }
+};
+var macroCommand1 = MacroCommand();
+macroCommand1.add( openTvCommand );
+macroCommand1.add( openSoundCommand );
+/*********合并 关门、打开电脑和登录QQ 的命令****************/
+var closeDoorCommand = {
+    execute: function(){
+        console.log( '关门' );
+    }
+};
+var openPcCommand = {
+    execute: function(){
+        console.log( '开电脑' );
+    }
+};
+var openQQCommand = {
+    execute: function(){
+        console.log( '登录QQ' );
+    }
+};
+var macroCommand2 = MacroCommand();
+macroCommand2.add( closeDoorCommand );
+macroCommand2.add( openPcCommand );
+macroCommand2.add( openQQCommand );
+/*********现在把所有的命令组合成一个“超级命令”**********/
+var macroCommand = MacroCommand();
+macroCommand.add( openAcCommand );
+macroCommand.add( macroCommand1 );
+macroCommand.add( macroCommand2 );
+/*********最后给遥控器绑定“超级命令”**********/
+var setCommand = (function( command ){
+    document.getElementById( 'button' ).onclick = function(){
+        command.execute();
+    }
+})( macroCommand );
+
+// 打开空调
+// 打开电视
+// 打开音响
+// 关门
+// 开电脑
+// 登录QQ
+</script>
diff --git a/06-设计模式/10.2 组合模式-文件管理.html b/06-设计模式/10.2 组合模式-文件管理.html
@@ -0,0 +1,55 @@
+
+<script>
+/**
+ * Folder
+ */
+var Folder = function( name ){
+    this.name = name;
+    this.files = [];
+};
+Folder.prototype.add = function( file ){
+    this.files.push( file );
+};
+Folder.prototype.scan = function(){
+    console.log( '开始扫描文件夹: ' + this.name );
+    for ( var i = 0, file, files = this.files; file = files[ i++ ]; ){
+        file.scan();
+    }
+};
+/**
+ * File
+ */
+var File = function( name ){
+    this.name = name;
+};
+File.prototype.add = function(){
+    throw new Error( '文件下面不能再添加文件' );
+};
+File.prototype.scan = function(){
+    console.log( '开始扫描文件: ' + this.name );
+};
+
+// 处理文件和文件夹层级关系
+var folder = new Folder( '学习资料' );
+var folder1 = new Folder( 'JavaScript' );
+var folder2 = new Folder ( 'jQuery' );
+var folder3 = new Folder( 'Nodejs' );
+var file1 = new File( 'JavaScript 设计模式与开发实践' );
+var file2 = new File( '精通jQuery' );
+var file3 = new File( '重构与模式' );
+var file4 = new File( '深入浅出Node.js' );
+var file5 = new File( 'JavaScript 语言精髓与编程实践' );
+
+folder1.add( file1 );
+folder2.add( file2 );
+folder3.add( file4 );
+
+folder.add( folder1 );
+folder.add( folder2 );
+folder.add( file3 );
+folder.add( folder3 );
+folder.add( file5 );
+
+folder.scan();
+
+</script>
diff --git a/06-设计模式/10.3 组合模式-引用父对象.html b/06-设计模式/10.3 组合模式-引用父对象.html
@@ -0,0 +1,75 @@
+组合对象保存了它下面的子节点的引用，这是组合模式的特点，此时树结构是从上至下的
+但有时候我们需要在子节点上保持对父节点的引用，比如在组合模式中使用职责链时，有可能需要让请求从子节点往父节点上冒泡传递
+还有当我们删除某个文件的时候，实际上是从这个文件所在的上层文件夹中删除该文件的
+<script type="text/javascript">
+/**
+ * Folder
+ * parent & remove
+ */
+var Folder = function( name ){
+    this.name = name;
+    this.parent = null; //增加this.parent 属性
+    this.files = [];
+};
+Folder.prototype.add = function( file ){
+    file.parent = this; //设置父对象
+    this.files.push( file );
+};
+Folder.prototype.scan = function(){
+    console.log( '开始扫描文件夹: ' + this.name );
+    for ( var i = 0, file, files = this.files; file = files[ i++ ]; ){
+        file.scan();
+    }
+};
+Folder.prototype.remove = function(){
+    if ( !this.parent ){ //根节点或者树外的游离节点
+        return;
+    }
+    for ( var files = this.parent.files, l = files.length - 1; l >=0; l-- ){
+        var file = files[ l ];
+        if ( file === this ){
+            files.splice( l, 1 );
+        }
+    }
+};
+/**
+ * File
+ * parent & remove
+ */
+var File = function( name ){
+    this.name = name;
+    this.parent = null;
+};
+
+File.prototype.add = function(){
+    throw new Error( '不能添加在文件下面' );
+};
+
+File.prototype.scan = function(){
+    console.log( '开始扫描文件: ' + this.name );
+};
+
+File.prototype.remove = function(){
+    if ( !this.parent ){ //根节点或者树外的游离节点
+        return;
+    }
+    for ( var files = this.parent.files, l = files.length - 1; l >=0; l-- ){
+        var file = files[ l ];
+        if ( file === this ){
+            files.splice( l, 1 );
+        }
+    }
+};
+
+var folder = new Folder( '学习资料' );
+var folder1 = new Folder( 'JavaScript' );
+var file1 = new Folder ( '深入浅出Node.js' );
+
+folder1.add( new File( 'JavaScript 设计模式与开发实践' ) );
+folder.add( folder1 );
+folder.add( file1 );
+folder1.remove(); //移除文件夹
+
+folder.scan();
+
+</script>
diff --git a/06-设计模式/temp/10/10.html b/06-设计模式/temp/10/10.html
