乐趣区

javascript常见设计模式

设计模式:软件设计过程中针对特定问题的简洁而优雅的解决方案


1. 单例模式

单例模式的定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否,如果存在则直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。
适用场景:实现一个单一对象,比如弹窗,无论被创建多少次,只应该有一个实例对象。

class Modal {constructor(title, content) {
        this.title = title;
        this.content = content;
    }
}

const getModal = (function () {
    let instance = null;
    return function () {if (!instance) {instance = new Modal('标题', '文本内容');
        }
        return instance;
    }
})();

let a = getModal();
let b = getModal();

console.log(a === b); // true

2. 策略模式

策略模式的目的就是将算法的使用算法的实现分离开来。
策略模式至少由两部分组成:
1. 策略类:策略类封装了具体的算法,并负责具体的计算过程,是可变的;
2. 环境类:环境类接受客户的请求,随后将请求委托给某一个策略类,不可变;

/* 策略类 */
var levelOBJ = {"A": function(money) {return money * 4;},
    "B" : function(money) {return money * 3;},
    "C" : function(money) {return money * 2;} 
};
/* 环境类 */
var calculateBouns =function(level,money) {return levelOBJ[level](money);
};
console.log(calculateBouns('A',10000)); // 40000

3. 代理模式

代理模式的定义:为一个对象提供一个代用品或占位符,以便控制对它的访问。
图片懒加载就是一种典型有用场景:

function LazyImg() {}
LazyImg.prototype.getImg = function () {var imgNode = document.createElement('img');
    document.body.appendChild(imgNode);
    imgNode.src = './fake.png';
    return imgNode;
}
LazyImg.prototype.setImg = function (src) {var imgNode = this.getImg();
    var img = new Image();
    img.onload = function() {imgNode.src = this.src;}
    img.src = src;
}

var pic = new LazyImg();

cx.setImg('./rel.png');

4. 中介者模式

中介者模式的定义:通过一个中介者对象,其他所有的相关对象都通过该中介者对象来通信,而不是相互引用,当其中的一个对象发生改变时,只需要通知中介者对象即可。通过中介者模式可以解除对象与对象之间的紧耦合关系。
现实生活中,航线上的飞机只需要和机场的塔台通信就能确定航线和飞行状态,而不需要和所有飞机通信。同时塔台作为中介者,知道每架飞机的飞行状态,所以可以安排所有飞机的起降和航线安排。


5. 装饰者模式

装饰者模式的定义:在不改变对象自身的基础上,在程序运行期间给对象动态地添加方法。

退出移动版