JS 中的钩子(Hook)实现_javascript 如何封装钩子函数,这份354页笔记的物联网嵌入式开发进阶知识+大厂高频面试题

51 阅读3分钟

while(i) { let fn = fns[--i] let _next = next next = () => fn(...args, _next) } next() }

regHook('asyncSer', (a, b, done) => { setTimeout(() => { console.log('timout 1', a, b); done() }, 1000) }) regHook('asyncSer', (a, b, done) => { setTimeout(() => { console.log('timout 2', a, b); done() }, 2000) }) regHook('asyncSer', (a, b, done) => { setTimeout(() => { console.log('timout 3', a, b); done() }, 3000) })

callAsyncSeries('asyncSer', () => { console.log('done') }, 'aa', 'bb')

// timout 1 aa bb // timout 2 aa bb // timout 3 aa bb // done

function callPromiseSeries(hookName, ...args) { return new Promise(resolve => { const fns = hooks[hookName] let i = fns.length let next = resolve while(i) { let fn = fns[--i] let _next = next next = () => fn(...args).then(_next) } next() }) }

regHook('promiseSer', (a, b) => { return new Promise(resolve => setTimeout(() => { console.log('promiseSer 1', a, b); resolve() }, 2000) ) })

regHook('promiseSer', (a, b) => { return new Promise(resolve => setTimeout(() => { console.log('promiseSer 2', a, b); resolve() }, 3000) ) })

regHook('promiseSer', (a, b) => { return new Promise(resolve => setTimeout(() => { console.log('promiseSer 3', a, b); resolve() }, 1000) ) })

callPromiseSeries('promiseSer', 'aa', 'bb').then(() => { console.log('done') })

// promiseSer 1 aa bb // promiseSer 2 aa bb // promiseSer 3 aa bb // done


复制代码4.3 异步并行钩子的调用



##### 基于回调函数



function callAsyncParallel(hookName, done, ...args) { const fns = hooks[hookName] let count = fns.length let _done = () => { count-- if (count === 0) { done() } } fns.forEach(fn => fn(...args, _done)) }

// 限制并发数 function callAsyncParallelN(hookName, done, N, ...args) { const fns = hooks[hookName] let count = fns.length let cur = 0 let limit = N < fns.length ? N : fns.length let _done = () => { count-- if (count === 0) { done() } else if (cur < fns.length) { fns[cur++](...args, _done) } } for (; cur < limit; cur++) { fns[cur](...args, _done) } }

regHook('asyncParallel', (a, b, done) => { setTimeout(() => { console.log('asyncParallel 1', a, b); done() }, 1000) }) regHook('asyncParallel', (a, b, done) => { setTimeout(() => { console.log('asyncParallel 2', a, b); done() }, 1000) }) regHook('asyncParallel', (a, b, done) => { setTimeout(() => { console.log('asyncParallel 3', a, b); done() }, 1000) })

callAsyncParallel('asyncParallel', () => { console.log('done') }, 'aa', 'bb') callAsyncParallelN('asyncParallel', () => { console.log('done') }, 2, 'aa', 'bb')

function callPromiseParallel(hookName, ...args) { return new Promise(resolve => { const fns = hooks[hookName] let count = fns.length let _done = () => { count-- if (count === 0) { resolve() } } fns.forEach(fn => fn(...args).then(_done)) }) }

// 限制并发数 function callPromiseParallelN(hookName, N, ...args) { return new Promise(resolve => { const fns = hooks[hookName] let count = fns.length let cur = 0 let limit = N < fns.length ? N : fns.length let _done = () => { count-- if (count === 0) { resolve() } else { if (cur < fns.length) { fnscur++.then(_done) } } } for (; cur < limit; cur++) { fnscur.then(_done) } }) }

regHook('promiseParallel', (a, b) => { return new Promise(resolve => setTimeout(() => { console.log('promiseParallel 1', a, b); resolve() }, 1000) ) })

regHook('promiseParallel', (a, b) => { return new Promise(resolve => setTimeout(() => { console.log('promiseParallel 2', a, b); resolve() }, 1000) ) })

regHook('promiseParallel', (a, b) => { return new Promise(resolve => setTimeout(() => { console.log('promiseParallel 3', a, b); resolve() }, 1000) ) })

callPromiseParallel('promiseParallel', 'aa', 'bb').then(() => { console.log('done') }) callPromiseParallelN('promiseParallel', 2, 'aa', 'bb').then(() => { console.log('done') }) 复制代码5. 代码封装 5.1 同步钩子 class Hook { constructor() { this.hookFns = [] } reg(fn) { this.hookFns.push(fn) } call(...args) { this.hookFns.forEach(fn => fn(...args)) } }

class AsyncHook extends Hook { call(...args, done) { const fns = this.hookFns let i = fns.length let next = done while(i) { let fn = fns[--i] let _next = next next = () => fn(...args, _next) } next() } callParallel(...args, done) { const fns = this.hookFns let count = fns.length let _done = () => { count-- if (count === 0) { done() } } fns.forEach(fn => fn(...args, _done)) } callParallelN(...args, done) { const fns = this.hookFns let count = fns.length let cur = 0 let limit = N < fns.length ? N : fns.length let _done = () => { count-- if (count === 0) { done() } else if (cur < fns.length) { fns[cur++](...args, _done) } } for (; cur < limit; cur++) { fns[cur](...args, _done) } } } 复制代码5.3 异步 Promise 钩子 class PromiseHook extends Hook { call(...args) { return new Promise(resolve => { const fns = this.hookFns let i = fns.length let next = resolve while(i) { let fn = fns[--i] let _next = next next = () => fn(...args).then(_next) } next() }) } callParallel(...args) { return new Promise(resolve => { const fns = this.hookFns let count = fns.length let _done = () => { count-- if (count === 0) { resolve() } } fns.forEach(fn => fn(...args).then(_done)) }) } callParallelN(...args) { return new Promise(resolve => { const fns = this.hookFns let count = fns.length let cur = 0 let limit = N < fns.length ? N : fns.length let _done = () => { count-- if (count === 0) { resolve() } else { if (cur < fns.length) { fnscur++.then(_done) } } } for (; cur < limit; cur++) { fnscur.then(_done) } })

收集整理了一份《2024年最新物联网嵌入式全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升的朋友。 img img

如果你需要这些资料,可以戳这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!