摘要: 装饰器模式 (我更倾向于叫 解耦模式) 在继承(extends)没有语法上的实现之前常用 在不改变原来的结构和功能基础上,动态装饰一些针对特别场景所适用的方法或属性,即添加一些新功能以增强它的某种能力 原有方法维持不变,在原有方法上再挂载其他方法来满足现有需求; 函数的解耦,将函数拆分成多个可复用的 阅读全文
posted @ 2020-10-27 15:42 荣光无限 阅读(382) 评论(0) 推荐(0) 编辑
摘要: 观察者模式 观察者模式,是对象的行为模式,在对象之间定义了一对多的依赖关系 就是多个观察者和一个被观察者之间的关系,当被观察者发生变化的时候,会通知所有的观察者对象,他们做出相对应的操作 实现方法定义一组可变的策略类封装具体算法,定义一组不变的环境类将请求委托给某一个策略类 使用场景适用于业务场景中 阅读全文
posted @ 2020-10-27 15:42 荣光无限 阅读(201) 评论(0) 推荐(0) 编辑
摘要: 策略模式 策略模式定义一系列的算法,将每一个算法封装起来,并让他们可以相互替换 实现方法定义一组可变的策略类封装具体算法,定义一组不变的环境类将请求委托给某一个策略类 使用场景适用于业务场景中需要判断多种条件,甚至包含复杂条件嵌套的,可以使用策略模式来提升代码的可维护性和可读性。比如支付,博客权限校 阅读全文
posted @ 2020-10-27 15:42 荣光无限 阅读(117) 评论(0) 推荐(0) 编辑
摘要: 单例模式 单例模式仅允许类或对象具有单个实例,并且它使用全局变量来存储该实例 实现方法是判断是否存在该对象的实例,如果已存在则不再创建 使用场景适用于业务场景中只能存在一个的实例,比如弹窗,购物车 // 定义单例函数/类 function SingleShopCart() { let instanc 阅读全文
posted @ 2020-10-27 15:42 荣光无限 阅读(165) 评论(0) 推荐(0) 编辑
摘要: 代理模式 代理模式给某一个对象提供一个代理对象,并由代理对象控制对原对象的引用。通俗的来讲代理模式就是我们生活中常见的中介。 # 实现方法 定义一个委托者和一个代理,需要委托的事情在代理中完成 使用场景: 在某些情况下,一个客户类不想或者不能直接引用一个委托对象, 而代理类对象可以在客户类和委托对象 阅读全文
posted @ 2020-10-27 15:41 荣光无限 阅读(179) 评论(0) 推荐(0) 编辑
摘要: 发布订阅模式 on: 负责订阅事件, emit负责发布事件, eventMap: 事件名称和事件的映射 class EventEmitter { constructor() { // eventMap 用来存储事件和监听函数之间的关系 this.eventMap = {} } /** * # >>> 阅读全文
posted @ 2020-10-27 15:41 荣光无限 阅读(148) 评论(0) 推荐(0) 编辑
摘要: alias是一个目录别名的定义,root则是最上层目录的定义。 使用 root时,会到 root + location寻找资源 > '/': root则可有可无 使用 alias时, 会到 alias后定义的目录中寻找资源 > alias后面必须要用 '/' 结束,否则会找不到文件的 root lo 阅读全文
posted @ 2020-10-03 16:08 荣光无限 阅读(4608) 评论(0) 推荐(0) 编辑
摘要: 父组件传递自定义事件给子组件,子组件显示调用的两种方式 1.父组件使用 v-bind(:属性传递) 父组件 <child :mockParent="handleParentEvet" ></child> 子组件需接收props props:{ mockParent:{ type: Function 阅读全文
posted @ 2020-09-07 11:35 荣光无限 阅读(4019) 评论(0) 推荐(0) 编辑
摘要: $attrs 把父组件中非props属性绑定到内部组件 $listeners 把父组件中的DOM对象的原生事件绑定到内部组件 1.父组件传给自定义子组件的属性,如果没有prop接收,会自动设置到子组件内部的最外层标签上, 如果是 class 或者 style 的话,会合并最外层标签的 class 和 阅读全文
posted @ 2020-09-04 17:47 荣光无限 阅读(236) 评论(0) 推荐(0) 编辑
摘要: 样式动态绑定 Vue.js v-bind 在处理 class 和 style 时, 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组 script 部分如下 data: { isActive: true, isActive_1: false, hasError: true, isCe 阅读全文
posted @ 2020-09-01 13:53 荣光无限 阅读(825) 评论(0) 推荐(0) 编辑