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.装饰者模式

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

    原文作者:甜瓜
    原文地址: https://segmentfault.com/a/1190000019823004
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