上一回,聊了代理模式,虚拟代理,图片懒加载,介一回,也比较容易,适配器模式(Adapter),用一个新的接口对现有类的接口进行包装,处理类与API的不匹配。使用这种模式的对象又叫作包装器(wrapper)。先看个简单的例子,先理解再深刻,走你:javascript
先定义一个接口(接收3个参数),再定义一个对象,如何衔接两者呢,以下:html
// 定义一个接口方法,传3个参数 function interfaceMethod(a1,a2,a3){ // 随便写个弹出框 alert(a1+a2+a3+''); } // 定义一个对象 var o = { s1:'飞狐就是帅', s2:',撸壕,', s3:'大卫' } // 适配器函数,把传递的对象参数转换为interfaceMethod函数须要的形式 function adapter(o){ interfaceMethod(o.s1,o.s2,o.s3); } adapter(o); //飞狐就是帅,撸壕,大卫
这是模拟JS设计模式书上例子,适配器的做用主要是对现有的接口进行包装,从而实现现有的接口和不兼容的类进行匹配。
这里不少盆友会疑惑适配器模式与门面模式的区别:
1,门面模式是为了简化一个接口,并不提供额外的选择;
2,适配器则要把一个接口转换为另外一个接口,并不会滤除某些能力,也不会简化接口;
网上最多的一个例子,就是适配不一样的库,以下:java
Prototype库的$函数到YUI的get方法的转换,网上最多的一个适配器模式的讲解,看例子:web
<div id="fox1">飞狐</div><br/> <div id="fox2">帅狐</div><br/> <div id="fox3">主要看气质</div>
// 模拟Prototype,根据id获取DOM元素,不须要传递任何的形参,一个id写一个参数,多个id多个参数 function $(){ // 定义一个结果数组 var elements = []; // 遍历传入参数 for(var i=0;i<arguments.length;i++){ var element = arguments[i]; // 判断是否为字符串 if(typeof element =='string'){ element = document.getElementById(element); } // 判断长度,若是是一个,则返回一个 if(arguments.length==1) return element; // 不然加入数组 elements.push(element); } // 返回数组 return elements; } // 模拟雅虎 var YAHOO = {}; // YUI中get只接受一个参数,字符串或数组 YAHOO.get = function(el){ // 判断是否为字符串 if(typeof el == 'string'){ return document.getElementById(el); }; // 判断是否为数组 if(el instanceof Array){ var elements = [] ; for(var i=0;i<el.length;i++){ elements[elements.length] = YAHOO.get(el[i]); } return elements; } // 若是都不是,直接返回 if(el){ return el; } // 不然返回null return null; } // YUI适配器 YAHOO.get = YUIToPrototypeAdapter; // 适配器函数 function YUIToPrototypeAdapter(){ // 对于YUI开发人员来讲 永远传递一个参数 if(arguments.length == 1){ var el = arguments[0]; // 这里判断是否为数组,若是是直接返回,不然包装成数组返回,如:"a",包装后["a"] return $.apply(window,el instanceof Array?el:[el]); } else { // 若是是多个参数的状况,这里只能用apply,不能用call return $.apply(window,arguments); } } // 测试数组的状况 var arr = YAHOO.get(['fox1','fox2','fox3']); alert(arr); // 测试多个参数的状况 var arr = YAHOO.get('fox1','fox2','fox3'); alert(arr);
这个例子在网上太多了,随便找了一个来改,目的在于模拟不一样库直接的匹配,灵活的转换,解决与现有API提供的接口不兼容的冲突。设计模式
装逼时刻了,老片新看,推荐《重庆森林》,文艺范儿的调调~~数组
这一回聊适配器模式,就俩例子,内容很少,主要是理解。
下面的内容来一个图片预加载,跟上一回的懒加载凑一对兄弟篇。app
图片预加载是web开发中一种应用至关普遍的技术,好比图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,先让图片下载到本地,再继续执行后续的操做:函数
//要加载的图片地址,这里能够随便在网上搜点儿图片测试 var imgs=[ "xxx.jpg", "yyy.jpg", "zzz.jpg" ]; var preload=function(imgs,callback){ // 判断传入的imgs是否为数组(typeof操做符检测数组的时候也是object),若不是数组则用[imgs]转为数组 var imgs=(typeof imgs!="object")? [imgs] : imgs; // 定义一个图片数组 var img = []; for(var i=0,len=imgs.length;i<len;i++){ // 为每个图片对象赋值图片地址 img[i] = new Image(); img[i].src = imgs[i]; } // 三目运算没什么好说的,len-1表示最后一个图片对象,加载完成执行回调函数,apply还记得吧,使做用域指向img img[len-1].onload = callback?callback.apply(img):null; } // 测试 window.onload=function(){ preload(imgs,function(){ var _self = this; _self.forEach(function(item){ alert(item.src); }) }); }
这里只是简单的模拟,代码量少,应该能够很容易看懂,预加载减去了等待时间提升用户体验,不少web应用中普遍运用。测试
这一回,主要聊了适配器模式,图片预加载,主要仍是理解~~
下一回,聊一聊桥接模式,顺便作一作计算题。this
客观看完点个赞,推荐推荐呗,嘿嘿~~
注:此系飞狐原创,转载请注明出处