重构

Author: csxiaoyaojianxian

06-设计模式/20.1 开放-封闭原则.html

@@ -16,99 +16,28 @@
 });
 </script>
 
+2. 用对象的多态性消除条件分支
+参见 1.3 多态
 
+3. 找出变化的地方
+封装程序中变化的部分
+例如：动物的叫声不同，而动物都会叫这是不变的，于是封装 makeSound 成一个稳定和封闭的函数
 
+其他辅助实现开闭原则代码的方法：
+3.1 放置挂钩（hook）
+参见 11.2 钩子方法
+3.2 使用回调函数
+函数可以作为参数传递给另外一个函数，这是高阶函数的意义之一，我们通常会把这个函数称为回调函数。
+在 JavaScript 版本的设计模式中，策略模式和命令模式等都可以用回调函数轻松实现。
+回调函数是一种特殊的挂钩，我们可以把一部分易于变化的逻辑封装在回调函数里，然后把回调函数当作参数传入一个稳定和封闭的函数中。
 
+4. 设计模式中的开放－封闭原则
+4.1 发布-订阅模式
 
+4.2 模板方法模式
 
+4.3 策略模式
 
+4.4 代理模式
 
-
-<script>
-	var makeSound = function( animal ){
-		if ( animal instanceof Duck ){
-			console.log( '嘎嘎嘎' );
-		}else if ( animal instanceof Chicken ){
-			console.log( '咯咯咯' );
-		}
-	};
-
-	var Duck = function(){};
-	var Chicken = function(){};
-	makeSound( new Duck() ); // 输出：嘎嘎嘎
-	makeSound( new Chicken() ); // 输出：咯咯咯
-
-
-
-	var makeSound = function( animal ){
-		if ( animal instanceof Duck ){
-			console.log( '嘎嘎嘎' );
-		}else if ( animal instanceof Chicken ){
-			console.log( '咯咯咯' );
-		}else if ( animal instanceof Dog ){ // 增加跟狗叫声相关的代码
-			console.log('汪汪汪' );
-		}
-	};
-
-
-
-	var Dog = function(){};
-	makeSound( new Dog() ); // 增加一只狗
-
-	var makeSound = function( animal ){
-		animal.sound();
-	};
-	var Duck = function(){};
-	Duck.prototype.sound = function(){
-		console.log( '嘎嘎嘎' );
-	};
-	var Chicken = function(){};
-	Chicken.prototype.sound = function(){
-		console.log( '咯咯咯' );
-	};
-	makeSound( new Duck() ); // 嘎嘎嘎
-	makeSound( new Chicken() ); // 咯咯咯
-	/********* 增加动物狗，不用改动原有的makeSound 函数 ****************/
-	var Dog = function(){};
-	Dog.prototype.sound = function(){
-		console.log( '汪汪汪' );
-	};
-	makeSound( new Dog() ); // 汪汪汪
-
-</script>
-
-
-<script>
-
-	var getUserInfo = function( callback ){
-		$.ajax( 'http:// xxx.com/getUserInfo', callback );
-	};
-	getUserInfo( function( data ){
-		console.log( data.userName );
-	});
-	getUserInfo( function( data ){
-		console.log( data.userId );
-	});
-
-	var arrayMap = function( ary, callback ){
-		var i = 0,
-		length = ary.length,
-		value,
-		ret = [];
-		for ( ; i < length; i++ ){
-			value = callback( i, ary[ i ] );
-			ret.push( value );
-		}
-		return ret;
-	}
-	var a = arrayMap( [ 1, 2, 3 ], function( i, n ){
-		return n * 2;
-	});
-	var b = arrayMap( [ 1, 2, 3 ], function( i, n ){
-		return n * 3;
-	});
-	
-	console.log( a ); // 输出：[ 2, 4, 6 ]
-	console.log( b ); // 输出：[ 3, 6, 9 ]
-
-</script>
+4.5 职责链模式

06-设计模式/21.1 接口和面向接口编程.html

@@ -0,0 +1,72 @@
+面向接口编程，而不是面向实现编程
+接口是对象能响应的请求的集合
+
+静态类型语言通常设计为可以“向上转型”, 对象的具体类型被隐藏在“超类型”身后
+当对象类型之间的耦合关系被解除之后，这些对象才能在类型检查系统的监视下相互替换使用，这样才能看到对象的多态性。
+
+总而言之，不关注对象的具体类型，而仅仅针对超类型中的“契约方法”来编写程序，可以产生可靠性高的程序，
+也可以极大地减少子系统实现之间的相互依赖关系
+
+<button id="exeCommand">执行菜单命令</button>
+<script>
+var RefreshMenuBarCommand = function(){};
+RefreshMenuBarCommand.prototype.execute = function(){
+	console.log( '刷新菜单界面' );
+};
+
+var AddSubMenuCommand = function(){};
+AddSubMenuCommand.prototype.execute = function(){
+	console.log( '增加子菜单' );
+};
+
+var DelSubMenuCommand = function(){};
+//
+
+var refreshMenuBarCommand = new RefreshMenuBarCommand(),
+	addSubMenuCommand = new AddSubMenuCommand(),
+	delSubMenuCommand = new DelSubMenuCommand();
+var setCommand = function( command ){
+	document.getElementById( 'exeCommand' ).onclick = function(){
+		if ( typeof command.execute !== 'function' ){
+			throw new Error( "command 对象必须实现 execute 方法" );
+		}
+		command.execute();
+	}
+};
+setCommand( refreshMenuBarCommand ); // 点击按钮后输出："刷新菜单界面"
+setCommand( addSubMenuCommand ); // 点击按钮后输出："增加子菜单"
+setCommand( delSubMenuCommand ); // 点击按钮后报错。Uncaught TypeError: undefined is not a function
+</script>
+
+typescript 实现 interface
+<script type="text/javascript">
+interface Command{
+	execute: Function;
+}
+
+class RefreshMenuBarCommand implements Command{
+	constructor (){
+	}
+	execute(){
+		console.log( '刷新菜单界面' );
+	}
+}
+class AddSubMenuCommand implements Command{
+	constructor (){
+	}
+	execute(){
+		console.log( '增加子菜单' );
+	}
+}
+class DelSubMenuCommand implements Command{
+	constructor (){
+	}
+	// 忘记重写 execute 方法
+}
+var refreshMenuBarCommand = new RefreshMenuBarCommand(),
+	addSubMenuCommand = new AddSubMenuCommand(),
+	delSubMenuCommand = new DelSubMenuCommand();
+refreshMenuBarCommand.execute(); // 输出：刷新菜单界面
+addSubMenuCommand.execute(); // 输出：增加子菜单
+delSubMenuCommand.execute(); // 输出：Uncaught TypeError: undefined is not a function
+</script>