你的位置:首页 > Java教程

[Java教程]JavaScript设计模式与开发实践——读书笔记1.高阶函数(下)


  上部分主要介绍高阶函数的常见形式,本部分将着重介绍高阶函数的高级应用。

  1.currying

  currying指的是函数柯里化,又称部分求值。一个currying的函数会先接受一些参数,但不立即求值,而是继续返回给另一个函数,通过闭包存储起来。等到函数被真正需求要求值的时候,将之前传入的参数统一起来求值。例如,我们要计算一个月的开销,我们并不需要计算每天具体花了多少,而是需要计算月底总共花掉多少,也就是说,实际上我们只需要在月底计算一次。所以每个月的前29天,我们都只需要保存好当天的开销,到30天时进行计算。我们可以借助currying函数实现。

var currying = function(fn){  var args = [];  return function(){    //当参数为空时执行fn    if(arguments.length === 0){      return fn.apply(this, args);    }else{ //有参数时,不计算,将参数存放至args      [].push.apply(args, arguments);      return arguments.callee;    }  }}var cost = (function(){  var money = 0;  return function(){    for(var i = 0, len = arguments.length; i < len; i++){      money += arguments[i];    }    return money;  }})()var cost = currying(cost);cost(100); //第一天的花费,不计算真正的值cost(200); //第二天的花费,不计算真正的值cost(300); //第三天的花费,不计算真正的值cost() //输出600,输出前三天的值

  2.函数节流

    在某些场景下,函数有可能被非常频繁地调用,而造成性能问题。常见的场景有:

    1.window.onresize事件,当给浏览器绑定resize事件浏览器窗口改变时,这个事件被触发的频率非常高,如果window.onresize事件中处理一些与DOM相关的操作,将造成非常大的性能影响,有可能造成浏览器卡顿;           2.mousemove事件,如果给一个div绑定了mousemove事件,在拖拽过程中往往也会频繁触发该事件;

    3.百度搜索输入框,用户输入内容,页面做出相应的搜索,通过绑定keydown事件,如果不作处理,将请求地非常频繁。

  上面几个场景的共同问题是函数被触发的频率太高,我们可以通过忽略一部分事件请求来完成函数节流,如window.onresize中,拖动窗口一秒钟可能触发了10次,但是我们只取其中的两三次。可以通过setTimeout来完成这件事。

var throttle = function(fn, interval){  var timer, firstTime = true;  return function(){    var args = arguments,      me = this;    //如果是第一次,则不需要延迟    if(firstTime){      fn.apply(me, args);      return firstTime = false;     }    //如果定时器还在,说明前一次的延迟执行还未完成    if(timer){      return false;    }    timer = setTimeout(function(){      clearTimeout(timer);      timer = null;      fn.apply(me, args);    }, interval)  }}window.onresize = throttle(function(){  console.log('Window onresize!!!')}, 1000)//测试结果:1秒内只会弹出一次Window onresize!!!

   3.分时函数

  场景如:WebQQ中的好友列表。列表中通常有几百上千好友,如果一个好友用一个节点表示,当我们要渲染这个列表时,可能需要一次性忘页面中创建成百上千个节点,在短时间内往页面中大量添加DOM节点可能会让浏览器卡顿甚至假死。可以如下代码表示:

var arr = [];for(var i = 0; i < 1000; i++){  arr.push(i)};var renderFriendList = function(data){  for(var i = 0, l = data.length; i < l; i++){    var div = document.createElement('div');    div.innerHtml = i;    document.body.appendChild(div);  }};

renderFriendList(arr);

这个问题的解决方案是采用分时函数,将创建节点分时进行,原来一秒钟创建1000个节点,改为每隔200ms创建10个节点,代码如下:

var timeChunk = function(arr, fn, count, time){  var obj, timer, len = arr.length;  var start = function(){    for(var i = 0; i < Math.min(count || 1, arr.length); i++){      var obj = arr.shift();      fn(obj);    }  };  return function(){    timer = setInterval(function(){      if(arr.length === 0){        return clearInterval(timer);        timer = null;      }      start();    }, time)  };};

  假设我们依然有1000个好友,我们可以利用timeChunk函数,每200ms插入一批,一批只往页面中添加10个元素;

var arr = [];for(var i = 0; i < 1000; i++){  arr.push(i)};var renderFriendList = timeChunk(arr, function(n){  var div = document.createElement('div');  div.innerHtml = n;  document.body.appendChild(div);}, 10, 200);renderFriendList();

  4.惰性加载函数

  在Web开发中,在IE、Chrome、FireFox中事件绑定方法不一样,我们通常会这么写:

var addEvent = function(elem, type, handler){  if(window.addEventListener){    return elem.addEventListener(type, handler, false);  }  if(window.attachEvent){    return elem.attachEvent('on' + type, handler);  }};

  这样写的缺点是,当每次调用addEvent的时候都会去执行if条件分支,显然这样并不是最佳实践,可以使用一些方法避免这些重复的执行过程。

  第二种方案是,我们把嗅探浏览器的操作提前到代码加载的时候,在加载的时候就立刻进行一次判断,以便让addEvent返回一个包裹了正确逻辑的函数,代码如下:

var addEvent = function(){  if(window.addEventListener){    return function(elem, type, handler){      elem.addEventListener(type, handler, false);          }  }  if(window.attachEvent){    return function(elem, type, handler){      elem.attachEvent('on' + type, handler);    }  }}();

  目前的addEvent相比之前多次执行if有较大改善,但是仍然存在缺点:如果我们从头到尾都没使用addEvent这个函数,那么一开始多嗅探浏览器将是多余的操作,这将稍稍延长页面ready的时间。

  第三种方案是惰性载入函数方案。此时的addEvent依然被声明为一个普通函数,在函数里依然有一些分支判断。但是在第一次进入条件分支之后,在函数内部会重写这个函数,重写之后的函数就是我们期望的addEvent函数,在下一次进入addEvent的时候,将不存在条件分支语句:

var addEvent = function(elem, type, handler){  if(window.addEventListener){    addEvent = function(elem, type, handler){      elem.addEventListener(type, handler, false);          }  }  if(window.attachEvent){    addEvent = function(elem, type, handler){      elem.attachEvent('on' + type, handler);        }  }  addEvent(elem, type, handler);};

  小结:高阶函数和闭包结合使用使得JavaScript更灵活,掌握高阶函数将加深我们对JavaScript编程的理解。