初涉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模式 (9) : 函数 【常用方式】

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

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

上一篇:一个简单的基于HTTP协议的屏幕共享应用


下一篇:linux系统ubuntu18.04安装mysql(5.7)