javaScript总结（26-30）

二十六、JavaScript中如何实现函数缓存？有哪些应用场景？

小结：函数缓存就是将函数的结果进行缓存，本质就是用空间换时间。js中实现函数缓存主要依靠闭包，科里化，高阶函数。
实现方法：
1、在当前函数作用域定义了一个空对象，用于缓存运行结果
2、运用柯里化返回一个函数，返回的函数由于闭包特性，可以访问到cache
3、然后判断输入参数是不是在cache的中。如果已经存在，直接返回cache的内容，如果没有存在，使用函数func对输入参数求值，然后把结果存储在cache中
应用场景：
1、对于昂贵的函数调用，执行负载计算的函数。
2、对于具有重复输入值的递归函数。
3、对于有限且高度重复输入范围的函数。
4、对于纯函数，即每次使用特定输入返回相同输出的函数。

二十七、说说 JavaScript 数字精度丢失的问题，解决方案？

小结：首先我们可以想一个问题1/3 = 0.333333这一个无限循环小数，在计算机存储中是不可能将这个无限循环小数的全部存在内存中。而是使用近似值表示，这就出现了精度丢失问题。在js中使用的是双精度浮点数编码，简单来说就是使用科学计数法来表示这些数，使用8个字节，64比特，1位符号位，11位指数位，52位尾数位。这就限制了能存储为位数，也限制了精度2⁵³ , 最大数2¹⁰²³,超过这个数就会变成Infinity。
解决方案：理论上用有限的空间来存储无限的小数是不可能保证精确的，但我们可以处理一下得到我们期望的结果
具体方法就是通过parseFloat和toPrecision对数据进行操作
还可以使用第三方库math.js BigDecimal.js

二十八、说说函数节流和防抖？有什么区别？如何实现？

小结：
节流是n秒内只运行一次，在n秒内重复触发将不执行。
防抖是n秒后执行一次，在n秒内重复触发将取消上次触发的，执行本次触发的，以此类推，直至最后一次触发。
区别：
相同点：都可以使用定时器setTimeout实现
目的都是降低执行频率，节省计算资源。
不同点：在一段连续操作后（总操作时间远大于n，相邻操作时间小于n），防抖每n秒触发一次，节流只执行最后一次。
应用场景：
防抖：输入账号或密码等需要校验提示的表单元素，输入完成后进行校验
输入搜索框内容，输入完成进行搜索
调整窗口大小，调整完成后进行计算页面元素宽度，防止重复渲染
节流：滚动加载，每过一段时间查看距离底部的距离，等距离少于多少进行加载下一页数据
搜索框，搜索联想功能

二十九、JavaScript如何判断一个元素是否在可视区域中？

小结：
1.offectTop，scrollTop
2.getBoundingClinentRect
3.Intersection Observer交叉观察器

应用场景：无限滚动，图片懒加载，广告曝光度，根据是否在可视区域决定动画或任务是否执行。

三十、JavaScript如何实现上拉加载，下拉刷新？

小结：1.用现成的js库，isscroll，better-scroll,pulltorefresh.js等
2.写一个上拉加载
我们需要三个值，可视窗口区域高度clientHeight，视窗到window顶部的距离scrollTop，页面的总高度scrollHeight，思路就是通过计算可视区域距离页面底部小于某个值时进行刷新，使用scrollHeight - scrollTop - clientHeight 计算结果就是距离底部的距离。
3.写一个下拉刷新
监听touchstart事件，记录初始位置的值，e.touches[0].pageY
监听touchmove事件，监听当前位置与初始位置差值，并使用translateY向下偏移相同距离
监听touchend事件，如果滑动达到最大值，触发callback执行刷新操作，并将translateY设为0

注意：学习总结
参考链接：https://github.com/febobo/web-interview