乐趣区

javascript常见设计模式

jiezi

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

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

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

退出移动版