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

yexiaobai 发布于2019-08-19 17:12 / 1452人阅读

摘要：本回内容介绍上一回，聊了代理模式，虚拟代理，图片懒加载，介一回，也比较容易，适配器模式，用一个新的接口对现有类的接口进行包装，处理类与的不匹配。这一回，主要聊了适配器模式，图片预加载，主要还是理解下一回，聊一聊桥接模式，顺便做一做计算题。

本回内容介绍

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

1.适配器模式

先定义一个接口（接收3个参数），再定义一个对象，如何衔接二者呢，如下：

// 定义一个接口方法，传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，适配器则要把一个接口转换为另一个接口，并不会滤除某些能力，也不会简化接口；
网上最多的一个例子，就是适配不同的库，如下：

2. 适配不同库

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

飞狐


帅狐

    
主要看气质

// 模拟Prototype，根据id获取DOM元素，不需要传递任何的形参，一个id写一个参数，多个id多个参数
function $(){
    // 定义一个结果数组
    var elements = [];
    // 遍历传入参数
    for(var i=0;i
这个例子在网上太多了，随便找了一个来改，目的在于模拟不同库直接的匹配，灵活的转换，解决与现有API提供的接口不兼容的冲突。

装逼时刻了，老片新看，推荐《重庆森林》，文艺范儿的调调~~
这一回聊适配器模式，就俩例子，内容不多，主要是理解。
下面的内容来一个图片预加载，跟上一回的懒加载凑一对兄弟篇。
JS图片预加载
图片预加载是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
这里只是简单的模拟，代码量少，应该可以很容易看懂，预加载减去了等待时间提高用户体验，很多web应用中广泛运用。
这一回，主要聊了适配器模式，图片预加载，主要还是理解~~
下一回，聊一聊桥接模式，顺便做一做计算题。
客观看完点个赞，推荐推荐呗，嘿嘿~~

注：此系飞狐原创，转载请注明出处

服务器托管专线服务 javascript专题系列 javascript深入系列飞狐 ie10兼容模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78290.html

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

本回内容介绍上一回聊到JS中模拟接口，装饰者模式，掺元类，分析了backbone的继承源码，感觉还好吧！介一回，偶们来聊一下在JS单例模式(singleton)，单例模式其实运用很广泛，比如：jquery，AngularJS，underscore吖虾米的都是单例模式，来吧，直接开始咯： 1. 单例模式保证一个类只有一个实例，从全局命名空间里提供一个唯一的访问点来访问该对象。其实之前写过的对象...

hiYoHoo 2019-08-21 10:45 评论0 收藏0
听飞狐聊JavaScript设计模式系列02

摘要：本回内容介绍上一回聊到数据类型，简单的过了一遍，包括个数组新特性等，这一回来聊聊对象，结合数组来实战一些例子，在做题中成长，记忆会更深刻，来吧，开始咯创建实例的方式有两种使用操作符后跟构造函数飞狐使用对象字面量表示法飞狐也可以飞狐这种写法与本回内容介绍上一回聊到JS数据类型，简单的过了一遍，包括9个数组新特性等，这一回来聊聊Object对象，结合数组来实战一些例子，在做题中成长，记...

tangr206 2019-08-21 10:44 评论0 收藏0
听飞狐聊JavaScript设计模式系列11

摘要：桥接模式之特权函数特权函数，用一些具有特权的方法作为桥梁以便访问私有空间，可以回忆一下之前的系列。连续自然数分组，计算最多组的个数将至这个连续自然数分成组使每组相加的值相等。个数组中数字最多的一组有个此时的和为。本回内容介绍上一回，聊了适配器模式，图片预加载，介一回，聊桥接模式（Bridge），跟之前一样，难度比较小，桥接模式将抽象部分与它的实现部分分离，通过桥接模式联系彼此，同时...

wanglu1209 2019-08-19 17:12 评论0 收藏0
听飞狐聊JavaScript设计模式系列14

摘要：本回内容介绍上一回，聊了聊状态模式，并介绍了一下介一回，聊链式编程，模拟一下，再模拟一下封装一个库。这一回，主要聊了链式调用，模拟了，尤其是，希望大家能喜欢这次代码分享。下一回，聊一聊的策略模式。本回内容介绍上一回，聊了聊状态模式（State），并介绍了一下vue.js；介一回，聊链式编程，模拟一下jQuery，再模拟一下underscore.js,封装一个库。 1. 链式调用 (...

fox_soyoung 2019-08-19 17:20 评论0 收藏0
听飞狐聊JavaScript设计模式系列03

摘要：闭包与柯里化闭包有权访问另一个函数作用域中变量的函数。柯里化把接受多个参数的函数变换成接受一个单一参数最初函数的第一个参数的函数，并且返回接受余下的参数而且返回结果的新函数的技术。本回内容介绍上一回聊到JS的Object类型，简单模拟了一下Java的Map，介一讲，偶们来聊一下函数好唔好，介可系JS世界的一等公民哟。从函数开始，我们就将逐步过渡到设计模式，来吧，帅狐带你装逼带你飞：...

levy9527 2019-08-21 10:44 评论0 收藏0