随笔分类 - js设计模式
摘要：js设计模式简介 设计模式的核心思想 封装变化 （将变与不变分离，确保变化的部分灵活，不变的部分稳定）。 设计模式共 23中，可以分为： 创建型模式、行为型模式、结构型模式 三大类。 创建型模式 工厂模式 抽象工厂模式 单列模式 建造者模式 原型模式 结构型模式 适配器模式 桥接模式 组合模式 装饰
阅读全文
摘要：行为型：迭代器模式 迭代器模式：提供一种方法顺序访问一个聚合对象的各个元素，而又不暴露该对象的内部表示。 迭代器模式是设计模式中少有的目的性极强的模式，它就解决一个问题 -- 遍历。 1 // 迭代器模式 2 // 借助数组的Symbol.iterator生成它对应得迭代器对象。 3 const a
阅读全文
摘要：行为型：观察者模式 观察者模式：定义一种一对多的依赖关系，让多个观察者对象同时监听某一个对象，当这个目标对象的状态发生改变时，会通知所有的观察者对象，使它们自动更新。 使用：一个对象（目标对象）的状态发生改变，所有依赖对象（观察者对象）都将得到广播通知。 方式：使用面向对象技术，将这种依赖关系弱化。
阅读全文
摘要：行为型：状态模式 状态模式：允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。 1 /** 2 * 场景：假如要做个四种咖啡机的机器。 3 * - 美式咖啡态（american)：只吐黑咖啡 4 * - 普通拿铁态(latte)： 黑咖啡加点奶 5 * - 香草拿铁态（vani
阅读全文
摘要：行为模式：策略模式 策略模式： 定义一系列的算法，把他们一个个封装起来，并且使它们可相互替换。 假设场景：有同一个商品，通过在后台给它设置不同的价格类型，让他展示不同的价格。 当价格类型为“预售价”时，满 100 - 20，不满 100 打 9 折 当价格类型为“大促价”时，满 100 - 30，不
阅读全文
摘要：结构性：代理模式 代理模式：在某些情况下，出于某种限制，一个对象不能直接访问另一个对象，需求通过第三者(代理)牵线搭桥从而达到访问的目的。 在ES6中，提供专门以代理角色出现的代理器 Proxy。 假设一个场景，有一个介绍所，我们用代理模式模拟一下。 1 /** 2 * 代理模式 保护代理 3 *
阅读全文
摘要：适配器模式实践：axios axios本身就用到了适配器模式，他的兼容方案值得学习和借鉴。 axios的强大之处，在于它不仅仅局限于浏览器端的库，在Node 环境下，也照样好使，axios完美地磨平了两种环境下api的调用差异 ，靠的正是对适配器模式的灵活运用。 在axios的核心逻辑中，实际上派发
阅读全文
摘要：结构型： 适配器模式 适配器模式：通过把一个类的接口变换成客户端所期待的另一种接口，通常解决不兼容问题。 具体的业务实现场景，小明用 fetch 封装了一个 http 的方法库： 1 export default class HttpUtils { 2 // get方法 3 static get(u
阅读全文
摘要：结构型：装饰器模式 装饰器模式，又称为装饰者模式。 定义：在不改变原对象的基础上，通过对其进行包装扩展，使原有对象可以满足用户更复杂的需求。 应用场景：需求 -- 业务中的按钮在点击之后都弹出 【请先登录】的弹框。 html<button id='open'>点击打开</button> <butto
阅读全文
摘要：创建型：原型模式 原型模式不仅是一种设计模式，还是一种编程规范，是js面向对象系统实现的根基。 在原型模式下，要创建一个对象时，会先找到一个对象作为原型，然后通过 克隆原型 的方式来创建一个与原型一样的对象。 JS中的类，本质上是 原型继承的语法糖。 ECMAScript 2015 中引入的 Jav
阅读全文
摘要：创建型：单例模式 保证一个类仅有一个实例，并提供一个访问它的全局访问点，这种模式叫做单例模式。 单例模式的实现思路: 1 // 首先先创建一个类，通过new关键字调用构造函数可以生成任意多得实例对象。 2 class Single { 3 show() { 4 console.log("我是一个单列
阅读全文
摘要：创建型： 工厂模式(简单工厂） 工厂模式： 就是将创建对象的过程单独封装。有构造函数的地方，就应该想到工厂模式。 优点： 创建一个对象只需要知道它得名称即可 扩展性高，新增一个产品只要扩展一个工厂类 屏蔽内部具体实现，只关心产品对应接口 缺点: 每增加一个产品，都要郑家一个具体得对象类工厂，系统类成
阅读全文
浙公网安备 33010602011771号