理解JavaScript设计模式

设计模式 应该是分开的，从设计到模式。设计就是按照一种思路或标准来实现功能，相同功能可以有不同设计方案来实现。

五大设计原则：

S（Single）：单一职责原则。一个程序只做好一件事，如果功能过于复杂就拆分开，每个部分保持独立。
O（Open）：开放封闭原则。对扩展开放，对修改封闭。增加需求时，扩展新代码而非修改已有代码。
L（Liskov人名）：李氏置换原则。子类能覆盖父类，父类能出现的地方子类就能出现，JS中使用较少（弱类 & 继承使用较少）。
I（Interface）：接口独立原则。保持接口的单一独立，类似单一职责原则，这里更关注接口。
D（Dependence）：依赖导致原则。开发的时候用抽象化编程而不是具体，JS用的较少。

用 promise 来说明 S O：

function loadImg(src){let promise = new Promise((resolve,reject) => {let img = document.createElement('img');img.onload = function(){resolve(img);};img.onerror = function(){reject('图片加载失败');}img.src = src;});return promise;
}let src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567141586897&di=61c49ae4eeaf8b0e383924e3a2ab0058&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367aa7f3cc7424738bd4b31ce525.jpg";let result = loadImg(src); // result 的值是一个 promiseresult.then((img) => {console.log(`width: ${img.width}`);return img;
}).then(img => {console.log(`height: ${img.height}`);
}).catch(ex => {console.log(ex);
})

单一职责原则：每个then中的逻辑只做好一件事；
开放封闭原则：如果新增需求，扩展then就行了；

设计准则：

小即是美
让每个程序员只做好一件事
快速建立原型
舍弃高效率而去可移植性
采用纯文本来存储数据
充分利用软件的杠杆效应（软件复用）
避免强制性的用户界面
各部分之和大于整体

23种设计模式具体demo地址：
JavaScript中 23种设计模式

理解JavaScript设计模式相关推荐

JavaScript 设计模式核⼼原理与应⽤实践之创建型：工厂模式·抽象工厂——理解“开放封闭”
JavaScript 设计模式核⼼原理与应⽤实践之创建型:工厂模式·抽象工厂--理解"开放封闭" 一个不简单的简单工厂引发的命案在实际的业务中,我们往往面对的复杂度并非数个类 ...
【JavaScript设计模式张容铭】抽象工厂模式深度剖析——关于继承与constructor属性的深度理解
写在前面最近阅读了张容铭的<JavaScript设计模式>一书,阅读到抽象工厂模式一节时对书上的代码产生了疑问,但同时在解决疑问的过程中,对继承又产生了新的理解. 我仔细查阅了很多文章, ...
JavaScript设计模式理解
之前没有关注过设计模式,一直处于为完成功能而开发的阶段.找同事review代码时,总能轻而易举的发现代码里的不足之处.很多都是自己开发时根本就没想到的. 其实很想知道为什么同事能想到,自己就想不到.可 ...
理解JavaScript中部分设计模式
理解JavaScript中部分设计模式什么是设计模式在软件工程中,设计模式是软件设计中常见问题可重用的方案.设计模式代表着经验丰富的软件开发人员使用的最佳实践.设计模式可以被认为是编程模板. 为什 ...
深入理解JavaScript系列（33）：设计模式之策略模式（转）
介绍策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化不会影响到使用算法的客户. 正文在理解策略模式之前,我们先来一个例子,一般情况下,如果我们要做数据合法性验证,很 ...
深入理解JavaScript系列（27）：设计模式之建造者模式
介绍在软件系统中,有时候面临着"一个复杂对象"的创建工作,其通常由各个部分的子对象用一定的算法构成:由于需求的变化,这个复杂对象的各个部分经常面临着剧烈的变化,但是将它们组合在一 ...
深入理解JavaScript系列（33）：设计模式之策略模式
介绍策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化不会影响到使用算法的客户. 正文在理解策略模式之前,我们先来一个例子,一般情况下,如果我们要做数据合法性验证,很 ...
JavaScript设计模式——单例模式的理解与应用
JavaScript设计模式--对单例模式的一些见解 JavaScript设计模式主要分类: ①创建型设计模式,例如单例模式.工厂模式 ②结构型设计模式,例如装饰者模式.适配器模式 ③行为型设计模式, ...
深入理解JavaScript系列（32）：设计模式之观察者模式
介绍观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们 ...

理解JavaScript设计模式

理解JavaScript设计模式相关推荐

最新文章

热门文章