javascript常见设计模式

crelaber 发布于2019-08-26 10:14 / 2380人阅读

摘要：设计模式软件设计过程中针对特定问题的简洁而优雅的解决方案单例模式单例模式的定义保证一个类仅有一个实例，并提供一个访问它的全局访问点。通过中介者模式可以解除对象与对象之间的紧耦合关系。

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

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

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

服务器托管云服务器 javascript常见用法 javascript设计模式 javascript命令模式 javascript严格模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105826.html

JavaScript 中常见设计模式整理

摘要：开发中，我们或多或少地接触了设计模式，但是很多时候不知道自己使用了哪种设计模式或者说该使用何种设计模式。本文意在梳理常见设计模式的特点，从而对它们有比较清晰的认知。 showImg(https://segmentfault.com/img/remote/1460000014919705?w=640&h=280); 开发中，我们或多或少地接触了设计模式，但是很多时候不知道自己使用了哪种设...

Nosee 2019-08-22 17:21 评论0 收藏0
前端每周清单半年盘点之 JavaScript 篇

摘要：前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。背后的故事本文是对于年之间世界发生的大事件的详细介绍，阐述了从提出到角力到流产的前世今生。前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎...

Vixb 2019-08-21 12:04 评论0 收藏0
[总结贴] 十个 JavaScript 中易犯的小错误

摘要：但是在中，的生命还会继续。这其中最典型的问题便是批量增加元素。这时，如果构造函数被调用时没有参数，则会自动设置为。因为从系统的角度来说，当你用字符串的时候，它会被传进构造函数，并且重新调用另一个函数。序言在今天，JavaScript已经成为了网页编辑的核心。尤其是过去的几年，互联网见证了在SPA开发、图形处理、交互等方面大量JS库的出现。如果初次打交道，很多人会觉得js很简单...

icattlecoder 2019-08-22 10:57 评论0 收藏0
【拒绝拖延】常见的JavaScript内存泄露原因及解决方案

摘要：前言内存泄漏指由于疏忽或错误造成程序未能释放已经不再使用的内存。这里就讲一些常见会带来内存泄露的原因。解决方案和都设为。前言内存泄漏指由于疏忽或错误造成程序未能释放已经不再使用的内存。内存泄漏并非指内存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费。这里就讲一些常见会带来内存泄露的原因。 0. 全局变量...

tangr206 2019-08-23 17:55 评论0 收藏0
JavaScript文章

摘要：我对知乎前端相关问题的十问十答张鑫旭张鑫旭大神对知乎上经典的个前端问题的回答。作者对如何避免常见的错误，难以发现的问题，以及性能问题和不好的实践给出了相应的建议。但并不是本身有问题，被标准定义的是极好的。这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。不论你是javascript新手还是老...

mumumu 2019-08-22 13:50 评论0 收藏0