听飞狐聊JavaScript设计模式系列10

  • A+
所属分类:JavaScript

本回内容介绍

上一回,聊了代理模式,虚拟代理,图片懒加载,介一回,也比较容易,适配器模式(Adapter),用一个新的接口对现有类的接口进行包装,处理类与API的不匹配。使用这种模式的对象又叫做包装器(wrapper)。先看个简单的例子,先理解再深入,走你:

1.适配器模式

先定义一个接口(接收3个参数),再定义一个对象,如何衔接二者呢,如下:

这是模拟JS设计模式书上例子,适配器的作用主要是对现有的接口进行包装,从而实现现有的接口和不兼容的类进行匹配。

这里很多盆友会疑惑适配器模式与门面模式的区别:

1,门面模式是为了简化一个接口,并不提供额外的选择;

2,适配器则要把一个接口转换为另一个接口,并不会滤除某些能力,也不会简化接口;
网上最多的一个例子,就是适配不同的库,如下:

2. 适配不同库

Prototype库的$函数到YUI的get方法的转换,网上最多的一个适配器模式的讲解,看例子:

这个例子在网上太多了,随便找了一个来改,目的在于模拟不同库直接的匹配,灵活的转换,解决与现有API提供的接口不兼容的冲突。听飞狐聊JavaScript设计模式系列10

装逼时刻了,老片新看,推荐《重庆森林》,文艺范儿的调调~~

JS图片预加载

图片预加载是web开发中一种应用相当广泛的技术,比如图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,先让图片下载到本地,再继续执行后续的操作:

这里只是简单的模拟,代码量少,应该可以很容易看懂,预加载减去了等待时间提高用户体验,很多web应用中广泛运用。

客官看完点个赞,推荐推荐呗,嘿嘿~~

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: