菜鸟理解前端设计模式

91 阅读1分钟

1.单例模式。

场景:生成一个物件,没有就生成,有了就不生成。保证有且只有1个。

实例: 点击按钮 生成一个提示框。如果提示框已生成。点击按钮 就不再生成。

2.构造器模式。

场景:对象的各种方法

实例: (对象).keys()(对象).values()

3.建造者模式:

场景:一个方法内按步骤逐渐执行。

实例: vue 的 生命周期。会按照步骤去执行

4.代理模式

场景: 给一个数据找一个代替的数据。

实例:图片预加载。没有动态图片就使用静态图片代替动态图片。如默认头像。

5. 外观模式

场景: 根据不用的浏览器或手机,使用不同的方法达到指定的效果

实例: 如果是安卓手机用安卓手机方法的下载,否则用苹果手机方法的下载。

6.观察者模式

场景: 通常需要一个监听器。监听事件和值的变化。自动执行方法

实例: vue的双向数据绑定。不需要自己修改页面上的值。只需要修改data中的数据。就会自动渲染

7.策略模式

场景: 多种方案封装在一起

实例: 各种正则表达式封装在一起。如检查是否是手机号,是否是邮箱,是否是身份证等。

8.迭代器模式

场景: 数组的各种方法

实例: (数组).map () (数组).some () (数组).filter ()

9.责任链模式

场景:

实例:

10.工厂模式

场景:

实例:

11.命令模式

场景:

实例: