设计模式 init

Author: csxiaoyaojianxian

7 设计模式/1/1.1 动态语言类型.html

@@ -0,0 +1,27 @@
+
+<script type="text/javascript">
+	var duck = {
+		duckSinging: function(){
+			console.log( '嘎嘎嘎' );
+		}
+	};
+
+	var chicken = {
+		duckSinging: function(){
+			console.log( '嘎嘎嘎' );
+		}
+	};
+
+	var choir = []; // 合唱团
+	var joinChoir = function( animal ){
+		if ( animal && typeof animal.duckSinging === 'function' ){
+			choir.push( animal );
+			console.log( '恭喜加入合唱团' );
+			console.log( '合唱团已有成员数量:' + choir.length );
+		}
+	};
+
+	joinChoir( duck ); // 恭喜加入合唱团
+	joinChoir( chicken ); // 恭喜加入合唱团
+
+</script>

7 设计模式/1/1.2.1 多态1.html

@@ -0,0 +1,17 @@
+<script type="text/javascript">
+	
+	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() ); // 咯咯咯
+
+</script>

7 设计模式/1/1.2.2 多态2.html

@@ -0,0 +1,30 @@
+<script type="text/javascript">
+
+	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() ); // 咯咯咯
+
+	var Dog = function(){};
+
+	Dog.prototype.sound = function(){
+		console.log( '汪汪汪' );
+	};
+
+	makeSound( new Dog() ); // 汪汪汪
+
+</script>

7 设计模式/1/1.2.6 多态3.html

@@ -0,0 +1,56 @@
+
+<script type="text/javascript">
+
+	var googleMap = {
+		show: function(){
+			console.log( '开始渲染谷歌地图' );
+		}
+	};
+
+	var renderMap = function(){
+		googleMap.show();
+	};
+
+	renderMap(); // 输出：开始渲染谷歌地图
+
+	var googleMap = {
+		show: function(){
+			console.log( '开始渲染谷歌地图' );
+		}
+	};
+
+	var baiduMap = {
+		show: function(){
+			console.log( '开始渲染百度地图' );
+		}
+	};
+
+	var renderMap = function( type ){
+		if ( type === 'google' ){
+			googleMap.show();
+		}else if ( type === 'baidu' ){
+			baiduMap.show();
+		}
+	};
+
+	renderMap( 'google' ); // 输出：开始渲染谷歌地图
+	renderMap( 'baidu' ); // 输出：开始渲染百度地图
+
+	var renderMap = function( map ){
+		if ( map.show instanceof Function ){
+			map.show();
+		}
+	};
+
+	renderMap( googleMap ); // 输出：开始渲染谷歌地图
+	renderMap( baiduMap ); // 输出：开始渲染百度地图
+
+	var sosoMap = {
+		show: function(){
+			console.log( '开始渲染搜搜地图' );
+		}
+	};
+
+	renderMap( sosoMap ); // 输出：开始渲染搜搜地图
+
+</script>

7 设计模式/1/1.3.1 封装.html

@@ -0,0 +1,15 @@
+<script type="text/javascript">
+
+	var myObject = (function(){
+		var __name = 'sven'; // 私有（private）变量
+		return {
+			getName: function(){ // 公开（public）方法
+				return __name;
+			}
+		}
+	})();
+
+	console.log( myObject.getName() ); // 输出：sven
+	console.log( myObject.__name ) // 输出：undefined
+
+</script>

7 设计模式/1/1.4.1.html

@@ -0,0 +1,24 @@
+<script type="text/javascript">
+	
+	var Plane = function(){
+		this.blood = 100;
+		this.attackLevel = 1;
+		this.defenseLevel = 1;
+	};
+
+	var plane = new Plane();
+	plane.blood = 500;
+	plane.attackLevel = 10;
+	plane.defenseLevel = 7;
+
+	var clonePlane = Object.create( plane );
+	console.log( clonePlane );  // 输出：Object {blood: 500, attackLevel: 10, defenseLevel: 7}
+
+	//在不支持Object.create 方法的浏览器中，则可以使用以下代码：
+	Object.create = Object.create || function( obj ){
+		var F = function(){};
+		F.prototype = obj;
+		return new F();
+	}
+
+</script>

7 设计模式/1/1.4.2.html

@@ -0,0 +1,89 @@
+<script type="text/javascript">
+
+ 	'use strict'
+
+	var obj1 = new Object();
+	var obj2 = {};
+
+	console.log( Object.getPrototypeOf( obj1 ) === Object.prototype ); // 输出：true
+	console.log( Object.getPrototypeOf( obj2 ) === Object.prototype ); // 输出：true
+
+
+	//再来看看如何用new 运算符从构造器中得到一个对象，下面的代码我们再熟悉不过了：
+	function Person( name ){
+		this.name = name;
+	};
+
+	Person.prototype.getName = function(){
+		return this.name;
+	};
+
+	var a = new Person( 'sven' )
+	console.log( a.name ); // 输出：sven
+	console.log( a.getName() ); // 输出：sven
+	console.log( Object.getPrototypeOf( a ) === Person.prototype ); // 输出：true
+
+	//在Chrome 和Firefox 等向外暴露了对象__proto__属性的浏览器下，我们可以通过下面这段代码来理解new 运算的过程：
+	function Person( name ){
+		this.name = name;
+	};
+
+	Person.prototype.getName = function(){
+		return this.name;
+	};
+
+	var objectFactory = function(){
+		var obj = new Object(), // 从Object.prototype 上克隆一个空的对象
+		Constructor = [].shift.call( arguments ); // 取得外部传入的构造器，此例是Person
+		obj.__proto__ = Constructor.prototype; // 指向正确的原型
+		var ret = Constructor.apply( obj, arguments ); // 借用外部传入的构造器给obj 设置属性
+		return typeof ret === 'object' ? ret : obj; // 确保构造器总是会返回一个对象
+	};
+
+	var a = objectFactory( Person, 'sven' );
+
+	console.log( a.name ); // 输出：sven
+	console.log( a.getName() ); // 输出：sven
+	console.log( Object.getPrototypeOf( a ) === Person.prototype ); // 输出：true
+
+
+	//下面的代码是我们最常用的原型继承方式：
+
+	var obj = { name: 'sven' };
+	var A = function(){};
+	A.prototype = obj;
+	var a = new A();
+	console.log( a.name ); // 输出：sven
+
+	//当我们期望得到一个“类”继承自另外一个“类”的效果时，往往会用下面的代码来模拟实现：
+	var A = function(){};
+	A.prototype = { name: 'sven' };
+	var B = function(){};
+	B.prototype = new A();
+	var b = new B();
+	console.log( b.name ); // 输出：sven
+
+	//通过Class 创建对象的一段简单示例代码①如下所示 ：
+	class Animal {
+		constructor(name) {
+			this.name = name;
+		}
+
+		getName() {
+			return this.name;
+		}
+	}
+
+	class Dog extends Animal {
+		constructor(name) {
+			super(name);
+		}
+		speak() {
+			return "woof";
+		}
+	}
+
+	var dog = new Dog("Scamp");
+	console.log(dog.getName() + ' says ' + dog.speak());
+
+</script>