js设计模式中的高阶函数的一些应用

一、函数节流

一些场景下，函数有可能会被非常频繁的调用，从而造成极大的性能问题。如：window.onresize事件、mousemove事件（拖拽）、上传进度等。以上场景中的共同问题就是函数被触发的频率太高了，解决方案就是需要我们按时间来忽略掉一些事件请求，比如在500ms内只打印一次。显然，可以使用setTimeout来完成。

代码实现（throttle），原理为即将被执行的函数用setTimeout延迟执行一段时间，如果该次延迟执行还没有完成，则忽略接下来调用该函数的请求。throttle 函数接受2 个参数，第一个参数为需要被延迟执行的函数，第二个参数为延迟执行的时间。具体实现代码如下：

var throttle = function ( fn, interval ) {
    var __self = fn, // 保存需要被延迟执行的函数引用
    timer, // 定时器
    firstTime = true; // 是否是第一次调用
    return function () {
        var args = arguments,
        __me = this;
        if ( firstTime ) { // 如果是第一次调用，不需延迟执行
            __self.apply(__me, args);
            return firstTime = false;
        }    
        if ( timer ) { // 如果定时器还在，说明前一次延迟执行还没有完成
            return false;        
        }
        timer = setTimeout(function () { // 延迟一段时间执行
            clearTimeout(timer);
            timer = null;
            __self.apply(__me, args);
        }, interval || 500 );
    };
};
// 使用
window.onresize = throttle(function(){
console.log( 1 );
}, 500 );

二、分时函数

一个例子是创建WebQQ的QQ好友列表，如果列表中有成百上千的好友，一个好友用一个节点来表示，则当我们在页面中渲染这个列表的时候，可能要一次性往页面中创建成百上千个节点。在短时间内往页面中大量添加DOM节点显然也会让浏览器吃不消，我们看到的结果往往就是浏览器的卡顿甚至假死。

解决方案之一是下面的timeChunk函数，此函数让创建节点的工作分批进行，如把1秒钟创建1000个节点，改为每隔200毫秒创建8个节点。

timeChunk函数接受3个参数，第一个参数是创建节点时需要用到的数据，第2个参数是封装了创建节点逻辑的函数，第3个参数表示每一批创建的节点数量。代码如下：

var timeChunk = function( ary, fn, count ){
    var obj,
          t;
    var len = ary.length;
    var start = function(){
        for ( var i = 0; i < Math.min( count || 1, ary.length ); i++ ){
            var obj = ary.shift();
            fn( obj );
        }
    };
    return function(){
        t = setInterval(function(){
            if ( ary.length === 0 ){ // 如果全部节点都已经被创建好
                return clearInterval( t );
            }
        start();
        }, 200 ); // 分批执行的时间间隔，也可以用参数的形式传入
    };
};

最后我们进行一些小测试，假设我们有1000 个好友的数据，我们利用timeChunk 函数，每一
批只往页面中创建8 个节点：

var ary = [];
for ( var i = 1; i <= 1000; i++ ){
    ary.push( i );
};
var renderFriendList = timeChunk( ary, function( n ){
    var div = document.createElement( 'div' );
    div.innerHTML = n;
    document.body.appendChild( div );
}, 8 );
renderFriendList();

三、惰性加载函数

在Web 开发中，因为浏览器之间的实现差异，一些嗅探工作总是不可避免。比如我们需要
一个在各个浏览器中能够通用的事件绑定函数addEvent，常见的写法如下：

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

这个函数的缺点是，当它每次被调用的时候都会执行里面的if 条件分支，虽然执行这些if
分支的开销不算大，但也许有一些方法可以让程序避免这些重复的执行过程。

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

<html>
    <body>
        <div id="div1">点我绑定事件</div>
    <script>
    var addEvent = function( elem, type, handler ){
        if ( window.addEventListener ){
            addEvent = function( elem, type, handler ){
                elem.addEventListener( type, handler, false );
            }
        }else if ( window.attachEvent ){
            addEvent = function( elem, type, handler ){
                elem.attachEvent( 'on' + type, handler );
            }
        }
        addEvent( elem, type, handler );
    };

　　　　var div = document.getElementById( 'div1' );
　　　　addEvent( div, 'click', function(){
　　　　　　alert (1);
　　　　});
　　　　addEvent( div, 'click', function(){
　　　　　　alert (2);
　　　　});
　　</script>
　　</body>
</html>

高阶函数的使用还有柯里化、实现AOP等。

以上内容来自于《JavaScript设计模式与开发实践》一书，感兴趣的可自行去查阅。