学习JavaScript高级第八天(闭包高级应用)

学习JavaScript高级第八天(闭包高级应用)

1、闭包应用值惰性函数和柯理化函数

/* * JS高阶编程函数：惰性函数 + 懒 + 能只执行一次的绝不会执第二次 */ // 这样写，每调用一次都要处理兼容的问题：这完全没有必要，第一次执行知道了兼容情况，后期再调用（浏览器也没余刷新、也没有换浏览器）兼容检验是没有必要的 function getCss(ele, attr){ if(window.getComputedStyle) { return window.getComputedStyle(ele)[attr]; } else { return ele.currentStyle[attr]; } } // 方案一：页面加载就把是否兼容处理了，后期执行方法的时候直接基于变量的值判断使用哪个方法即可 let isComputed = 'getComputedStyle' in window; function getCss(ele, attr){ if(isComputed) { return window.getComputedStyle(ele)[attr]; } else { return ele.currentStyle[attr]; } } // 惰性思想：函数重定向 // + getCss 是全局函数 // + 第一次执行会形成一个闭包 function getCss(ele, attr){ if(window.getComputedStyle) { // 把全局的getCss 重定向为具体的小函数 getCss = function(ele, attr) { return window.getComputedStyle(ele)[attr]; } } else { getCss = function(ele, attr) { return ele.currentStyle[attr]; } } // 重定向之后执行一次：确保第一次调用也可以获取到想要的结果 return getCss(ele, attr); } console.log(getCss(document.body, 'width')); console.log(getCss(document.body, 'height')); console.log(getCss(document.body, 'padding')); /* * JS高阶函数：柯理化函数 + 预处理思想： 第一次执行大函数，形成一个闭包（原因：返回了一个小函数），把一些信息存储到闭包中（传递的实参或者当前闭包中声明的以下私有变量等信息）；等到后面把返回的小函数(匿名函数)执行的时候，需要用到一些非自己私有的变量，则向上级上下文中查找（也就是把之前存储在闭包中的信息获取到） + 应用的也是闭包的机制 */ // 编写函数 fn，实现下面的功能 function fn(...arg1){ // console.log(arg1); // ...arg1 把传递进来的实参获取到，结果是一个数组 // arg1 存放第一次执行fn传递的实参 [1,2] return function(...arg2) { // arg2 存放的是紧接着执行匿名函数时传递的实参 [3] let arr = arg1.concat(arg2); return arr.reduce((total, item) => { return total+ item; }); }; } let res = fn(1,2)(3); // fn(1,2)(3) => let f = fun(1,2); f(3) console.log(res); // =>6 1+2+3 /* * reduce：数组中用来迭代遍历每一项的 arr.reduce(function([res], [item]) { }) */ /* let arr = [10,20,30,40]; var a = arr.reduce((res, item) =>{ // 把当前的回调函数执行的结果，作为下一次迭代中的[res]处理 console.log(res, item); // 10 20 // 30 30 // 60 40 return res + item; }) console.log(a); // 100 */ // 自己实现 reduce function reduce(arr, callback, init) { arr = arr.slice(0); let index = 0; // 遍历索引开始 // 检验 init 是否传递 if(typeof init === 'undefined') { init = arr[0]; // 给 init 赋值默认值 index =1; } for(let i=index; i<arr.length; i++) { init = callback(init, arr[i], i); } return init; } let arr = [10,20,30,40]; let result = reduce(arr, function(res, item, index){ console.log(index, item); return res + item; }); let result1 = reduce(arr, function(res, item, index){ console.log(index, item) return res + item; }, 100); let result2 = reduce([90], function(res, item, index){ console.log(index, item) return res + item; }); console.log(result, result1, result2)

2、闭包应用之compose组合函数

