npm 包 broccoli-tree-traverser 使用教程

什么是 broccolo-tree-traverser

Broccoli-tree-traverser 是一个 NPM 包，它提供的是对 Broccoli 的树结构进行遍历的模块。Broccoli 是一个基于文件系统的构建工具，但是在要对项目进行 Builder 时，需要我们对整个项目生成一颗树，才可以进行各种操作。而这颗树也是我们以后会频繁操作到的。

安装方法

--- ------- ----------------------- ----------

如何遍历树

使用 broccoli-tree-traverser 进行遍历的方法非常简单，它只提供了一个函数 accept(tree, visitor)，可以传入一个木头结构和一个访问者的函数。在访问者函数中，定义节点被访问的行为。当访问者遍历到一个节点时，只要调用一下 accept(Node, visitor) 就可以遍历到当前节点的子树。这样递归进行就能遍历整个树了。因为遍历是传入 Visitor，所以 Visitor 的返回值可以决定是否需要遍历子树或是停止遍历。

----- --------- - ----------------------------------
---------------------- --------
-- --------
----- --------- - ----------------------------------
----- -- - --------------
----- ---- - ----------------

-- ------------------
-------- --------------- -
    ----------------------------
    ------ -----
-

-- -----
----- ---- - -
    --------- ----
    --------- -
        -
            --------- ----
            --------- -
                -
                    --------- ------
                    --------- -
                        -
                            --------- --------
                            --------- -
                                -
                                    --------- ----------
                                    --------- -
                                        -
                                            --------- ------------
                                            ---------- -----------
                                            ----------- -----------
                                            ------------ -----
                                        -
                                    -
                                -
                            -
                        -
                    -
                --
                -
                    --------- --------
                    --------- --
                -
            -
        --
        -
            --------- --------
            --------- -
                -
                    --------- ------------
                    --------- --
                -
            -
        --
    -
-

-- ------------------
---------------------- -----------

遍历的同时修改节点

Broccoli-tree-traverser 在遍历时，可以同时进行节点的修改，在遍历访问者的拓展接口上，它还提供了一个 enter 函数，可以在进入节点时进行修改。同时，还可以用 leave 函数，在离开节点时进行修改。node 的最终状态，就是 enter 和 leave 函数重写后的结果。 

-- --------
----- --------- - ----------------------------------
----- -- - --------------
----- ---- - ----------------

-- ------------------
-------- --------------- -
    ----------------------------
    ------ -----
-

-- ----------------------------------
-------- ------------- -
    -------------- -- -------
    ------ -----
-

-------- ------------- -
    --------------- -- -------
    ------ -----
-

-- -----
----- ---- - -
    --------- ----
    --------- -
        -
            --------- ----
            --------- -
                -
                    --------- ------
                    --------- -
                        -
                            --------- --------
                            --------- -
                                -
                                    --------- ----------
                                    --------- -
                                        -
                                            --------- ------------
                                            ---------- -----------
                                            ----------- -----------
                                            ------------ -----
                                        -
                                    -
                                -
                            -
                        -
                    -
                --
                -
                    --------- --------
                    --------- --
                -
            -
        --
        -
            --------- --------
            --------- -
                -
                    --------- ------------
                    --------- --
                -
            -
        --
    -
-

-- ----------------
---------------------- ---------- -
    ------ --------
    ------ -------
---

-------------------------------- ----- ---

遍历子树，或是跳过子树的某个节点

在被访问者回调的同时，返回一个 boolean 值。如果返回 true，那么会访问子树，之后进入子树会存在一个遍历的指针；如果返回 false，那么将不会访问子树。如果使用 async/runinng.run 抛出异常，则遍历将被立即跳出。

-- --------
----- --------- - ----------------------------------
----- -- - --------------
----- ---- - ----------------

-- ------------------
-------- --------------- -
    ----------------------------
    ------ -----
-

-- -----
----- ---- - -
    --------- ----
    --------- -
        -
            --------- ----
            --------- -
                -
                    --------- ------
                    --------- -
                        -
                            --------- --------
                            --------- -
                                -
                                    --------- ----------
                                    --------- -
                                        -
                                            --------- ------------
                                            ---------- -----------
                                            ----------- -----------
                                            ------------ -----
                                        -
                                    -
                                -
                            -
                        -
                    -
                --
                -
                    --------- --------
                    --------- --
                -
            -
        --
        -
            --------- --------
            --------- -
                -
                    --------- ------------
                    --------- --
                -
            -
        --
    -
-

-- ------------------
-- ------------------------------------ ------
-------- ----------------------- -
    ----------------------------
    -- ---------------- --- ---------- -
        ------ ------
    -
    ------ -----
-

---------------------- -------------------

总结

以上就是 broccoli-tree-traverser 的使用教程。通过简单的示例，我们了解了它在树的结构里，提供的遍历方法以及节点修改的方法，这都是在 Broccoli Builder 这样的复杂构建器中非常有用的工具。再次强调，Broccoli-tree-traverser 是一个非常不错的 NPM 包，可供开发者参考及使用。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c89ccdc64669dde5183

阅读全文

