29、tapable(5)——SyncLoopHook

最新推荐文章于 2024-08-08 01:09:18 发布

2024路在何方

最新推荐文章于 2024-08-08 01:09:18 发布

阅读量721

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端 webpack4.0 webpack学完这些就够了文章标签： SyncLoopHook tapable 流钩子 webpack

版权归作者所有，如需转载，请联系作者

本文链接：https://blog.youkuaiyun.com/qq_17175013/article/details/87104418

前端同时被 3 个专栏收录

68 篇文章

订阅专栏

webpack4.0

32 篇文章

订阅专栏

webpack学完这些就够了

29 篇文章

订阅专栏

本文详细介绍了SyncLoopHook的工作原理及其实现方式，通过具体示例展示了如何使用SyncLoopHook来处理循环同步任务，直到遇到返回undefined的监听函数才停止执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SyncLoopHook

SyncLoopHook,同步遇到某个不返回undefined的监听函数，就重复执行

SyncLoopHook的使用

let {SyncLoopHook} = require('tapable');//SyncLoopHook,同步遇到某个不返回undefined的监听函数，就重复执行

class Lesson{
	constructor(){
		this.index = 0;
		this.hooks = {
			arch: new SyncLoopHook(['name'])
		}
	}
	tap(){
		this.hooks.arch.tap('node',(name) => {
			console.log('node',name)
			return ++this.index === 3? undefined : '继续学';
		})
		this.hooks.arch.tap('react',(data) => {
			console.log('react',data)
		})
	}
	start(){
		this.hooks.arch.call('yuhua');
	}
}

let l = new Lesson();
l.tap();
l.start();

SyncLoopHook原理实现

class SyncLoopHook {//钩子是同步的
	constructor(args){//args => ['name']
		this.tasks = [];
	}
	call(...args){
		this.tasks.forEach((task) => {
			let ret;
			do{
				ret = task(...args);
			}while(ret !== undefined);
		})
	}
	tap(name,task){
		this.tasks.push(task);
	}
}

let hook = new SyncLoopHook(['name']);
let total = 0;
hook.tap('react',function(name){
	console.log('react',name)
	return ++total === 3? undefined :'继续学';
})
hook.tap('node',function(name){
	console.log('node',name)
})
hook.tap('webpack',function(name){
	console.log('node',name)
})
hook.call('yuhua');