开发者社区> 我是小助手> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JavaScript常用设计模式

简介: 设计模式是一种在长时间的经验与错误中总结出来可服用的解决方案。
+关注继续查看

设计模式

设计模式是一种在长时间的经验与错误中总结出来可服用的解决方案。

设计模式主要分为3类:

创建型设计模式:专注于处理对象的创建

Constructor构造器模式,Factory工厂模式,Singleton单例模式,builder生成器模式

结构型设计模式:对象间组合,建立对象之间的关系

Decorator装饰者模式,Facade外观模式,Flyweight享元模式,Adapter适配器模式,Proxy代理模式

行为设计模式:简化和改善对象间的通信

Mediator中介者模式,Observer观察者模式

常用的设计模式

1. 观察者模式

一个目标对象维持着一系列依赖于它的对象,将有关状态的任何变更自动通知观察者们。在观察者模式中,观察者需要直接订阅目标对象,观察者与目标对象之间有一定的依赖关系。 有4个重要的概念

  • 目标对象(被观察者):维护一组观察患者,提供管理观察者的方法。
  • 观察者: 提供一个更新接口,用于收到通知时,进行更新
  • 具体目标对象:代表具体的目标对象
  • 具体观察者:代表具体的观察者

// 目标对象
class Subject {
  constructor() {
    // 观察者列表
    this.observers = []
  }
  addObserver(observer) {
    this.observers.push(observer)
  }
  removeObserver() {
    this.observers.pop()
  }
  notify() {
    this.observers.forEach(observer => {
      observer.update()
    })
  }
}

// 观察者
class Observer {
  constructor() {
    // 使用时会被具体update方法覆盖
    this.update = function () {
        // ..
    }
  }
}
// 具体目标对象
class currentSubject extends Subject {
  constructor() {
    super()    
  }
  // 其他自定义方法
  dosomething() {
    console.log('currentSubject change')
    this.notify()
  }
}
// 具体观察者
class currentObserver extends Observer {
    constructor() {
        super()
    }
    // 重写update
    update() {
        console.log('change!')
    }
}
// 订阅
let curSubject = new currentSubject()
let curObserver = new currentObserver()
curSubject.addObserver(curObserver)
// 触发
curSubject.dosomething()
// currentSubject change

2.发布/订阅模式

发布订阅模式可以说是观察这模式的一种变体,一种实现。它使用一个主题/事件通道,介于发布者和订阅者之间,避免了发布者和订阅者之间的依赖关系。


class PubSub {
  constructor() {
// 主题/事件通道
    this.topics = {}
  }
  publish(topic, args) {
    if (!this.topics[topic]) {
      return
    }
    let subscribers = this.topics[topic]
    subscribers.forEach(subscriber => {
        subscriber.updata(args)
    })
  }
  subscribe(topic, subscriber ) {
    if (!this.topics[topic]) {
      this.topics[topic] = []
    }
    this.topics[topic].push(subscriber )
  }
}

let pubsub = new PubSub()

pubsub.subscribe('one', subscriber )

pubsub.publish('one', 'some args')

3. 工厂模式

工厂函数提供一个通用的接口来创建对象,我们可以指定我们希望创建的对象类型,我们通知工厂函数需要什么类型的对象并提供对应的数据,返回对应的实例。


class Car {
  constructor(options) {
    this.doors = options.doors || 4;
    this.state = options.state || "brand new";
    this.color = options.color || "silver";
  }
}

class Truck {
  constructor(options) {
    this.state = options.state || "used";
    this.wheelSize = options.wheelSize || "large";
    this.color = options.color || "blue";
  }
}

function vehicleFactory (options) {
  if (options.type === 'car') {
    return new Car(options)  
  } else {
    return new Truck(options)
  }
}

何时使用工厂模式

  • 当我们的对象比较复杂的时候。
  • 当我们需要根据不同情况创建不同对象实例的时候。
  • 当我们需要创建许多相似对象的时候。

缺点

  • 使用不当会增加程序的复杂度

4. 抽象工厂模式

抽象工厂模式,将对象的实现细节抽离出来。适用于需要和多种对象一起工作的场景。


class Truck {
  constructor(options) {
    this.state = options.state || "used";
    this.wheelSize = options.wheelSize || "large";
    this.color = options.color || "blue";
  }
}

class Car {
  constructor(options) {
    this.doors = options.doors || 4;
    this.state = options.state || "brand new";
    this.color = options.color || "silver";
  }
}

