Design patterns

2017-10-09

1.构造函数

function Person(name, age) {
    this.name = name;
    this.age = age;
}
//方法写在原型链上
Person.prototype.sayName = function() {a
    return this.name;
}
var handsome = new Person ('xiexuan',21);
console.log(handsome); //Person {name: "xiexuan", age: 21}

2.工厂模式factory


function createPeople(name,age){
 	var person = {
 		name:name,
 		age:age,
 		sayName:function(){
 		console.log('姓名：'+this.name+' '+'年龄:'+this.age)
 		}
 	};
 	
 	return person;
	
}
var p1 = createPeople('xx',21)
p1.sayName()  //姓名：xx 年龄:21

3.单例模式

单例模式就是，如果你要使用这个函数创建一个对象，如果这个对象存在则直接返回这个对象，如果对象不存在则创建这个对象。
无论你使用这个函数多少次，得到的都是同一个对象。

//函数的两个关注点：参数和return
var People = (function (){
	var instance ;
	function init(name){
		return {
			name:name
		};
	};
	
	return {
		createPeople:function(name){
			if(!instance){
				instance = init(name);
			}
			
			return instance;
		}
	};
})();
var p1 = People.createPeople('xiexuan');
var p2 = People.createPeople('xx');
console.log(p1); //'xiexuan'
console.log(p2); //'xiexuan'

4. 混合模式


var People = function (name,age){
	
	this.name  = name;
	this.age  = age;
	
}
People.prototype.sayName = function (){
	console.log(this.name);
}
function create (parentObj){
	function F(){};
	F.prototype = parentObj;
	return new F();
}
var Student = function (name,age,number){
	People.call(this,name,age);
 	 this.number = number ;
}
Student.prototype = create(People.prototype);
Student.prototype.sayNumber= function (){
	console.log(this.number);
}
var p1 = new Student('xiexuan',21,1451300234)
console.log(p1);

Student的原型链上有sayNumber方法，create方法将People的原型链放在Student的原型链上，所以从People继承过来的sayName方法在第二层原型链上。

5. 模块模式

通过闭包来实现一个模块
使用立即执行函数包裹代码段，使内部的私有变量和方法不会暴露出来，通过return函数给外部提供使用内部方法的接口。
这样的好处是不会污染全局变量，外部无法访问或者改变模块内部的变量和方法。

var Person = (function (){
	var name =  'xiexuan';
	
	function sayName (name){
		console.log(this.name);
	};
	
	return {
		name:name,
		sayName:sayName
	}
})()
Person.sayName() //xiexuan

6. 发布订阅模式

发布订阅模式，可以自定义发布事件，事件处理函数，通过订阅事件来触发事件，执行函数。


var EventCenter = (function(){
	
	var events = {};
	
	function on (evt,handle){
		events[evt] = events[evt]||[];
		events[evt].push({
			handle:handle
		})
	}
	
	
	function fire(evt,args){
		if(!events[evt]){
			return;
		}
		
	for(var i = 0 ; i<events[evt].length; i++){
		events[evt][i].handle(args);		
	}
}
	function off(evt){
		delete events[evt];
	}
	
	return {
	
		on:on,
		fire:fire,
		off,off
	}
	
})();
EventCenter.on('sayName',function (name){
	console.log(name)
})
EventCenter.fire('sayName','xiexuan');
EventCenter.off('sayName');//xiexuan
EventCenter.fire('sayName','xiexuan');//undefined

使用发布订阅模式写一个事件管理器，可以实现如下方式调用


Event.on('change', function(val){
    console.log('change...  now val is ' + val);  
});
Event.fire('change', '饥人谷');
Event.off('changer');


var Event = (function(){
	
	var events = {};
	
	function on (evt,handle){
		events[evt] = events[evt]||[];
		events[evt].push({
			handle:handle
		})
	}
	
	
	function fire(evt,args){
		if(!events[evt]){
			return;
		}
		
	for(var i = 0 ; i<events[evt].length; i++){
		events[evt][i].handle(args);		
	}
}
	function off(evt){
		delete events[evt];
	}
	
	return {
	
		on:on,
		fire:fire,
		off,off
	}
	
})();
Event.on('change', function(val){
    console.log('change...  now val is ' + val);  
});
Event.fire('change', '饥人谷'); 
//change...  now val is 饥人谷
Event.off('changer');
Event.fire('change', '饥人谷'); 
//undefined