js几种常见的设计模式

一、工厂模式

//方式一 ：  一次只能创建一个对象 
	//缺点 ：  创建多个同类对象时，代码会重复
var obj = {
		"sname":"jack",
		"study" :function(){
			console.log("学习ing");
		}
	};
	
	var obj2 = new Object();
	obj2.sname = "lily";
	obj2.study = function(){
		console.log( "学习ing" );
	}

工厂模式

function student(name, age) {
		var obj = new Object()
		obj.name = name
		obj.age = age
		return obj
	}
	var stu1 = student(xiao li, 18)
	var stu2 = student(xiao yuan, 18)
	console.log( stu1 instanceof Object )

二、单例模式

function Animal(name){
	this.name = name;
}
var a1 = new Animal("小白");
var a2 = new Animal("大白");
console.log( a1 == a2 ); 
//要求 ：  a1 == a2  返回true   单例模式

function Student() {
		if (!Student.instance) {
			Student.instance = {
				age: 3,
				name: xiao,
			}
		}
		return Student.instance
	}
	var s1 = new Student()
	s1.age += 4
	var s2 = new Student()
	console.log(s1 = s2) // true
	console.log(s2.age) // 7

三、代理模式

function Mx(){
	this.sing = function(){
		console.log( "可以开演唱会..." );
	}
}

function Jjr(){
	this.sing = function(money){
		if( money >= 200000000 ){
			//通知主人 可以开演唱会啦
			new Mx().sing();
		}
	}
}

var jj = new Jjr();
jj.sing( 200000001 );

四、适配器模式

function Ipad(){
		this.music = function(){
			console.log( "ipad可以播放音乐" );
		}
	}
	//定义一个适配器  判读产品功能
	function Adapter(pro){
		this.pro = pro;//某个商品
		this.music = function(){
			if( this.pro.music ){
				console.log("可以播放音乐")
			}else{
				console.log("不可以播放音乐")
			}
		}
		this.phone = function(){
			if( this.pro.phone ){
				console.log("可以打电话")
			}else{
				console.log("不可以打电话")
			}
		}
	}
	
	var ipad = new Ipad();
	var adapter = new Adapter(ipad);
	adapter.music();
	adapter.phone();

五、策略模式

function Child(dad,mum){
		this.dad = dad;
		this.mum = mum;
		this.cry = function(){
			//小孩哭了  通知 爸爸 开始冲奶了
			this.dad.weinai();
		}
		
		//观察者模式（异步现象）
		setTimeout( function(){
			this.cry();
		}.bind(this),Math.random()*5000+200 )
	}
	
	function Dad(){
		this.weinai = function(){
			console.log( "开始给孩子喂奶了" );
		}
	}
	
	var dad = new Dad();
	var ch = new Child(dad , null);

六、发布订阅模式和观察者模式

class EventEmitter {
	constructor() {
		this.subs = Object.create(null)
	}
	 // { click: [fn1, fn2], change: [fn] }
	$on(eventType, handler) {
		this.subs[eventType] = this.subs[eventType] || []
		this.subs[eventType].push(handler)
	}
	$emit(eventType) {
		if (this.subs[eventType].forEach(handler => {
			handler()
		}))
	}
}

// 测试
   let em = new EventEmitter()
   em.$on(click, () => {
     console.log(click1)
   })
   em.$on(click, () => {
     console.log(click2)
   })
   em.$on(fn, ()=> {
   	console.log(fn)
   })
   em.$emit(click)
   em.$emit(fn)

七、观察者模式

class Dep {
	constructor() {
		this.subs = []
	}
	addSub(sub) {
		if (this.sub && this.sub.update) {
			this.subs.push(sub)
		}
	}
	notify() {
		this.subs.forEach(sub => {
			sub.update()
		})
	}
}
class Watch {
	update() {
		console.log(update)
	}
}

let dep = new Dep()
let watcher1 = new Watcher()
let watcher2 = new Watcher()
dep.addSub(watcher1)
dep.addSub(watcher2)
dep.notify()