前端进阶-设计模式

1、创建型模式创建型模式介绍的是创建对象的机制 能够提升已有代码的灵活性和可复用性。简单工厂模式工厂方法模式常用负责创建所有的实例依照不同的类型创建不同的对象优点屏蔽了对象生成的时候的复杂性产生/构建产品比较简单不需要关注内部细节只需要知道自己想要哪一种。缺点产品数量一旦特别多的时候工厂内部逻辑会比较复杂不利于理解和维护//Fruit类产品类: public interface Fruit { public void plantProcess(); } 定义三种水果ApplePearOrange: public class Apple implements Fruit{ public void plantProcess() { System.out.println(I am an Apple); } } public class Pear implements Fruit{ public void plantProcess() { System.out.println(I am a Pear); } } public class Orange implements Fruit{ public void plantProcess() { System.out.println(I am an Orange); } } //工厂类 public class FruitFactory { public static getFruit(String name) { if (Apple.equalsIgnoreCase(name)) { return new Apple(); } else if (Pear.equalsIgnoreCase(name)) { return new Pear(); } else if (Orange.equalsIgnoreCase(name)) { return new Orange(); } return null; } } //测试代码 Fruit apple FruitFactory.getFruit(Apple); apple.plantProcess(); Fruit pear FruitFactory.getFruit(Pear); pear.plantProcess(); Fruit orange FruitFactory.getFruit(Orange); orange.plantProcess();案例根据不同的用户角色如admin, editor, guest创建不同的用户操作菜单组件抽象工厂模式不常用为一个抽象类定义了基本的方法但无需指定实现根据产品类去实现。单列模式常用一个类只有一个实例 并提供一个访问该实例的全局节点。案例像 Vuex 或 Redux 这样的状态管理库其核心的store就是一个单例。像Message或Notification这样的全局提示组件通常会使用单例模式来管理它们的实例。class Single{ public static instance privite constructor(){} public static getInstance(){ if(!Single.instance){ Single.instance new single() } return Single.instance } public methods(){} } //使用 let instance Single.getInstance()原型模式不常用能够复制已有对象 而又无需使代码依赖它们所属的类生成器模式不常用分步骤一种组合的方式创建复杂对象(产品)2、结构型模式结构型模式介绍如何将对象和类组装成较大的结构 并同时保持结构的灵活和高效。适配器模式常用使接口不兼容的对象接口能够相互合作。目标对象a接口需要与对象b接口对接时存在不兼容的问题。通过某些处理操作适配器使得对象b接口适配目标对象a接口。案例跨浏览器兼容整合第三方的sdk新老代码兼容装饰器模式常用扩展目标对象中方法的功能形成新的类。在不改变原对象的基础上通过对其进行包装拓展使得原有对象可以动态具有更多功能从而满足用户的更复杂需求。桥接模式常用可将业务逻辑或一个大类或一系列紧密相关的类拆分为不同的层次结构 从而能独立地进行开发。案例如果你想要拆分或重组一个具有多重功能的庞杂类例如能与多个数据库服务器进行交互的类 可以使用桥接模式。如果你希望在几个独立维度上扩展一个类 可使用该模式。桥接建议将每个维度抽取为独立的类层次。 初始类将相关工作委派给属于对应类层次的对象 无需自己完成所有工作。代理模式不常用让你能提供真实服务对象的替代品给客户端使用。 代理接收客户端的请求并进行一些处理 访问控制和缓存等 然后再将请求传递给服务对象。案例图片预加载loading 图图片懒加载外观模式不常用基于已有的类方法封装一些新的方法创建一些新的功能3、行为模式行为模式负责对象间的高效沟通和职责委派。观察者和发布-订阅者模式必考参考观察者和发布-订阅者模式JS中观察者模式与发布订阅模式关于观察者模式与发布/订阅模式不少大神都有帖子对他们做出了解释但是很多文章都将两者混在 - 掘金在观察者模式中订阅者和观察者是同一个类它整个模式只有发布者观察者事件总线事件中心订阅eventHub.$on(方法名function(接收数据的参数){用该组件的数据接收传递过来的数据})发布eventHub.$emit(方法名传递的数据)取消发布eventHub.$off(方法名函数名称)取消订阅要给函数一个名字不能为匿名函数ts的规范写法 export class EventBusT any { // 定义一个事件中心[事件名订阅者[],] private listeners new Mapstring, Setany(); //private anyListeners new Setany(); //发布 $emit (eventName: string, ...args: T[]) { const listeners this.listeners.get(eventName) if (!listeners) { return } listeners.forEach((listener) { listener(...args) }) //this.anyListeners.forEach((listener) { // listener(eventName, ...args) //}) } 订阅 $on (eventName: string, func: any) { if (!this.listeners.has(eventName)) { this.listeners.set(eventName, new Set()) } // 通过键名获取到的是对应的值订阅一个事件即为该事件名对应的set对象添加一个订阅者 const listeners this.listeners.get(eventName) listeners!.add(func) } // onAny (func: any) { // this.anyListeners.add(func) // } $off (eventName: string, func: any) { const listeners this.listeners.get(eventName) listeners.delete(func) } }vue2双向数据绑定组成观察者Observer用来劫持并监听所有属性如果有变动的就通知订阅者如果有获取就添加订阅者。订阅器含有一个订阅者列表及通知订阅者更新的函数订阅者Watcher(这么理解观看的就是订阅者吧): 每一个Watcher都绑定一个更新函数watcher可以收到属性的变化通知并执行相应的函数从而更新视图。编译器Compile可以扫描和解析每个节点的相关指令v-modelv-on等指令如果节点存在v-modelv-on等指令则解析器Compile初始化这类节点的模板数据使之可以显示在视图上然后初始化相应的订阅者Watcher。关系说明基础版思想数据劫持发布订阅者模式数据劫持当将一个普通js的对象作为vue实例的data项vue将遍历此对象的所有property并通过Object.defineProperty的getter,setter将所有的key进行劫持。关系说明每一个key都对应一个setter(),getter()函数和订阅器dep实例get函数:当key的获取函数getter()被触发时就会创建一个watcher实例存储到订阅器dep实例的数组中。set 函数:当key的修改函数setter()被触发时就会触发订阅器dep中的notify函数通知所有依赖该key的组件订阅者进行更新,通知组件实例更新。订阅器dep实例中有个subs[]数组中存放着所有依赖该key订阅者及notify函数进阶版利用Object.defineProperty的get和set进行数据劫持利用observe遍历data数据来进行监听并为数据创建dep实例来收集依赖利用Compile对dom中的所有节点进行编译并为组件添加wathcer实例通过depwatcher发布订阅模式实现数据与视图同步策略模式常用具体它将一组行为转换为对象 并使其在原始上下文对象内部能够相互替换命令模式职责链责任链模式状态模式访问者模式迭代器模式