开发中,我们或多或少地接触了设计模式,但是很多时候不知道自己使用了哪种设计模式或者说该使用何种设计模式。本文意在梳理常见设计模式的特点,从而对它们有比较清晰的认知。
JavaScript 中常见设计模式
单例模式 策略模式 代理模式 迭代器模式 发布-订阅模式 命令模式 组合模式 模板方法模式 享元模式 职责链模式 中介者模式 装饰者模式 状态模式 适配者模式 观察者模式
各设计模式关键词 看完了上述设计模式后,把它们的关键词特点罗列出来,以后提到某种设计模式,进而联想相应的关键词和例子,从而心中有数。
设计模式 | 特点 | 案例 |
---|---|---|
单例模式 | 一个类只能构造出唯一实例 | 创建菜单对象 |
策略模式 | 根据不同参数可以命中不同的策略 | 动画库里的算法函数 |
代理模式 | 代理对象和本体对象具有一致的接口 | 图片预加载 |
迭代器模式 | 能获取聚合对象的顺序和元素 | each([1, 2, 3], cb) |
发布-订阅模式 | PubSub | 瀑布流库 |
命令模式 | 不同对象间约定好相应的接口 | 按钮和命令的分离 |
组合模式 | 组合模式在对象间形成一致对待的树形结构 | 扫描文件夹 |
模板方法模式 | 父类中定好执行顺序 | 咖啡和茶 |
享元模式 | 减少创建实例的个数 | 男女模具试装 |
职责链模式 | 通过请求第一个条件,会持续执行后续的条件,直到返回结果为止 | if else 优化 |
中介者模式 | 对象和对象之间借助第三方中介者进行通信 | 测试结束告知结果 |
装饰者模式 | 动态地给函数赋能 | 天冷了穿衣服,热了脱衣服 |
状态模式 | 每个状态建立一个类,状态改变会产生不同行为 | 电灯换挡 |
适配者模式 | 一种数据结构改成另一种数据结构 | 枚举值接口变更 |
观察者模式 | 当观察对象发生变化时自动调用相关函数 | vue 双向绑定 |
这里推荐一下我的前端学习交流群:784783012,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入学习。