![](https://img-blog.csdnimg.cn/20190704204433684.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript设计模式
设计模式(Design Pattern)是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。 使用设计模式的目的:为了代码可重用性、让代码更容易被他人理解、保证代码可靠性。 设计模式使代码编写真正工程化;设计模式可以大大提高软件开发效率,思想促进进步。
追求者2016
我的墓志铭:有的人活着,他已经死了;有的人死了,他还活着。你到底是活着还是死了?我不知道,我只知道——我还活着。我是一个无知的人,但我知道一点,那就是我什么都不知道。坚强地活下去。
展开
-
学习设计模式——单例模式
单例模式 也叫单体模式,一个类只实例化一次 优点: 节约系统资源, 缺点: 不易扩展,违反单一职责原则 适用场景 当一个类的实例化过程消耗的资源过多,可以使用单例模式来避免性能浪费; 当项目中需要一个公共的状态,那么需要使用单例模式来保证访问一致性; 代码实现: function Singleton() { // 如果已存在实例,则返回单例 if (Singleton._instance)...原创 2020-09-18 10:15:02 · 145 阅读 · 0 评论 -
学习设计模式——代理模式
代理模式 代理模式 (Proxy Pattern)又称委托模式,它为目标对象创造了一个代理对象,以控制对目标对象的访问。 代理模式把代理对象插入到访问者和目标对象之间,从而为访问者对目标对象的访问引入一定的间接性。正是这种间接性,给了代理对象很多操作空间,比如在调用目标对象前和调用后进行一些预操作和后操作,从而实现新的功能或者扩展目标的功能。 有点像黑社会大佬进警局,有事和我的代理律师讲。律师就...原创 2020-04-08 18:54:06 · 203 阅读 · 0 评论 -
学习设计模式——建造者模式
建造者模式 建造者模式(Builder Pattern)又称生成器模式,分步构建一个复杂对象,并允许按步骤构造。同样的构建过程可以采用不同的表示,将一个复杂对象的构建层与其表示层分离。 例如汽车装配,汽车由车身、引擎、轮胎组合而成。汽车制造厂一般不自己生产全部的部件,而是从零件商采购零件组装,最后完成装配。 代码实现 // 建造者,汽车部件厂商,提供具体零件的生产 function CarBuil...原创 2020-04-07 14:25:38 · 208 阅读 · 0 评论 -
学习设计模式——工厂模式、抽象工厂模式
工厂模式 工厂模式 (Factory Pattern),根据不同的输入返回不同类的实例,一般用来创建同一类对象。工厂方式的主要思想是将对象的创建与对象的实现分离 抽象工厂 抽象工厂 (Abstract Factory):通过对类的工厂抽象使其业务用于对产品类簇的创建,而不是负责创建某一类产品的实例。关键在于使用抽象类制定了实例的结构,调用者直接面向实例的结构编程,从实例的具体实现中解耦。 工厂模式...原创 2020-04-02 18:33:12 · 272 阅读 · 0 评论 -
学习设计模式——组合模式
文章目录实战,借助组合模式,实现dom树节点的创建优缺点适用场景 组合模式,又叫整体-部分模式,它允许你将对象组合成树形结构来表现 整体-部分层次结构,让使用者可以以一致的方式处理组合对象以及部分对象。 例如树形文件目录结构,就符合组合模式的特征 用组合模式实现,以下场景: 本地有一个【学习资料】文件夹,文件夹下又两个文件夹【大桥老师】和【小苍老师】, 文件夹下分别各自有一些资料和文件...原创 2020-03-19 14:17:53 · 192 阅读 · 0 评论 -
学习设计模式——桥接模式
桥接模式,将抽象部分与它的实现部分分离,使他们都可以独立地变化 使用组合关系代替继承关系,降低抽象和实现两个可变纬度的耦合度 // 用桥接模式 实现工厂生产洗衣机的不同型号 // 组装洗衣机 function Washer(motorType, rollerType, transducerType) { this.motor = new Motor(motorType); this...原创 2020-03-18 13:56:00 · 172 阅读 · 0 评论 -
学习设计模式——发布-订阅模式
发布订阅模式,又叫观察者模式,它定义了一种一对多的关系,让多个订阅者对象监听某一个发布者,发布者状态发生更新时派发信息给每一个订阅者。 举个例子,我想买一双AJ鞋,鞋店没货了,我给店员留个号码,我不关心店家什么时候到货。店家到货后店员会给我打电话通知我,我想要的鞋到货了,我可以去购买。 代码实现 // ES5 IIFE 实现 var Publisher = (function() { ...原创 2020-01-13 16:02:03 · 180 阅读 · 0 评论 -
学习设计模式——职责链模式
职责链模式 // 定义一个公共类 let Leader = function () { this.nextLeader = null; }; Leader.prototype.setNext = function (next) { this.nextLeader = next; return next; // 这样可以链式子调用 ...原创 2019-12-27 18:42:51 · 123 阅读 · 0 评论 -
学习设计模式——装饰器模式
装饰器模式 在不影响原有功能的情况下,增加新功能 装饰可以增加多个,给共同目标对象添加额外功能 代码例子 es6代码 class OriginHouse { getDesc() { console.log('毛坯房') } } class Painting { constructor(house) { this.house = house } getDes...原创 2019-10-29 13:42:43 · 178 阅读 · 1 评论 -
学习设计模式——策略模式,使用策略模式优化校验表单
使用策略模式校验表单 还在使用if else 校验表单?每次增加字段都要加 if,编码体验实在太差,快来使用策略模式 // 对象字面量 var strategies = { isNonEmpty: function(value, errorMsg) { if (value === '') { ...原创 2019-08-22 15:47:57 · 286 阅读 · 0 评论 -
学习设计模式——迭代器模式
学习设计模式——迭代器模式 文章目录学习设计模式——迭代器模式数组迭代器对象迭代器同步变量迭代器分支循环嵌套无问题 迭代器模式:提供一种方法顺序访问一个聚合对象的各个元素,而又不暴露其内部的表示 数组迭代器 var eachArray = function(arr, fn) { if(Object.prototype.toString.call(arr) !== '[object Arra...原创 2019-06-22 08:17:22 · 222 阅读 · 0 评论 -
学习设计模式——缓存模式(备忘录模式)
学习设计模式——缓存模式(备忘录模式) 文章目录学习设计模式——缓存模式(备忘录模式) 场景:有一个新闻列表数据的翻页功能,目前的实现方式是点击上下页翻页请求服务器数据渲染,如果多次点击,出现重复请求数据问题。可以采用缓存模式优化设计 原始代码 /** * 获取数据 * @param {*} page 页数 * @param {*} fn 回调函数 */ var getPageData...原创 2019-06-20 07:30:19 · 339 阅读 · 0 评论 -
学习设计模式——20有序车站——职责链模式
20 有序车站——职责链模式 文章目录20 有序车站——职责链模式分解需求第一站,请求模块第二站,响应数据适配模块终点站,创建组件模块站点检测,单元测试 场景:领导叫过去说实现一个表单,要有输入验证和输入提示交互体验,具体是什么类型的表单,还没确定。 这是我们面对一个"半成品"的需求,由于需求不明确,没法直接做,做了还有改,不如不做。这时我们可以应用职责链模式 分解需求 把这个任务分解为 请...原创 2019-06-18 22:39:15 · 190 阅读 · 0 评论