回调模式
上一篇,对JavaScript函数进行了大体的介绍,这一篇对一些在工作中经常遇到的情况进行扩展。
在工作中,我们经常遇到很多需求,比如现在有一个需求:
一栋10层的大楼,当我们在坐电梯时,电梯每上一层,每层的电梯显示屏上即时显示电梯当前所在的楼层。
这样我们可能不到1s,就想到了解决方案,只要电梯每上一层,把每一层的电梯显示屏数字 +1 ,代码核心如下:
```javascript function processArrayA(nums, scalar) { var arr = []; nums.forEach(function(value) { arr.push(value + scalar); }); return arr; } var numsA = [1, 2, 3, 4, 5]; console.log(processArrayA(numsA, 1)); //[2,3,4,5,6] ```
每当电梯升一层,我们只要调用processArrayA()方法就可以完成需求,但是假如后续又加了需求(PM一般都这样,呵呵),希望我们在电梯下降的时候也 -1,这样也没事,我们马上写出了代码:
```javascript function processArrayB(nums, scalar) { var arr = []; nums.forEach(function(value) { arr.push(value - scalar); }); return arr; } var numsA = [1, 2, 3, 4, 5]; console.log(processArrayB(numsA, 1)); //[0,1,2,3,4] ```
额,当我们迅速解决了需求后,该死的PM又来了(悲催),说这栋楼希望显示2倍层数(奇葩有木有。。),作为技术的我们还得做。。。额,于是我们又给出了代码:
```javascript function processArrayC(nums, scalar) { var arr = []; nums.forEach(function(value) { arr.push(value * scalar); }); return arr; } var numsA = [1, 2, 3, 4, 5]; console.log(processArrayC(numsA, 2)); //[2,4,6,8,10] ```
额,到这时候,我们也知道PM的需求是无止境的(谁知道脑残的PM再能想出什么奇葩来),而作为工程师的我们也开始再思考如何能一劳永逸了(懒程序才是好程序),额,这时我们的回调模式就派上用场了,我们发现前面三段代码示例除了forEach里面的逻辑有变化,其他都是没有变化的,我们要是把这段代码逻辑隔离出来,不就OK了。代码如下:
```javascript //回调模式 function processArrayB(nums, scalar, callback) { var arr = []; nums.forEach(function(value) { arr.push(callback(value, scalar)); }); return arr; } function add(value, scalar) { return value + scalar; } function subtract(value, scalar) { return value - scalar; } function ride(value,scalar){ return value * scalar; } var numsB = [1, 2, 3, 4, 5]; console.log(processArrayB(numsB, 2, add)); //[3,4,5,6,7] console.log(processArrayB(numsB, 5, subtract));//[-4,-3,-2,-1,0] console.log(processArrayB(numsB, 2, ride));//[2,4,6,8,10] ```
这样我们顺利的把add,ride。。方法独立出来,作为callback的形式,让处理函数去调用,而每次增加需求,我们只需要简单的添加callback函数就OK了(简单情况下),相比这个简单的需求,有时候我们可能会遇到复杂N倍的代码逻辑,而这时候回调模式就显得格外重要。
回调模式的用法很常见,比如我们addEventListener的时候里面的callback,而在一些常见的库中就应用的更加广泛了,例如Jq的“钩子” ,这样的好处就是我们在coding的过程中,只需要关注核心代码的实现,而不必考虑到每一种业务逻辑(可以通过callback的方式),这样会让我们更方便的扩展,构建,自定义自己的组件。
暴露接口
在JavaScript中,我们花了很长时间写好的组件,我们不希望他被别人随意改动,但是如果完全封闭,那么就失去了组件的封装性,那组件也就没有丝毫意义可言了。但是如果我们整个的暴露所有代码实现,那么可能导致很多超出我们预料的问题,所以我们可以仿照Java的模式来做,暴露部分接口,这样不仅保证了组件的稳定,也可以达到封装的目的。就拿我大学期间的做的一个图书管理系统代码:
```javascript //书籍分类 GLOBAL.comm.comnav=(function(){ var bindNav=function(navList){ $.each(navList,function(key,val){ $("#"+val.split("-")[0]+">span").click(function(){ $(this).siblings().each(function(){ $(this).find(".active").hide().siblings().find("[_tag="+$(this).attr("_tag")+"]").removeClass("red"); }); $(this).find(".active").show().siblings().find("[_tag="+$(this).attr("_tag")+"]").addClass("red"); showTag([val.split("-")[1],val.split("-")[2]],$(this).attr("_tag")); }); }); }; var processNav=function(navId,commId,listId){ return navId + "-" + commId + "-" +listId; }; var showTag=function(tagList,tagName){ $.each(tagList,function(index){ $("#"+tagList[index]).find("[_tag="+tagName+"]").show().siblings().hide(); }); }; return {init:bindNav, newInstantce:processNav } })(); ```
这是我当时基于JQ做的一个项目中部分代码(要喷,请轻点。。),在这段代码中我是基于return 来实现暴露接口,暴露了init和newInstantce,而其他方法对外是完全不可见的。而具体的调用代码如下:
```javascript //推荐类型切换 index.comNavChg = function(){ GLOBAL.comm.comnav.init([GLOBAL.comm.comnav.newInstantce("hottabs","recommends","hotlist")]); } ```
以上的调用代码只利用到了comnav中暴露的两个方法,而具体的代码实现对外是不可见的。以上代码由于我是包装了return的函数,所以他形成了一个闭包(通过闭包来访问内部数据),这也就变相的实现了private。
即时函数
在上面图书管理的实例代码中,大家可能注意到我所有的逻辑都是写在Global这个命名空间下,但是很多情况下,例如写JQ的插件的时候,我们并要保证他在别人引用时都能正常运行,所以我们就要考虑新的方法。即时函数时一个很好的解决方案,他一般用来解决只允许运行一次的情况,例如打开很多巨头网站在console上面显示招聘信息的代码,他并不和任何业务代码产生交集,也很好的防止了污染全局变量(因为他为里面的代码提供了一个作用域沙箱)。下面我们来看dnspod的效果:
![](https://images.cnblogs.com/cnblogs_com/ahjx777/544669/o_QQ%e6%88%aa%e5%9b%be20140122051744.png)
很酷吧,我们来看看它的具体代码实现:
```javascript (function(){ try{ if(window.console && window.console.log){ console.log(' Qv. ZBjIjv; ..,.. @yizero.mFLIEmQ0qFFzSuFFZZqFSl; yBzl;vvvczFIv;::,:,:::::::: @haohu. BZFCvvvc;:,::;;;;;;;:;:;;;; ;Zbu. 7BuNNv7;::;;;;:::,,,,,::::;; IBO. .D0zFv7;::;:,.:;v7jjVyCslv;:::;. .:jBF :BqVNvvv:::,;sCzZFuIysLsVzZZ0Fl;;:;;v;;,:0B bZVFlv7v,.vmOSBs ..;bB0z:,;;;;:.jB @kevensun.SBv BjQ: vEEq VBl,:;;;:.jB BFzFs;7vvZb sI 0b; ;bF B ,BI,:;;;:.BV BFVFvvvvvB. D. ;bCm: ;0Nb N; .B;:;;;;.lB bNzFvv7vlB. BZ q; EO8F R Bj #N.;;;;:;B 0ByF7vvv;bF BBBCb @Wwz 7qSBBD B;;;;,7B lRu7BNzV;vvvvBZ ;BBBBR ;B; vB bBBBB BE,:;;;,,BZ Eb:. ;BFzj;vvv;0EBBBBB;:D .#:RBBBBNRS,:;;;,:ZB mE.,,: ;REylvvvv;vLObBBbz NBBBBDC;.:::::;EB, B..,:::..SbFc;vvvv;:;vCENZOZNFZNSy0s;. ,,::;;IBB D8:.,:,, ;O#F;;;vvv;;;;v7ljjyjsv;,,,;;;;v;vsRBl ,vvvv; lDOl;vsu; :jbF7;;;;;vvvvvvvvvvvvvvvvv;v7V8BV ;bZsjsjzBl ;ySVlvEEc .BOBbZzlv;;;;;;;;;;;;;vvsjNEDbBl7suq;.,,,,.,B; ,IZBQc8EF0R @guohezou.08DRDQ#BsZ0 ...,:::::,.Ez BRV#OjzVFuDBbbbQENZZEZqSuLN8sqB.;;;,,,::::: DC .ZOBQSzIcv;RZ.vyIVCClvvyVzZBqB#jCuVBs,.,,,.vb, 7#;v;v;;;0s ;7qF:vvOQv, @arqiao. lq,;;;;;:EQ ;BEb R7;;,Ss ,:,, LBjuVSVCOB ,BEB; zBsyFzBy uBzVFzzNB ,BVmBbbBBc zBCuzuCBmvzZOQ8bBFO8v;; 7EC SBCICsLLVNZZZFFjIBF:;vv #Z .RNFzzy @kexianli.:;;;v7;;,0b BEuuIBj BOFCjcllyI#B. Bs;;;CB. :@secbone.b RZvv7;;vQR IBB#RbBy BZ;v7v,.. Bc :vv; RL;;vv;;:;NZ Fmv7l7ssIjqBBqv NBBOzIVVSu0bBbBBB jBbBBBbBbBBBBBBBB .vuqQ8DQEZuc; '); console.log('Hi~ 欢迎加入DNSPod,简历请发送至 %c hr@dnspod.com','color:#4FA6E7'); } }catch(e){} })() ```
额,虽然只是文字把戏,可是别人也做的很用心,这种代码用即时函数来做,是再好不过了(感兴趣的童鞋可以把上面的代码拉倒console里面去试试)。
下面我们来了解下即时函数的写法,代码如下:
```javascript //第一种形式 (function() { //body })(); //第二种形式 (function(){ }()); ```
上面2种模式没有太大的区别,我喜欢使用第一种(看上去更像是执行一个函数) ,但是JSLint偏好使用第二种。这种模式本质上只是一个函数表达式(详细请看上一篇)。
同样的,既然他也是函数,那么我们一样可以给他传参,在JQ插件中更多的是给他指定作用域。代码示例如下:
```javascript (function(window, document, undefined) { function Wr(element, opts) { return (this instanceof Wr) ? this.init(element, opts) : new Wr(element, opts); } Wr.prototype.init = function(){ // body ... }; //other code })(window, window.document); ```
同样的很多模块化代码的实现中,也大量利用到了即时函数(用以区分不同模块)。
结语
这一篇,我总结了下工作中包括了解到的一些函数的编程用法,总体的是想加强自己在JS结构方面的认识,希望加深自己对JS模块化的认识。如有错误,请指正。下一篇我将总结一下JS中函数的一些高级用法。