柯理化学习笔记(三)

209 阅读2分钟

柯理化的第三个特点:延迟执行。(对于频繁执行的方法,只是每次传的数据不一样,可以先把数据存起来。等到最后一并执行)。

// 背景描述库里得分,打完一节或一场之后计算得了多少分,
//bad code,得一次分计算一次。很耗性能
let allScore = 0;
let addScore = function (score) {    
    allScore =  allScore + score;
}
addScore(1);
addScore(2);
addScore(3);
addScore(1);
addScore(1);
console.log(allScore);

//good code,只在最后计算一次。把之前的都存起来.当最后结束时,传入一个空值,表示结束。
let allScore = 0;
let cacheScroll = function(callback) {    
    let cacheArr = []; // 存放输入进来的数据    
    return function (scroll) {       
         if (arguments.length === 0) {         
               // 这个函数由调用者决定,此函数的功能是什么。当接受到空值信号时,执行回调函数。      
              return callback(cacheArr);       
         } else {           
         // 第一版,每次只支持传一个数。         
           cacheArr.push(scroll)      
              }   
         }
}
let callback = function(arr) {   
     allScore =  arr.reduce((pre, curr, currIndex, arr) => pre + curr);
}
let addScore = cacheScroll(callback);// 最后的结果还是这样,一次一次调用,但是不执行。
addScore(1);
console.log(allScore);
addScore(1);
addScore(2);
addScore(3);
console.log(allScore);
addScore(1);
addScore(); // 执行到这里的时候才开始计算。把传入空参数作为结束标志。告诉函数,可以开始计算了。
console.log(allScore);
// better code, 支持传入多个值
let allScore = 0;
let cacheScroll = function(callback) {   
 let cacheArr = []; // 存放输入进来的数据    
return function () {       
 if (arguments.length === 0) {        
    // 这个函数由调用者决定,此函数的功能是什么。当接受到空值信号时,执行回调函数。  
          return callback(cacheArr);           
 // 或者           
 // return callback.apply(null, cacheArr);      
  } else {         
   // 改进版,支持传多个数。          
  cacheArr = cacheArr.concat([].slice.call(arguments));        
    // 或者           
 // cacheArr = cacheArr.concat(Array.from(arguments));    
    }   
 }
}
let callback = function(arr) {   
 // 这个是为了防止传入的不是一个数组,而是一个个零散的参数。原因是callback调用时使用了apply   
 if (!arr.length) {      
  // 传入的不是一个数组     
   arr = Array.from(arguments);  
  }   
 allScore =  arr.reduce((pre, curr, currIndex, arr) => pre + curr);
}
let addScore = cacheScroll(callback);// 最后的结果还是这样,一次一次调用,但是不执行。
addScore(1);
console.log(allScore);
addScore(1);
// 和上一版的区别,这里可以传入两个参数
addScore(2,2);
addScore(3);
console.log(allScore);
addScore(1);
addScore(); // 执行到这里的时候才开始计算。把传入空参数作为结束标志。告诉函数,可以开始计算了。
console.log(allScore);