前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Javascript 设计模式

Javascript 设计模式

原创
作者头像
愤怒的小鸟
修改2020-12-02 11:00:30
2950
修改2020-12-02 11:00:30
举报
文章被收录于专栏:web share

1. 工厂模式

1)概念

  • 将new操作单独封装
  • 遇到new时,就要考虑是否该使用工厂模式

2)实例

2. 单例模式

1)概念

  • 系统中被唯一使用
  • 一个类只有一个实例(内部实例一次)
  • 需要private类型的变量和方法

2)实例

代码语言:javascript
复制
class SingleObject {
    login() {
        console.log('login...')
    }
}

SingleObject.getInstance = (function() {
    let instance
    return function() {
        if(!instance) {
            instance = new SingleObject()
        }
        return instance
    }
})()

3. 适配器模式

1)概念

  • 旧接口格式和使用者不兼容
  • 一个类只有一个实例(内部实例一次)
  • 中间加一个适配转换器

2)实例

4. 装饰器模式

1)概念

  • 为对象添加新功能
  • 不改变其原有的结构和功能
  • 需要private类型的变量和方法

2)实例

5. 代理模式

1)概念

  • 使用者无权访问目标对象
  • 中间加代理,通过代理做授权和控制

2)实例

代码语言:javascript
复制
class ReadImg {
    constructor(fileName) {
        this.fileName = fileName
        this.loadFromDisk()
    }
    
    display() {
        console.log('display...' + this.fileName)
    }
    
    loadFromDisk() {
        console.log('loading...' + this.fileName)
    }
}

class ProxyImg {
    constructor(fileName) {
        this.realImg = new ReadImg(fileName)
    }
    
    display() {
        this.realImg.display()
    }
}

6. 外观模式

1)概念

  • 为系统中的一组接口提供一个高层接口
  • 使用者使用这个高层接口

2)实例

7. 观察者模式

1)概念

  • 发布、订阅
  • 一对多

2)实例

8. 迭代器模式

1)概念

  • 顺序访问一个集合
  • 使用者无需知道集合的内部结构(封装)

2)实例

9. 状态模式

1)概念

  • 一个对象有状态变化
  • 每次状态变化都会触发一个逻辑
  • 不能总是if...else来控制

2)实例

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
作者已关闭评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 工厂模式
  • 2. 单例模式
  • 3. 适配器模式
  • 4. 装饰器模式
  • 5. 代理模式
  • 6. 外观模式
  • 7. 观察者模式
  • 8. 迭代器模式
  • 9. 状态模式
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档