js设计模式(一)

构造器模式

var employee1 = {
	name:"xiaoyuan",
	age:20
}
var employee1 = {
	name:"xiaowang",
	age:22
}

// 可以采用构造器模式,封装成函数
function Employee(name,age){
	this.name = name
	this.age = age
	// 这种写法是将方法挂在对象上
	this.show = function(){
		console.log(this.name+"------"+this.age)
	}
}
// 可复用
const employee1 = new Employee("xiaoyuan",20)
employee1.show()
const employee2 = new Employee("xiaowang",22)
employee2.show()
// 也可以将方法挂在原型链上
Employee.prototype.say = function(){
	console.log("I say....")
}
// es6类写法
class Employee{
	constructor(name,age){
		this.name = name
		this.age = age
	}
	// 在类中,方法是直接挂在原型上
	show(){
		console.log(this.name+"------"+this.age)
	}
}

工厂模式

// 角色管理
class User{
	constructor(role,pages){
		this.role = role
		this.pages = pages
	}
	static userFactory(role){
		switch(role){
			case "sperAdmin":
				return new User("sperAdmin",['home','user-mange','news-mange'])
				break;
			case "admin":
				return new User("admin",['home','user-mange'])
				break;
			case "editor":
				return new User("sperAdmin",['home','news-mange'])
				break;
			default:
				throw new Error("权限校验失败")
		}
	}
}

抽象类

class User{
	constructor(name,role,pages){
		this.name = name
		this.role = role
		this.pages = pages	
	}
	showDialog(){
		console.log("欢迎回来,"+this.name)
	}
}
class SuperAdmin extends User{
	constructor(role){
		super(role)
	}
	showData(){
		console.log("超级管理员的数据")
	}
}
class Admin extends User{
	constructor(role){
		super(role)
	}
	showData(){
		console.log("管理员的数据")
	}
}
class Editor extends User{
	constructor(role){
		super(role)
	}
	showData(){
		console.log("普通成员的数据")
	}
}
function abstractUserFactory(role){
	switch(role){
		case "superAdmin":
			return SuperAdmin	
		case "admin":
			return Adimn
		case "editor":	
			return Editor
		default:
			throw new Error("权限错误")
	}
}

建造者模式

class Table{
	init(){}
	getData(){}
	render(){}
}
class List{
	init(){}
	getData(){}
	render(){}
}
function Creator(){
	start(builder){
		builder.init()
		builder.getData()
		builder.render()
	}
}

单例模式

一个实例只能创建一次

// 对话框
(function(){
	var instance
	return function(){
		if(!instance){
			// 不存在创建
		}
		return instance
	}
})()

class Singleton{
	constructor(name,age){
		if(!Singleton.instance){
			this.name = name
			this.age = age
			Singleton.instance = this
		}
		return Singleton.instance
	}
}

装饰器模式

现有基础进行多个功能的添加

Function.prototype.before = function(beforeFn){
	var _this = this
	return function(){
		beforeFn.apply(this,arguments)
		return _this.apply(this,arguments)
	}
}
function test(){
	console.log("11111111")
}
(test.before(function(){
	console.log("0000000")
}))()

适配器模式

兼容不同类型的方法,axios就是最好的例子

class TencentMap{
	show(){}
}
class BaiduMap{
	display(){}
}
// 适配器
class TencentAdapatre extends TencentMap{
	constructor(){
		super()
	}
	display(){
		this.show()
	}
}
function renderMap(map){
	map.display()
}

策略模式

替代了之前的if...else判断

let strategry = {
	"A":(salary)=>salary*4,
	"B":(salary)=>salary*3,
	"C":(salary)=>salary*2,
}
function calBonus(level,salary){
	return strategry[level](salary)
}

代理模式

class Star{
	play(){
		console.log("接活")
	}
}
class ProxyHouse{
	constructor(){
		this.superStar = new Star()
	}
	talk(price){
		if(price >= 10000){
			this.superStar.play()
		}else{
			throw new Error("价格不合适")
		}
	}
}
// es6的Proxy方法: 访问执行get,修改执行set
new Proxy(position,{
	get(traget,key){}
	set(traget,key,value){}
})