js设计模式（三）高阶函数其他应用 、函数科里化、反科里化、函数节流防抖、分时函数、数字逢三加','

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就不存在条件分支语句