桥接模式的作用在于将实现部分和抽象部分分离开来, 以便两者可以独立的变化。在实现api的时候, 桥接模式特别有用。比如最开始的singleton的例子.

var singleton = function( fn ){
var result;
return function(){
return result || ( result = fn .apply( this, arguments ) );
}
}<span id="more-3614"></span>
var createMask = singleton( function(){
return document.body.appendChild( document.createElement('div') );
})

singleton是抽象部分, 而createMask是实现部分。 他们完全可以独自变化互不影响。 如果需要再写一个单例的createScript就一点也不费力.

var createScript = singleton( function(){
return document.body.appendChild( document.createElement('script') );
})

另外一个常见的例子就是forEach函数的实现, 用来迭代一个数组.

forEach = function( ary, fn ){
for ( var i = 0, l = ary.length; i < l; i++ ){
var c = ary[ i ];
if ( fn.call( c, i, c ) === false ){
return false;
}
}
}

可以看到, forEach函数并不关心fn里面的具体实现. fn里面的逻辑也不会被forEach函数的改写影响.

forEach( [1,2,3], function( i, n ){
alert ( n*2 )
} )
forEach( [1,2,3], function( i, n ){
alert ( n*3 )
} )

JS常用的设计模式(6)——桥接模式的更多相关文章

  1. JS常用的设计模式(17)—— 状态模式

    状态模式主要可以用于这种场景 1 一个对象的行为取决于它的状态 2 一个操作中含有庞大的条件分支语句 回想下街头霸王的游戏. 隆有走动,攻击,防御,跌倒,跳跃等等多种状态,而这些状态之间既有联系又互相 ...

  2. JS常用的设计模式(8)——访问者模式

    GOF官方定义: 访问者模式是表示一个作用于某个对象结构中的各元素的操作.它使可以在不改变各元素的类的前提下定义作用于这些元素的新操作.我们在使用一些操作对不同的 对象进行处理时,往往会根据不同的对象 ...

  3. JS常用的设计模式(14)—— 备忘录模式

    备忘录模式在js中经常用于数据缓存. 比如一个分页控件, 从服务器获得某一页的数据后可以存入缓存.以后再翻回这一页的时候,可以直接使用缓存里的数据而无需再次请求服务器. 实现比较简单,伪代码: var ...

  4. JS常用的设计模式(12)—— 迭代器模式

    迭代器模式提供一种方法顺序访问一个聚合对象中各个元素,而又不需要暴露该方法中的内部表示. js中我们经常会封装一个each函数用来实现迭代器. array的迭代器: forEach = functio ...

  5. JS常用的设计模式(13)——组合模式

    组合模式又叫部分-整体模式,它将所有对象组合成树形结构.使得用户只需要操作最上层的接口,就可以对所有成员做相同的操作. 一个再好不过的例子就是jquery对象,大家都知道1个jquery对象其实是一组 ...

  6. JS常用的设计模式(9)——策略模式

    策略模式的意义是定义一系列的算法,把它们一个个封装起来,并且使它们可相互替换.一个小例子就能让我们一目了然. 回忆下jquery里的animate方法. $( div ).animate( {&quo ...

  7. JS常用的设计模式(7)—— 外观模式

    外观模式(门面模式),是一种相对简单而又无处不在的模式.外观模式提供一个高层接口,这个接口使得客户端或子系统更加方便调用.用一段再简单不过的代码来表示 var getName = function() ...

  8. JS常用的设计模式(5)——代理模式

    代理模式的定义是把对一个对象的访问, 交给另一个代理对象来操作. 举一个例子, 我在追一个MM想给她送一束花,但是我因为我性格比较腼腆,所以我托付了MM的一个好朋友来送. 这个例子不是非常好, 至少我 ...

  9. 乐在其中设计模式(C#) - 桥接模式(Bridge Pattern)

    原文:乐在其中设计模式(C#) - 桥接模式(Bridge Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 桥接模式(Bridge Pattern) 作者:webabcd 介绍 ...

随机推荐

  1. go语言 defer 你不知道的秘密!

    go 语言的defer功能强大,对于资源管理非常方便,但是如果没用好,也会有陷阱哦.我们先来看几个例子. 例一: defer 是先进后出 这个很自然,后面的语句会依赖前面的资源,因此如果先前面的资源先 ...

  2. openfiler的介绍与使用

    一. Openfiler简介 Openfiler 能把标准x86/64架构的系统变成一个强大的NAS.SAN存储和IP存储网关,为管理员提供一个强大的管理平台,并能能应付未来的存储需求.依赖如VMwa ...

  3. CKEditor富⽂本编辑器

    在运营后台,运营⼈员需要录⼊商品并编辑商品的详情信息,⽽商品的详情信息不是普通的⽂本, 可以是包含了HTML语法格式的字符串.为了快速简单的让⽤户能够在⻚⾯中编辑带格式的⽂本,我们引⼊富⽂本编辑器.富 ...

  4. leecode刷题(6)-- 两个数组的交集II

    leecode刷题(6)-- 两个数组的交集II 两个数组的交集II 描述: 给定两个数组,编写一个函数来计算它们的交集. 示例: 输入: nums1 = [1,2,2,1], nums2 = [2, ...

  5. vmware vSphere虚拟网络之标准交换机(二)

    一.标准交换机的特点: 1)只能用于物理主机 2)其他主机不能共享同一个虚拟交换机 3)不具备任何灵活性 4)每台ESXi主机都要配置一遍 二.网络图: 三.创建标准交换机: 登录web vCente ...

  6. centos安装mysql57

    下载源安装文件 https://dev.mysql.com/downloads/repo/yum/ wget http://repo.mysql.com//mysql57-community-rele ...

  7. 搭建vue环境网站

    https://cli.vuejs.org/zh/guide/installation.html 安装成功vue脚手架 安装成功3.4版本 vue + iview项目构建 https://blog.c ...

  8. 消息队列 简单demo

    可以使用Windows自带计划任务执行Receive操作. 控制面板=>管理工具 计划任务 =>创建计划任务 step : http://www.2cto.com/kf/201402/27 ...

  9. Vue 使用 axios post请求后台数据时 404

    今天遇到Vue 使用 axios post请求后台数据时 404 使用postman 就能获取到 网上找了大半天 终于找到了解决方法,传送门:https://www.jianshu.com/p/b10 ...

  10. shim和polyfill,前端术语

    最近项目临近发布,JS的bug大都修改完毕,终于进入了我在这家公司实习+入职为数不多的摸鱼时刻.(想想真是有点感人啊) 因为项目要兼容IE8,所以我们的代码里常常要用到 shim 以支持ES5 的相关 ...