/* 在函数式编程当中又以个很重要的概念就是函数组合，实际上就是把处理数据的函数像管道一样连接起来，然后让数据穿过管道得到最终的结果。（有点像高中数学中的复合函数）例如： const add1 = (x) => x+1; const mul3 = (x) => x*3; const div2 = (x) => x/2; div2(mul3(add1(add1(0)))); // => 3 而这样的写法可读性太差了，可以构建一个compose函数，它接收多个函数作为参数（这些函数都只接收一个参数），然后compose返回的也是一个函数，从而达到解析复合函数的效果 简而言之：compose函数可以把类似于 f(g(h(x))) 这种写法简化成 compose(f,g,h)(x) 请完成 compose 函数的编写 */ function compose(...funcs){ return function(x){ if(funcs.length < 1) return x; // 如果没有传递函数，则直接返回参数 // 方案一：使用for循环 // let length = funcs.length - 1, // fun = funcs[length]; // console.log(fun); // let res = fun(0); // for(let i=length-1; i>=0;i--) { // console.log(funcs[i]); // res = funcs[i](res); // } // console.log(res); // return res; // 方案二：使用reduce funcs = funcs.reverse(); console.log(funcs); return funcs.reduce((res, item) => { console.log(res, item) return item(res); }, x) } } const add1 = (x) => x+1; const mul3 = (x) => x*3; const div2 = (x) => x/2; let re = compose(div2,mul3,add1,add1)(0); // =>3 console.log(re); // 3

3、闭包应用之函数的防抖和节流

/* * 函数的防抖（防止老年帕金森）: 对于频繁触发某个操作，只识别一次（执行一次） @params: fn [function]：最后要触发执行的函数 wait [number]：“频繁”设定的界限（时间间隔） immediate [boolean]：触发多次函数时，识别第一次还是最后一次 @return 可以被调用执行的函数 */ // 主体思路：在当前点击完成后，等待wait事件，看是否还会触发第二次，如果没有触发第二次，属于非频繁操作，直接执行fn函数；如果触发了第二次，则之前的触发都不算，从当前开始重新等待wait时长 function debounce(fn, wait, immediate=false){ wait = wait || 300; let timer = null; return function(ev){ clearTimeout(timer); // 每次点击就把之前设置的定时器清除掉 // 如果是 immediate=true立即执行 console.log(timer); if(immediate && (timer === null)) { fn.call(this, ev); } // 重新设置一个新的定时器监听从当前开始，wait时间段内是否触发第二次 timer = setTimeout(()=>{ timer = null; if(!immediate) { // 不是立即执行，则执行这里 fn.call(this, ev) } }, wait); } } function handle(ev) { console.log(this, ev); console.log('防抖'); } app.onclick = debounce(handle, 500, false); */ /* * 函数的节流： 在一段频繁操作中，可以触发多次，但是触发的频率由自己制定，就是该操作一直不停的在执行，过于频繁，通过设定一个时长，让它在规定时长内触发一次，而不是一直不停的触发 @params: fn [function]：最后要触发执行的函数 wait [number]：规定函数重复执行的间隔时长 @return: 可以被调用执行的函数 */ // 方案一：使用时间戳 function throttle(fn, wait = 100) { let enterTime = new Date(); // 记录上一次触发的时间 return function(){ let backTime = new Date(); // 记录距离上一次最近触发的时间 if(backTime - enterTime > wait) { // 如果两次执行时间间隔大于设定的时间间隔，就立即执行指定的函数，并且将这次执行的时候重新记录为上一次执行时间 fn.apply(this, arguments); enterTime = backTime; } } } // 方案二：时间戳+定时器 function throttle(fn, wait=300){ let timer = null, previous = 0; // 记录上一次函数触发时的时间 return function(ev){ let now = new Date(), // 获取当前时间 cha = wait - (now - previous); // 计算设定的触发间隔时长和实际函数重复触发间隔时长的差值，即记录还差多长才能达到指定的wait时长 if(cha <= 0 ){ // 重复操作的间隔已经超过规定的wait了 clearTimeout(timer); // 清除已经存在的定时器 previous = now; // 记录当前时间 fn.call(this, ev); // 立即执行函数 } else if(!timer){ timer = setTimeout(() =>{ timer = null; previous = new Date(); fn.call(this, ev) },cha) } } } function handle() { console.log('节流'); } // window.onscroll = handle; // 在滚动的过程中，浏览器有最快反应时间(5~6ms 13~17ms)，只要反应过来就会执行一次 window.onscroll = throttle(handle, 500); // 我们控制滚动过程中该函数300ms才触发一次 /* * 总结： 防抖：点击做啥事，一般都是用防抖 节流：滚动、文本框输入等一般用节流 */