常见的设计模式
- 单例模式
- 工厂模式
- 策略模式
- 代理模式
- 观察者模式-发布订阅模式
- 模块模式
- 构造函数模式
- 混合模式
- 单例模式:
这种设计模式的思想是确保一个类只有唯一实例,一般用于全局缓存,比如全局window,唯一登录浮窗等。采用闭包的方式实现如下:
var Singleton = (function(){
function H(){}
var instance = null;
return function(){
if(instance){retrun instance}
instance = new H()
return instance;
}
})()
let a = new Singleton()
let b = new Singleton()
console.log(Object.is(a,b))
- 工厂模式
工厂模式是创建对象的常用设计模式,为了不暴露创建对象的具体逻辑,将逻辑封装在一个函数中,这个函数就称为一个工厂。本质上是一个负责生产对象实例的工厂。工厂模式根据抽象程度的不同分为:简单工厂,工厂方法和抽象工厂。通常用于根据权限生成角色的场景,实现方式如下:
let UserFactory = function(role){
if(this instanceof UserFactory){
var s = new this[role]()
return s
}else{
return new UserFactory(role)
}
}
UserFactory.prototype = {
SuperAdmin:function(){
this.name = "超级管理员"
this.viewPage = ["首页","通讯录","发现页","应用数据","权限管理"]
},
Admin: function() {
this.name = "管理员",
this.viewPage = ['首页', '通讯录', '发现页', '应用数据']
},
NormalUser: function() {
this.name = '普通用户',
this.viewPage = ['首页', '通讯录', '发现页']
}
}
let superAdmin = UserFactory("SuperAdmin")
let admin = UserFactory("Admin")
let normalUser = UserFactory("NormalUser")
- 策略模式
策略模式的本意将算法的使用与算法的实现分离开来,避免多重判断调用哪些算法。适用于有多个判断分支的场景,如解决表单验证的问题。可以创建一个validator对象,有一个validate()方法。这个方法被调用时不用区分具体的表单类型,它总是会返回同样的结果,一个没有通过验证的列表和错误信息。实现方式如下:
function vipPrice(){
this.discount = 0.5;
}
vipPrice.prototype.getPrice = function(price){
return price * this.discount;
}
function oldPrice(){
this.discount = 0.3;
}
oldPrice.prototype.getPrice = function(price){
return price * this.discount;
}
function Price (){
this.discount = 1;
}
Price.prototype.getPrice(price){
return price * this.discount;
}
function Context(){
this.name = "";
this.strategy = null;
this.price = 0;
}
Context.prototype.set = function(name,strategy,price){
this.name = name;
this.strategy = strategy;
this.price = price;
}
Context.prototype.getResult = function(){
console.log(this.name + ' 的结账价为: ' + this.strategy.getPrice(this.price))
}
var context = new Context();
var vip = new vipPrice();
context.set('vip客户',vip,200)
context.getResult()
- 代理模式
代理模式是为其他对象提供一种代理,也就是当其他对象直接访问该对象时,如果开销较大,就可以通过这个代理层控制该对象的访问。常见的使用场景未懒加载,合并http请求和缓存。代理模式实现如下:
(function(){
function Subject(){}
Subject.prototype.request = function(){}
function Proxy(realSubject){
this.realSubject = realSubject;
}
Proxy.prototype.request = function(){
this.realSubject.request();
}
})()
- 观察者模式
也叫做发布订阅模式,在这种模式中,一个订阅者订阅发布者,当一个特定的事件发生的时候,发布者会通知调用所有的订阅者。实现代码如下:
Class Events{
constrouctor(){
this._events = {}
}
on(name,fn,...orgArg){
if(!name || !fn){ throw new Error()}
let fns = this._events[name] || [];
if(fns.find(item=>item.fnOrg === fn)){return;}
this._events[name] = fns.concat({fn:(...arg)=>{fn.apply(null,[...orgArg,...arg])},fnOrg:fn})
}
emit(name,...arg){
this._events[name]||[].forEach(item=>{
item.fn(...arg)
})
}
fire(name,fn){
if(!arguments.length){this._events = new Object(null)}
if(arguments.length ===1){
delete this._events[name]
}
let fns = this._events[name] ||[]
if(!fns.length){return}
this._events[name] = fns.filter(item=>{return item.fnOrg !==fn})
}
once(name,fn,...argOrg){
let fnOn = function(...arg){
fn.apply(null,arg)
this.fire(name,fnOn);
}
this.on(name,fnOn,...argOrg)
}
}
- 模块模式
模块模式可以指定类想暴露的属性和方法,并且不会污染全局。采用闭包的方式,实现如下:
var Person = (function(){
var name = "xx";
function sayName(){
console.log(name)
}
return {
name:name,
sayName:sayName
}
})()