初涉JavaScript模式 (9) : 函数 【常用方式】

回调模式

上一篇,对JavaScript函数进行了大体的介绍,这一篇对一些在工作中经常遇到的情况进行扩展。

在工作中,我们经常遇到很多需求,比如现在有一个需求:

一栋10层的大楼,当我们在坐电梯时,电梯每上一层,每层的电梯显示屏上即时显示电梯当前所在的楼层。

这样我们可能不到1s,就想到了解决方案,只要电梯每上一层,把每一层的电梯显示屏数字 +1 ,代码核心如下:

  1:     function processArrayA(nums, scalar) {
  2:         var arr = [];
  3:         nums.forEach(function(value) {
  4:             arr.push(value + scalar);
  5:         });
  6:         return arr;
  7:     }
  8:     var numsA = [1, 2, 3, 4, 5];
  9:     console.log(processArrayA(numsA, 1)); //[2,3,4,5,6]

每当电梯升一层,我们只要调用processArrayA()方法就可以完成需求,但是假如后续又加了需求(PM一般都这样,呵呵),希望我们在电梯下降的时候也 -1,这样也没事,我们马上写出了代码:

  1:     function processArrayB(nums, scalar) {
  2:         var arr = [];
  3:         nums.forEach(function(value) {
  4:             arr.push(value - scalar);
  5:         });
  6:         return arr;
  7:     }
  8:     var numsA = [1, 2, 3, 4, 5];
  9:     console.log(processArrayB(numsA, 1)); //[0,1,2,3,4]

额,当我们迅速解决了需求后,该死的PM又来了(悲催),说这栋楼希望显示2倍层数(奇葩有木有。。),作为技术的我们还得做。。。额,于是我们又给出了代码:

  1:     function processArrayC(nums, scalar) {
  2:         var arr = [];
  3:         nums.forEach(function(value) {
  4:             arr.push(value * scalar);
  5:         });
  6:         return arr;
  7:     }
  8:     var numsA = [1, 2, 3, 4, 5];
  9:     console.log(processArrayC(numsA, 2)); //[2,4,6,8,10]

额,到这时候,我们也知道PM的需求是无止境的(谁知道脑残的PM再能想出什么奇葩来),而作为工程师的我们也开始再思考如何能一劳永逸了(懒程序才是好程序),额,这时我们的回调模式就派上用场了,我们发现前面三段代码示例除了forEach里面的逻辑有变化,其他都是没有变化的,我们要是把这段代码逻辑隔离出来,不就OK了。代码如下:

  1:     //回调模式
  2:     function processArrayB(nums, scalar, callback) {
  3:         var arr = [];
  4:         nums.forEach(function(value) {
  5:             arr.push(callback(value, scalar));
  6:         });
  7:         return arr;
  8:     }
  9: 
 10:     function add(value, scalar) {
 11:         return value + scalar;
 12:     }
 13: 
 14:     function subtract(value, scalar) {
 15:         return value - scalar;
 16:     }
 17:     function ride(value,scalar){
 18:         return value * scalar;
 19:     }
 20:     var numsB = [1, 2, 3, 4, 5];
 21:     console.log(processArrayB(numsB, 2, add)); //[3,4,5,6,7]
 22:     console.log(processArrayB(numsB, 5, subtract));//[-4,-3,-2,-1,0]
 23:     console.log(processArrayB(numsB, 2, ride));//[2,4,6,8,10]

这样我们顺利的把add,ride。。方法独立出来,作为callback的形式,让处理函数去调用,而每次增加需求,我们只需要简单的添加callback函数就OK了(简单情况下),相比这个简单的需求,有时候我们可能会遇到复杂N倍的代码逻辑,而这时候回调模式就显得格外重要。

回调模式的用法很常见,比如我们addEventListener的时候里面的callback,而在一些常见的库中就应用的更加广泛了,例如Jq的“钩子” ,这样的好处就是我们在coding的过程中,只需要关注核心代码的实现,而不必考虑到每一种业务逻辑(可以通过callback的方式),这样会让我们更方便的扩展,构建,自定义自己的组件。

暴露接口

