持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第2天,点击查看活动详情
是什么
解决这种问题的途径很简单,直接去npm库找到neo-async,看它的说明文档。如下:
(图片来自:www.npmjs.com/package/neo…)
可以直截了当的获取关键信息:
Neo-Async is thought to be used as a drop-in replacement for Async,it almost fully covers its functionality and runs faster.
提取其中的关键词:
- replacement:Async的替代品
- fully covers:完全覆盖Async对应的功能
- runs faster:运行更快
既然提到了它是Async的替代品。那就需要首先知道Async是什么?
(图片来自:github.com/caolan/asyn…)
从图中可以明确Async,它是一个为异步脚本提供相应功能的模块。
学会拆解英文文档的关键词是一项很重要的技能。具体方法参考「我只是用了个“笨”方法,一个月后不再惧怕英文文档」
怎么用
1、在Webpack源码中找到Compilation.js,在其中涉及如图三个方法的应用:
①eachLimit
②forEachLimit
③forEach
2、使用示例代码查看对应方法的实现目的
通过const asyncLib = require("neo-async");的引用进入neo-async的源码如下:
如果不理解方法的含义,又没有完整的文档说明的情况下,使用示例代码来查看相应的逻辑。
使用不掺杂其他业务的示例代码调试起来逻辑会更简洁明了。
3.调用方法的实现过程
function eachLimit(collection, limit, iterator, callback) {
callback = callback || noop; //这里的noop是一个技巧用法,noop意指 no operation,追溯可以看到它的定义是: var noop = function noop() {};
...
if (isArray(collection)) {
size = collection.length;
iterate = iterator.length === 3 ? arrayIteratorWithIndex : arrayIterator; //这个iterator.length的理解比较重要。iterator在这里是function,而不是数组。
//而Function.prototype.length这个Function的内置属性,它指明的是函数的形参个数。这个很多同学在平时工作中用的并不多,多数人用的是 arguments,而这是实参的个数。这一点是很重要的
} else if (!collection) {
...
timesSync(limit > size ? size : limit, iterate);
//arrayIterator和arrayIteratorWithIndex的区别对比可以看出就是一个多了index,一个少了index
//明确内容后反过来可以看名字上也就是多了一个withIndex
//另外这个迭代器还起到了一个作用,就是它承接了done函数的传递任务。单纯的看iterator中的done,并不知道它来自于哪儿。
//在这里才会发现它定义于调用的方法
function arrayIterator() {
if (started < size) { //这里是start的变化点,如果started小于size,那就以此为标准进行遍历,并且传递done
iterator(collection[started++], done);
}
}
...