当前位置:首页 > 前端 > JavaScript > 正文内容

JavaScript 中常见设计模式整理

放牧的风2年前 (2020-05-11)JavaScript404

开发中,我们或多或少地接触了设计模式,但是很多时候不知道自己使用了哪种设计模式或者说该使用何种设计模式。本文意在梳理常见设计模式的特点,从而对它们有比较清晰的认知。

user-gold-cdn.xitu.io_2018_5_18_16371bb21ea43d80_imageView2_0_w_1280_h_960_format_webp_ignore-error_1.png

JavaScript 中常见设计模式

各设计模式关键词

看完了上述设计模式后,把它们的关键词特点罗列出来,以后提到某种设计模式,进而联想相应的关键词和例子,从而心中有数。

设计模式特点案例
单例模式一个类只能构造出唯一实例创建菜单对象
策略模式根据不同参数可以命中不同的策略动画库里的算法函数
代理模式代理对象和本体对象具有一致的接口图片预加载
迭代器模式能获取聚合对象的顺序和元素each([1, 2, 3], cb)
发布-订阅模式PubSub瀑布流库
命令模式不同对象间约定好相应的接口按钮和命令的分离
组合模式组合模式在对象间形成一致对待的树形结构扫描文件夹
模板方法模式父类中定好执行顺序咖啡和茶
享元模式减少创建实例的个数男女模具试装
职责链模式通过请求第一个条件,会持续执行后续的条件,直到返回结果为止if else 优化
中介者模式对象和对象之间借助第三方中介者进行通信测试结束告知结果
装饰者模式动态地给函数赋能天冷了穿衣服,热了脱衣服
状态模式每个状态建立一个类,状态改变会产生不同行为电灯换挡
适配者模式一种数据结构改成另一种数据结构枚举值接口变更
观察者模式当观察对象发生变化时自动调用相关函数vue 双向绑定

参考文献

*《JavaScript设计模式与开发实践》


扫描二维码推送至手机访问。

版权声明:本文由放牧的风发布,如需转载请注明出处。

本文链接:https://grazingwind.com/post/60.html

分享给朋友:

相关文章

js中push(),pop(),unshift(),shift()的用法小结

1、push()、pop()和unshift()、shift()这两组同为对数组的操作,并且会改变数组的本身的长度及内容。不同的是 push()、pop() 是从数组的尾部进行增减,unshift()、shift() 是从数组的头...

ES6必知必会 —— Module

1. ES6在语言标准的层面上,实现了模块功能,成为浏览器和服务器通用的模块解决方案,完全可以取代 CommonJS 和 AMD 规范,基本特点如下:每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存...

JavaScript深入系列目录

JavaScript深入之从原型到原型链JavaScript深入之词法作用域和动态作用域JavaScript深入之执行上下文栈JavaScript深入之变量对象JavaScript深入之作用域链JavaScript深入之从ECMAScrip...

JavaScript ES6 系列目录

ES6 系列之 let 和 constES6 系列之模板字符串ES6 系列之箭头函数ES6 系列之模拟实现 Symbol 类型ES6 系列之迭代器与 for ofES6 系列之模拟实现一个 Set 数据结构ES6 系列之 WeakMapES...

二叉树及其遍历方法:JavaScript实践

二叉树及其遍历方法:JavaScript实践

二叉树常见的数组,栈,列表都是线性结构常见的树型结构有:文件夹目录,dom结构,路由的配置...二叉树二叉树是每个结点最多有两个子树的树形结构,每个结点的度最多是2。左边的称为 左子树 , 右边的称为 右子树 , 左子树 , 右子树 是有顺...

这些原生DOM操作你还记住多少😨

这些原生DOM操作你还记住多少😨

前言 最近在二次封装一个公司内部的UI组件库,其中一个模块就是给 element-plus 的 message 进行扩展,大量运用到了原生DOM操作,操作DOM最方便...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。