class AbstractFactory {
  constructor() {
    this.types = {}
  }
  registerFactory(type, factory) {
    this.types[type] = factory
  }
  getInstance(type, args) {
    let factory = this.types[type]
    if (factory) {
      return new factory(args)
    }
  }
}

let abstractFactory = new AbortController()
abstractFactory.registerFactory('car', Car)
abstractFactory.registerFactory('truck', Truck)

abstractFactory.getInstance('car', options)
abstractFactory.getInstance('truck', options)

5. 单例模式

单例模式限制一个类只有一个实例化对象。


class Obj(data) {
  // ....
}
// 利用闭包实现单例模式,确保obj类只有一个实例
function singleton (data) {
  var instance;
  return function () {
    if (!instance) {
      instance = new Obj(data)
    }
    return instance
  }
}

6. 中介者模式

中介者模式就是提供一个中心点给系统不同组件之间进行通信,降低系统组件之间的耦合程度。

// 实现与发布/订阅模式类似

观察者模式和发布订阅模式专注于维护目标对象和观察者之间的关系,当主题对象发送变化时,通知所有对改主题感兴趣的观察者。而中介者模式的话,专注于限制对象的通信必须通过中介者来通信。两者都提倡松耦合。

7. 装饰者模式

装饰者模式,通过一个装饰类对现有动态添加行为,以及对原有行为进行装饰。


  // o为已有对象
    var M20 = function(o){    // 这里定义一个装饰类
        var str = '20多岁的时候,';
        // o是传入的对象,调用传入对象的方法,加以装饰
        this.eat = function(){
            return str + o.eat()+",肥得很!";
        };
        this.drink = function(){
            return str + o.drink()+",就是个水桶!";
        };
        this.coding = function(){
            return str + o.coding()+",代码又写得撇!";
        };
    }
    alert(new M20(david).eat());    // 20多岁的时候,大卫是个大胖子,一天只晓得吃,肥得很!
    alert(new M20(david).drink());    // 20多岁的时候,大卫除了吃就是喝,就是个水桶!
    alert(new M20(david).coding());    // 20多岁的时候,写代码吧,大卫,代码又写得撇!

8. 适配器模式

使用一个新的接口对现有的接口进行包装,处理数据与接口的不匹配。


function api (x1, x2, x3) {
  console.log(x1 + x2 + x3);  // 用console.log来模拟接口的相关操作
}

var data = {
  a: '我',
  b: '很',
  c: '帅'
}

function adapterApi (o) {
  // 通过适配器函数来调用目的api
  api(o.a, o.b, o.c);
} 

adapterApi(data);
// 我很帅


原文发布时间为:2018年07月02日
原文作者:掘金
本文来源:掘金 如需转载请联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《JavaScript设计模式》——2.2 包装明星——封装
闭包是有权访问另外一个函数作用域中变量的函数,即在一个函数内部创建另外一个函数。我们将这个闭包作为创建对象的构造函数,这样它既是闭包又是可实例对象的函数,即可访问到类函数作用域中的变量,如bookNum这个变量,此时这个变量叫静态私有变量,并且checkBook()可称之为静态私有方法。
1200 0
javascript设计模式--封装和信息隐藏(下)
  今天讲解的内容是高级模式(Advanced Patterns),如何实现静态方法和属性,常量还有其他一些知识点。   1.静态方法和属性   其实要实现这一功能还是要借助于闭包。在上一讲中的第三种实现方式也使用了闭包,但通过那种实现,内部属性和方法是实例级别的。
798 0
javascript设计模式--封装和信息隐藏(上)
  今天博文关注的是javascript中的封装,文章内容来自《pro javascript design patterns》(有兴趣的朋友可以直接去下)和自己对这一问题的理解。   本文分上下两部分,上部讲基本模式(basic patterns):完全暴露法,下划线标记法和使用闭包;下部讲高级模式(Advanced Patterns),如何实现静态方法和属性,常量还有其他一些知识点。
825 0
Python全栈 Web(JavaScript DOM树、DOM对象、BOM对象)
外部对象: BOM和DOM BOM: Browser Object Module 浏览器对象模型 将浏览器比喻成一个对象-window (网页初始化自动创建) 可以通过window对象操作浏览器 DOM: Document Object .
2086 0
+关注
我是小助手
云栖直播
383
文章
6
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载