在JavaScript中,我们花了很长时间写好的组件,我们不希望他被别人随意改动,但是如果完全封闭,那么就失去了组件的封装性,那组件也就没有丝毫意义可言了。但是如果我们整个的暴露所有代码实现,那么可能导致很多超出我们预料的问题,所以我们可以仿照Java的模式来做,暴露部分接口,这样不仅保证了组件的稳定,也可以达到封装的目的。就拿我大学期间的做的一个图书管理系统代码:

  1:     //书籍分类
  2:     GLOBAL.comm.comnav=(function(){
  3:         var bindNav=function(navList){
  4:             $.each(navList,function(key,val){
  5:                 $("#"+val.split("-")[0]+">span").click(function(){
  6:                     $(this).siblings().each(function(){
  7:                         $(this).find(".active").hide().siblings().find("[_tag="+$(this).attr("_tag")+"]").removeClass("red");
  8:                     });
  9:                     $(this).find(".active").show().siblings().find("[_tag="+$(this).attr("_tag")+"]").addClass("red");
 10:                     showTag([val.split("-")[1],val.split("-")[2]],$(this).attr("_tag"));
 11:                 });
 12:             });
 13:         };
 14:         var processNav=function(navId,commId,listId){
 15:             return navId + "-" + commId + "-" +listId;
 16:         };
 17:         var showTag=function(tagList,tagName){
 18:             $.each(tagList,function(index){
 19:                 $("#"+tagList[index]).find("[_tag="+tagName+"]").show().siblings().hide();
 20:             });
 21:         };
 22:         return {init:bindNav,
 23:             newInstantce:processNav
 24:         }
 25:     })();

这是我当时基于JQ做的一个项目中部分代码(要喷,请轻点。。),在这段代码中我是基于return 来实现暴露接口,暴露了init和newInstantce,而其他方法对外是完全不可见的。而具体的调用代码如下:

  1:     //推荐类型切换
  2:     index.comNavChg = function(){
  3:         GLOBAL.comm.comnav.init([GLOBAL.comm.comnav.newInstantce("hottabs","recommends","hotlist")]);
  4:     }

以上的调用代码只利用到了comnav中暴露的两个方法,而具体的代码实现对外是不可见的。以上代码由于我是包装了return的函数,所以他形成了一个闭包(通过闭包来访问内部数据),这也就变相的实现了private。

即时函数

在上面图书管理的实例代码中,大家可能注意到我所有的逻辑都是写在Global这个命名空间下,但是很多情况下,例如写JQ的插件的时候,我们并要保证他在别人引用时都能正常运行,所以我们就要考虑新的方法。即时函数时一个很好的解决方案,他一般用来解决只允许运行一次的情况,例如打开很多巨头网站在console上面显示招聘信息的代码,他并不和任何业务代码产生交集,也很好的防止了污染全局变量(因为他为里面的代码提供了一个作用域沙箱)。下面我们来看dnspod的效果:

