让前端飞Web前端之路

第二十二章 高级技巧

2017-07-11  本文已影响34人  张果果

1. 作用域安全的构造函数:在进行任何更改前,首先确认this对象是正确类型的实例(锁定可以使用构造函数的环境,避免在全局对象上意外设置属性)。


2. 函数的惰性载入:函数执行的分支仅会发生一次。

    实现惰性载入的两种方式:

① 在函数被调用时再处理函数。在第一次调用的过程中,该函数被覆盖为另一个按合适方式执行的函数,这样任何对原函数的调用都不用再经过分支

② 在声明函数时就指定适当的函数


3. 函数柯里化:把接受多个参数的函数变换成为接受一个参数的函数,并且返回接受余下参数而且返回结果的新函数的技术。

function curry(fn){  //  fn为要进行柯里化的函数

        var args = Array.prototype.slice.call(arguments, 1);   //  args包含了来自于fn函数外部的参数

        return function(){

                var innerArgs = Array.prototype.slice.call(arguments);  //  innerArgs包含了来自于fn函数内部的参数

                var finialArgs = args.concat(innerArgs);

                return fn.apply(null, finalArgs);

        }

}


3. 柯里化函数动态创建步骤:调用另一个函数并为它传入要柯里化的函数和必要的参数


4. 定时器中( setTimeout() 和 setInterval() ),指定的时间间隔表示何时将定时器的代码添加到队列,而不是何时实际执行代码。


5. 数组分块基本原理:为要处理的项目创建一个队列,然后使用定时器取出下一个要处理的项目进行处理,接着再设置另一个定时器。其基本的模式:

function chunk(array, proccess, context){

        setTimeout(function(){

                var item = array.shift();

                process.call(context, item);

                if(array.length > 0){

                         setTimeout(arguments.callee, 100);

                }

        }, 100);

}


6. 函数节流基本原理:某些代码不可以在没有间断的情况连续重复执行。第一次调用函数时,创建一个定时器,在指定的时间间隔之后运行代码;第二次调用该函数时,它会清除前一次的定时器并设置另一个。在resize事件中最常用。其基本模式:

function throttle(method, context){ // method为要执行的函数,context为函数执行的作用域

        clearTimeout(method.tId);

        method.tId = setTimeout(function(){ // 创建一个定时器,并将其ID存储于方法的 tId 属性中

                method.call(context);

        }, 100);

}

上一篇 下一篇

猜你喜欢

热点阅读