TyrionJ的博客

介绍迭代器模式是一种相对简单的模式，相对普通的for循环它隐藏了迭代的具体细节.伪代码betterFor(param,fn) { if(typeof fn === 'object') { for(let i in param ) { fn.call(i) } return } if(Array.isArray(param)) { for(let i = 0,le...

工厂模式工厂模式是JS中很常见的一种模式，用来批量创建对象，使用工厂模式可以帮助我们避免创建同类对象时产生冗余代码。下面我们通过一个实例来看看工厂模式在实际开发中的应用。实例点击页面上以下按钮页面依次弹出以下提示信息代码实现const ICONS = { success: './assets/success.png', warn: './asset...

外观模式外观模式，顾名思义，外表看起来相同，但实际可能不一致。在JS中外观模式通常用于处理兼容性问题。比如封装了一个bindEvent事件绑定方法，不同的浏览器会调用bindEvent内部封装的浏览器所支持的方法。外观模式封装示例 myEvent = { stop: function (e) { if (typeof e.preventDefault...

装饰器模式装饰器模式(AOP)是一种常见的设计模式，React框架中的高阶函数就是使用了装饰器模式，比如一个高阶函数接受了一个基础组件，这个基础组件设计之初只是一个单纯的展示组件，并没有任何的数据处理。现在我们想在这个组件渲染后发送ajax请求。有两种实现方式在原来组件的componentDidMount函数中发送ajax请求，这样会破坏了原来的展示组件。编写一个高阶函数，返回一个新的组...

中介者模式当很多模块之间的耦合度或依赖度过高时，我们考虑使用中介者模式来实现，各个模块之间不相互通信，而是通过中介者来完成。通过下面的示例来体会使用中介者模式和不使用中介者模式之间的差异。示例 口罩购买原型图及分析没有选择口罩种类，按钮文本为：请选择口罩种类没有选择口罩数量，按钮文本为： 请选择口罩数量选择口罩种类和数量后需要进行以下校验库存校验，库存不足，按钮文本...

代理模式设计模式的概念都是较为抽象的，下面通过几个实例展示代理模式的实际应用虚拟代理：常见保护代理保护代理比较少见，比如后台提供的上传图片接口uploadImg,后台接受请求后，在uploadImg中过滤gif格式的图片，如果是预期的图片格式，那么调用真正的保存图片方法saveImage这种可以理解为保护代理。代理模式的实际应用函数节流const throttle ...

一.关于策略模式含义定义一系列算法，并使他们可以相互替换这里的替换是指在Context环境类中替换所引用的策略从而实现算法的替换目的将算法的使用和算法的实现分离开来基本组成策略模式至少需要两部分策略类（可变）：封装了具体的算法，并负责具体的计算过程，策略类中定义了不同的策略，不同的策略对应不同的具体算法（计算方式）。环境类Context（不变）：接受请求，并根据调用具体的策...

一.什么是单例模式单例模式顾名思义是在该模式下，函数调用时如果实例没有创建就新创建一个实例，再次调用该函数返回已经创建的实例。二.单例模式的通用实现在实现单例的过程中，我们通常使用两个函数，第一个函数来实现单例控制逻辑，第二个函数用来创建实例// 管理单例function getSingleton(fn) { let instance; return function...

一. 发布-订阅发布订阅模式又叫观察者模式，在某些文章中会阐述发布-订阅模式和观察者模式之间的区别，本文不阐述两者之间的具体差异，只阐述发布订阅模式的通用实现，以及如何借助该模式实现数据的变动到页面的更新。二. 基本实现 /** * 发布订阅（又叫观察者模式） * 实现发布订阅模式 **/ class Event { constructo...