neo-async是什么,neo-async怎么用

357 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第2天,点击查看活动详情

是什么

解决这种问题的途径很简单,直接去npm库找到neo-async,看它的说明文档。如下:

image-20220930230425350.png

(图片来自: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是什么?

image-20220930231307909.png

(图片来自:github.com/caolan/asyn…

从图中可以明确Async,它是一个为异步脚本提供相应功能的模块。

学会拆解英文文档的关键词是一项很重要的技能。具体方法参考「我只是用了个“笨”方法,一个月后不再惧怕英文文档

怎么用

1、在Webpack源码中找到Compilation.js,在其中涉及如图三个方法的应用:

①eachLimit

②forEachLimit

③forEach

image-20220930230849966.png

2、使用示例代码查看对应方法的实现目的

通过const asyncLib = require("neo-async");的引用进入neo-async的源码如下: image-20221001063921325.png

如果不理解方法的含义,又没有完整的文档说明的情况下,使用示例代码来查看相应的逻辑。

使用不掺杂其他业务的示例代码调试起来逻辑会更简洁明了。

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);
      }
    }
    ...