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

回调模式

上一篇，对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的效果:



很酷吧，我们来看看它的具体代码实现：

```javascript
(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   B;;;;,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 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中函数的一些高级用法。