1、高阶函数其他应用
①高阶函数实现AOP(面向切面编程)
https://blog.csdn.net/qingbaicai/article/details/103149375
②函数科里化
curring又称部分求值。函数首先会接受一些参数,接受这些参数后,该函数不会立即求职,而是继续返回另一个函数,刚才传入的参数在闭包里保存起来,当函数真正需要求值的时候,之前所有的参数都会一次性用于求职。
例:记账函数,输入参数保存,未输入时计算总额
let curring = function (fn){
let args = []
return function(){
if(arguments.length == 0){
return fn.apply(this,args)
}else{
[].push.apply(args,arguments)
}
}
}
let cost = (function(){
let money = 0
return function(){
for(let i=0;i<arguments.length;i++){
money+=arguments[i]
}
return money
}
})()
console.log(cost)
let costTest = curring(cost)
costTest(100)
costTest(100)
costTest(100)
costTest(100)
costTest(100)
console.log(costTest())
③逆科里化
uncurring在js中,当我们调用对象的某个方法是,不用关心对象原本是否被设计为拥有这个方法。可以通过反科里化,让对象去借用一个不属于它的方法。
两种实现方法
Ⅰ获取数组push功能
可以通过call或apply
Function.prototype.uncurrying = function(){
let self = this
return function(){
let obj = Array.prototype.shift.call(arguments)
return self.apply(obj,arguments)
}
}
let push = Array.prototype.push.uncurrying()
let obj = {"length":1,"0":1 }
push(obj,2)
console.log(obj)
Ⅱ
Function.prototype.uncurrying = function(){
let self = this
return function(){
return Function.prototype.call.apply(self,arguments)
//相当于return self.call(arguments)
}
}
2、函数节流
函数节流:在极少数情况下,函数的触发不是由用户直接出发的。在这些情况下,函数有可能被频繁的调用,造成大的性能问题
①函数被频繁调用的场景
Ⅰwindow.resize
Ⅱmousemove事件
Ⅲ上传进度
②函数节流的代码实现
function throttle(fn,interval){
let _self =fn,
timer,
firstTime = true
return function(){
let args = arguments
_me = this
if(firstTime){//第一次无需延迟
_self.apply(_me,args)
return firstTime = false
}
if(timer){//计时器在,不执行
return false
}
timer = setTimeout(function(){
clearTimeout(timer)
timer = null
firstTime = true
_self.apply(_me,args)
},interval||2000)
}
}
window.onresize = throttle(()=>{
console.log('ok')
})
3、分时函数
在某些情况下,某些函数是用户主动调用的,但因为客观原因,会严重影响页面性能。比如一次性渲染过多数据与节点
例:建立节点
let timeChunk = (arr,fn,count)=>{
let obj,t
let len = arr.length
let start = function(){
for(let i=0;i<Math.min(count ||1,arr.length);i++){
let obj = arr.shift()
fn(obj)
}
}
return function(){
t = setInterval(()=>{
if(arr.length === 0){
return clearInterval(t)
}
start()
},200)
}
}
4、函数防抖
触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间。
①搜索框搜索输入。只需用户最后一次输入完,再发送请求;
②用户名、手机号、邮箱输入验证;
③浏览器窗口大小改变后,只需窗口调整完后,再执行 resize 事件中的代码,防止重复渲染。
function debounce(fn,wait){
var timer = null;
return function(){
if(timer !== null){
clearTimeout(timer);
}
timer = setTimeout(fn,wait);
}
}
function handle(){
console.log(Math.random());
}
window.addEventListener("resize",debounce(handle,1000));
5、数字逢三加','parseFloat(num_s).toLocaleString()
6、惰性加载函数
在web开发中,因为浏览器之间的差异,一些嗅探工作总是必不可免。比如addEventListener
let 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)
}
在第一次进入条件分支后,在函数内部会重写这个函数,下一次进入时,addEvent就不存在条件分支语句