EmotionComputer

最近在看《JavaScript设计模式与开发实践》这本书，受益匪浅，小记录一下书中的各个demo，加深理解。将不变的部分与变化的部分隔开是每个设计模式的主题，策略模式也不例外，策略模式的目的就是将算法的使用与算法的实现分离开来。策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。一个基于策略模式的程序至少由两部分组成。第一部分是一组策略类，策略类封装了具体的...

一. 中介者模式介绍：多个对象和多个对象如果相互联系则显得很乱，而如果中间添加一个中介者，则会使结构更加清晰。示例：代码实现：设计原则验证：将各个关联对象通过中介者隔离符合开放封闭原则二. 访问者模式将数据操作和和数据结构进行分离使用场景不多三. 解释器模式描述语言语法如何定义，如何解释和编译用于专业场景...

一. 职责链模式介绍：一步操作可能分为多个职责角色来完成把这些角色都分开，然后用一个链串起来将发起者和各个处理者进行分离场景：职责链模式和业务结合较多，JS中能联想到链式操作jQuery中的链式操作，Promise的then的链式操作代码实现：二. 命令模式概念：执行命令时，发布者和执行者分开中间加入命令对象，作为中转站示例：发送者：将军命令对象：打...

一. 享元模式享：共享概念：共享内存(主要考虑内存，而非效率)相同的数据，共享使用示例：设计原则验证：将相同的部分抽象出来符合开放封闭原则二. 策略模式介绍：不同策略分开处理避免大量出现if…else… 或者switch…case…代码示例：如果用if…else…实现用策略模式实现：设计原则验证：不同策略，分开处理，而不是混合在一起符...

概念用于把抽象化和实现化解耦使得二者可以独立变化应用场景我现在有一个画图并且将画好的图涂上颜色的需求！如下图所示：没有将画图和填充颜色分离开，这样就不是桥接模式非桥接模式代码实现：上面那种做法如果再画新的图并且涂上颜色代码看起来就会很乱，所以下面改为桥接模式，即将画图和涂颜色分离开来。如下面示例：画图和填充颜色分离开，是桥接模式。桥接模式代码实现：设计原则验证：...

基于原有对象创建新对象，因为如果new的话开销太大，所以为了节省开销，采用原型模式。概念：clone自己，生成一个新对象Java默认有clone接口，不用自己实现JS中的原型模式应用Object.create()对比JS中的原型prototype...

在状态模式（State Pattern）中，类的行为是基于它的状态改变的。这种类型的设计模式属于行为型模式。介绍：一个对象有状态变化每次状态变化都会触发一个逻辑不能总是用if…else来控制示例：交通信号灯不同颜色的变化导致的过马路的行为UML类图：场景：有限状态机写一个简单的Promise因为Promise其实就有三种状态：pending、resolve、rej...

迭代器模式：假如我们有很多有序的集合，每种集合可能有多种遍历的方式，而我们想提供一个统一的接口，使用者无需知道内部的结构，那么就可以用迭代器模式。UML类图：把我们的数组、对象等这些不同的有序的集合放入Container中，然后返回一个迭代器。代码实现：class Iterator { constructor(conatiner) { this.list = ...

观察者模式是前端应用最多的一种设计模式介绍：当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知它的依赖对象。观察者模式属于行为型模式。发布&订阅UML类图：观察者模式的实现思路：把多个观察者放入主题中，由主题来控制消息的变化进行消息的分发。代码实现：// 主题，接收状态变化，触发每个观察者clas......

介绍：为子系统中的一组接口提供了一个高层接口使用者使用这个高层接口示例：UML类图：代码实现：// 外观模式function bindEvent(elem, type, selector, fn) { if (fn == null) { fn = selector selector = null } //****}//调用bindEvent(elem,...

介绍：使用者无权访问目标对象中间加代理，通过代理做授权和控制关系如下图所示：示例：科学上网明星经纪人场景：网页事件代理jQuery $.proxy代码中常用场景：ES6 Proxy// 明星let star = { name: '张XX', age: 25, phone: '13910733521'}// 经纪人let ag...

自己在写框架，写库的时候最可能用到装饰器模式了，因为里面设计的API很可能需要修改，但是之前的也不能废弃掉，因为已经有客户在用了，所以此时应该应用装饰器模式了！！！介绍：为类或者函数添加新的功能不改变其原有的结构和功能与适配器模式对比：装饰器模式是新的接口和老的接口都能用，而适配器模式是老的接口不能用了。示例：...

介绍：旧接口格式和使用者不兼容中间加一个适配转换接口将旧接口与使用者进行分离示例：香港的插头和大陆的插头是不一样的，你在香港拿着大陆的充电器是充不了电的，所以你需要用一个转换器来做适配。UML类图描述适配器模式Adaptee是老的接口Target是适配器Client是客户端代码实现：// 适配器模式class Adaptee { specificReques...

引入：你去肯德基买汉堡，直接点餐、取餐，而不是进入肯德基的厨房自己去做汉堡，做汉堡的工作由肯德基店来实现，即肯德基店要封装做汉堡的工作，做好直接给消费者。肯德基店就充当了工厂，他去生产汉堡，也就是new汉堡的操作由他来实现工厂模式介绍：将new 操作单独封装遇到new时，就要考虑是否该使用工厂模式使用场景：jQuery里的$(‘div’)中的$()就是一个工厂，因为用户不能每次...

介绍：一个类只有一个实例系统中被唯一使用应用场景：jQuery中只有一个’$’if(Window.jQuery != null) { return Window.jQuery}else { //初始化}登录框购物车连接数据库的连接操作(这样可以提高效率)JavaScript中使用单例模式的缺点没有强制要求不能使用new 类的形式(实际上只能通过类.静态函数...

第一次尝试这种风格写代码，感觉蛮不错的这种代码的设计风格实现起来就很舒服第一题实现：class Car { constructor(number, name) { this.number = number this.name = name }}class Kuaiche extends Car { constructor(number, name) { supe...