关于JavaScript中高阶函数的魅力详解(2)

JavaScript中的大多数函数都是用户主动触发的,一般情况下是没有性能问题,但是在一些特殊的情况下不是由用户直接控制。容易大量的调用引起性能问题。毕竟DOM操作的代价是非常昂贵的。下面将列举一些这样的场景:

window.resise事件。

mouse, input等事件。

上传进度

...

下面通过高阶函数的方式我们来实现函数节流

/** * 节流函数 * @param {*} fn * @param {*} interval */ const throttle = function (fn, interval = 500) { let timer = null, // 计时器 isFirst = true // 是否是第一次调用 return function () { let args = arguments, _me = this // 首次调用直接放行 if (isFirst) { fn.apply(_me, args) return isFirst = false } // 存在计时器就拦截 if (timer) { return false } // 设置timer timer = setTimeout(function (){ console.log(timer) window.clearTimeout(timer) timer = null fn.apply(_me, args) }, interval) } } // 使用节流 window.onresize = throttle(function() { console.log('throttle') },600)

分时函数

节流函数为我们提供了一种限制函数被频繁调用的解决方案。下面我们将遇到另外一个问题,某些函数是用户主动调用的,但是由于一些客观的原因,这些操作会严重的影响页面性能,此时我们需要采用另外的方式去解决。

如果我们需要在短时间内才页面中插入大量的DOM节点,那显然会让浏览器吃不消。可能会引起浏览器的假死,所以我们需要进行分时函数,分批插入。

/** * 分时函数 * @param {*创建节点需要的数据} list * @param {*创建节点逻辑函数} fn * @param {*每一批节点的数量} count */ const timeChunk = function(list, fn, count = 1){ let insertList = [], // 需要临时插入的数据 timer = null // 计时器 const start = function(){ // 对执行函数逐个进行调用 for (let i = 0; i < Math.min(count, list.length); i++) { insertList = list.shift() fn(insertList) } } return function(){ timer = setInterval(() => { if (list.length === 0) { return window.clearInterval(timer) } start() },200) } } // 分时函数测试 const arr = [] for (let i = 0; i < 94; i++) { arr.push(i) } const renderList = timeChunk(arr, function(data){ let div =document.createElement('div') div.innerHTML = data + 1 document.body.appendChild(div) }, 20) renderList()

惰性加载函数

在Web开发中,因为一些浏览器中的差异,一些嗅探工作总是不可避免的。

因为浏览器的差异性,我们要常常做各种各样的兼容,举一个非常简单常用的例子:在各个浏览器中都能够通用的事件绑定函数。
常见的写法是这样的:

// 常用的事件兼容 const addEvent = function(el, type, handler) { if (window.addEventListener) { return el.addEventListener(type, handler, false) } // for IE if (window.attachEvent) { return el.attachEvent(`on${type}`, handler) } } 复制代码这个函数存在一个缺点,它每次执行的时候都会去执行if条件分支。虽然开销不大,但是这明显是多余的,下面我们优化一下, 提前一下嗅探的过程: const addEventOptimization = (function() { if (window.addEventListener) { return (el, type, handler) => { el.addEventListener(type, handler, false) } } // for IE if (window.attachEvent) { return (el, type, handler) => { el.attachEvent(`on${type}`, handler) } } })()

这样我们就可以在代码加载之前进行一次嗅探,然后返回一个函数。但是如果我们把它放在公共库中不去使用,这就有点多余了。下面我们使用惰性函数去解决这个问题:

// 惰性加载函数 let addEventLazy = function(el, type, handler) { if (window.addEventListener) { // 一旦进入分支,便在函数内部修改函数的实现 addEventLazy = function(el, type, handler) { el.addEventListener(type, handler, false) } } else if (window.attachEvent) { addEventLazy = function(el, type, handler) { el.attachEvent(`on${type}`, handler) } } addEventLazy(el, type, handler) } addEventLazy(document.getElementById('eventLazy'), 'click', function() { console.log('lazy ') })

一旦进入分支,便在函数内部修改函数的实现,重写之后函数就是我们期望的函数,在下一次进入函数的时候就不再存在条件分支语句。

总结

该文章主要是读《Javascript设计模式》的总结。

代码地址

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/5913a8c609aee9157ff9fd331d6ef6c4.html