很酷吧,我们来看看它的具体代码实现:

  (function(){
    try{
      if(window.console && window.console.log){
        console.log(‘             Qv.                                                      \n             ZBjIjv;           ..,..                                  \n              @yizero.mFLIEmQ0qFFzSuFFZZqFSl;                         \n              yBzl;vvvczFIv;::,:,:::::::: @haohu.                     \n               BZFCvvvc;:,::;;;;;;;:;:;;;;     ;Zbu.                  \n               7BuNNv7;::;;;;:::,,,,,::::;;       IBO.                \n              .D0zFv7;::;:,.:;v7jjVyCslv;:::;.    .:jBF               \n             :BqVNvvv:::,;sCzZFuIysLsVzZZ0Fl;;:;;v;;,:0B              \n             bZVFlv7v,.vmOSBs           ..;bB0z:,;;;;:.jB             \n            @kevensun.SBv  BjQ:          vEEq VBl,:;;;:.jB            \n            BFzFs;7vvZb   sI  0b;      ;bF  B  ,BI,:;;;:.BV           \n            BFVFvvvvvB.   D.  ;bCm:  ;0Nb   N;  .B;:;;;;.lB           \n            bNzFvv7vlB.   BZ  q;  EO8F  R   Bj   #N.;;;;:;B           \n            0ByF7vvv;bF   BBBCb   @Wwz  7qSBBD   B7:;;;;,7B           \n         lRu7BNzV;vvvvBZ ;BBBBR ;B;  vB  bBBBB  BE,:;;;,,BZ           \n        Eb:. ;BFzj;vvv;0EBBBBB;:D     .#:RBBBBNRS,:;;;,:ZB            \n       mE.,,: ;REylvvvv;vLObBBbz        NBBBBDC;.:::::;EB,            \n       B..,:::..SbFc;vvvv;:;vCENZOZNFZNSy0s;.  ,,::;;IBB              \n       D8:.,:,,  ;O#F;;;vvv;;;;v7ljjyjsv;,,,;;;;v;vsRBl  ,vvvv;       \n        lDOl;vsu;  :jbF7;;;;;vvvvvvvvvvvvvvvvv;v7V8BV  ;bZsjsjzBl     \n          ;ySVlvEEc .BOBbZzlv;;;;;;;;;;;;;vvsjNEDbBl7suq;.,,,,.,B;    \n                 ,IZBQc8EF0R @guohezou.08DRDQ#BsZ0  ...,:::::,.Ez    \n                    BRV#OjzVFuDBbbbQENZZEZqSuLN8sqB.;;;,,,::::: DC    \n                    .ZOBQSzIcv;RZ.vyIVCClvvyVzZBqB#jCuVBs,.,,,.vb,    \n                       7#;v;v;;;0s     ;7qF:vvOQv,       @arqiao.     \n                       lq,;;;;;:EQ ;BEb  R7;;,Ss          ,:,,        \n                       LBjuVSVCOB ,BEB; zBsyFzBy                      \n                       uBzVFzzNB       ,BVmBbbBBc                     \n                       zBCuzuCBmvzZOQ8bBFO8v;;  7EC                   \n                       SBCICsLLVNZZZFFjIBF:;vv    #Z                  \n                       .RNFzzy @kexianli.:;;;v7;;,0b                  \n                            BEuuIBj    BOFCjcllyI#B.                  \n                            Bs;;;CB.   :@secbone.b                    \n                           RZvv7;;vQR    IBB#RbBy                     \n                          BZ;v7v,.. Bc     :vv;                       \n                          RL;;vv;;:;NZ                                \n                          Fmv7l7ssIjqBBqv                             \n                         NBBOzIVVSu0bBbBBB                            \n                         jBbBBBbBbBBBBBBBB                            \n                           .vuqQ8DQEZuc;                              \n\n‘);
        console.log(‘Hi~ 欢迎加入DNSPod,简历请发送至 %c [email protected]‘,‘color:#4FA6E7‘);
      }
    }catch(e){}
  })()

额,虽然只是文字把戏,可是别人也做的很用心,这种代码用即时函数来做,是再好不过了(感兴趣的童鞋可以把上面的代码拉倒console里面去试试)。

下面我们来了解下即时函数的写法,代码如下:

  1:     //第一种形式
  2:     (function() {
  3:         //body
  4:     })();
  5: 
  6:     //第二种形式
  7:     (function(){
  8:         
  9:     }());

上面2种模式没有太大的区别,我喜欢使用第一种(看上去更像是执行一个函数) ,但是JSLint偏好使用第二种。这种模式本质上只是一个函数表达式(详细请看上一篇)。

同样的,既然他也是函数,那么我们一样可以给他传参,在JQ插件中更多的是给他指定作用域。代码示例如下:

  1:     (function(window, document, undefined) {
  2:         function Wr(element, opts) {
  3:             return (this instanceof Wr) ? this.init(element, opts) : new Wr(element, opts);
  4:         }
  5: 
  6:         Wr.prototype.init = function(){
  7:             // body ...
  8:         };
  9:         //other code 
 10:     })(window, window.document);

同样的很多模块化代码的实现中,也大量利用到了即时函数(用以区分不同模块)。

结语

这一篇,我总结了下工作中包括了解到的一些函数的编程用法,总体的是想加强自己在JS结构方面的认识,希望加深自己对JS模块化的认识。如有错误,请指正。下一篇我将总结一下JS中函数的一些高级用法。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。