猜你喜欢

  • npm 包 browser-run2 使用教程

    前端开发过程中，浏览器兼容性调试是一件非常麻烦的事情。为了解决这个问题，我们可以使用 npm 包 browser-run2。本文将详细介绍该包的使用方法，并提供示例代码。

    4 年前
  • npm 包 browser-runner 使用教程

    介绍 browser-runner 是一个基于 Node.js 的命令行工具，用于自动化和简化在浏览器中运行测试的过程。它能够帮助我们在命令行中启动任意的浏览器并打开指定网址，还可以监听指定的目录下的...

    4 年前
  • npm 包 browser-script-loader 使用教程

    随着 Web 应用越来越复杂，前端开发人员需要使用越来越多的 JavaScript 库和框架来构建应用。而每次将这些库和框架引入到项目中可能会比较麻烦，特别是当你需要在浏览器中使用这些库时。

    4 年前
  • npm 包 browser-scss 使用教程

    本文将介绍一款常用的 npm 包 browser-scss，它可以将 scss 文件在浏览器端编译成 css，方便前端工程师使用和调试。 安装 你可以使用 npm 安装 browser-scss，生成...

    4 年前
  • npm 包 broadband-map 使用教程

    随着互联网的普及，越来越多的人都开始使用互联网，网络带宽也随之得到了很大的提升。而作为前端开发人员，我们也需要了解一些网络带宽相关的知识，以便更好地开发应用。其中，npm 包 broadband-ma...

    4 年前
  • npm 包 brreg-regnr-search 使用教程

    介绍 brreg-regnr-search 是一款基于 Node.js 平台的 npm 包，旨在提供一种便捷的方式查询挪威企业注册号。它可以轻松地通过企业名称、地址、邮政编码等信息搜索到相关企业的注册...

    4 年前
  • npm 包 brsass 使用教程

    在前端开发中，样式是其中一个重要的方面之一。为了实现样式的复用和组件化，我们通常会使用 CSS 预处理器来编写样式，其中 SCSS 是一种比较流行的预处理器。而在使用 SCSS 时，我们一般需要编译成...

    4 年前
  • npm 包 brsh-process-module 使用教程

    前言 在前端开发中，有很多重复性的任务需要处理，例如：图片的压缩、尺寸的调整、代码的合并压缩等。如果每次都手动处理，不仅效率低下，而且会出现错误。因此，我们需要使用一些工具或者 npm 包来帮助我们自...

    4 年前
  • npm包 Bruce 使用教程

    npm 包是现代 Web 开发中必不可少的工具，可以充分利用开源社区中的各种资源来提高工作效率。而 Bruce 则是一个非常强大的 npm 包，提供了许多有用的功能，可以帮助前端开发人员快速创建和搭建...

    4 年前
  • npm 包 browser-serialport 使用教程

    随着 IoT 技术的飞速发展，串口通信在物联网应用中的作用越来越重要。而在前端领域，也有很多与串口通信相关的应用场景。比如，我们可能需要在 Web 应用中与一些设备进行通信，此时，使用 npm 包 b...

    4 年前
  • npm 包 browser-serialport2 使用教程

    在前端开发中，有时需要通过串口与其他硬件设备进行通信，这时候就需要用到串口库。而 browser-serialport2 就是一个能在浏览器中使用的串口库。本文将会介绍使用 browser-seria...

    4 年前
  • npm 包 browser-session-store 使用教程

    介绍 browser-session-store 是一个用于在浏览器端存储数据的 npm 包，它使用浏览器的 sessionStorage 和 localStorage 来存储数据。

    4 年前
  • npm 包 browser-signal-processing 使用教程

    正文 在前端开发中，有一些与信号处理相关的任务需要处理。比如音频分析、音频生成、图像处理等。不过这些任务一般不是浏览器原生支持的功能。为了解决这个问题，我们可以使用一个npm包——browser-si...

    4 年前
  • npm 包 browser-size 使用教程

    简介 browser-size 是一个基于 Node.js 运行时间的 npm 包，主要用于获取当前网页窗口的尺寸。该包可以用于前端 web 应用的开发，可以帮助我们更好地适配不同尺寸的设备，提升用户...

    4 年前
  • npm 包 browser-soap 使用教程

    如果你曾经在前端开发中需要与 SOAP 服务进行交互，那么你一定会遇到使用 XMLHttpRequest 或 fetch 进行 SOAP 请求的问题。不过，有一个 npm 包叫做 browser-so...

    4 年前
  • npm 包 brsocket-angular2 使用教程

    brsocket-angular2 是一个基于 WebSocket 协议的前端 Angular2 库，它提供了一种轻松简便的方式来实现实时通信。本文将详细介绍 brsocket-angular2 的使...

    4 年前
  • npm包“brsocket-node”的使用教程

    如果你是一名前端开发者，特别是在处理大规模数据时，你可能会需要实时通信的模块来加速你的工作。此时“brsocket-node”这个npm包就为你提供了一种简单而高效的解决方案。

    4 年前
  • npm包broil使用教程

    在前端开发中，如何优化网站或Web应用程序的性能是一个重要的问题。每个网站或应用程序都希望能够更快更高效的运行，提高用户的体验。但如何实现这一点呢？ Broil是一个帮助前端开发人员优化网站性能的np...

    4 年前
  • npm包bro-ids使用教程

    前言 随着网络攻击和安全问题的不断增加，网络安全越来越受到人们的关注。在此背景下，Bro-IDS作为一个高效的网络安全监控平台，被越来越多的企业所青睐。 Bro-IDS是一个功能强大的网络安全监控平台...

    4 年前
  • NPM包 broadcast-center使用教程

    在前端开发过程中，有时候需要使用消息广播等机制，将一条消息通知到多个组件内，对于这种情况，我们可以使用npm包 broadcast-center。 本文将详细说明如何使用 npm 包 broadcas...

    4 年前

相关推荐

    暂无文章