Hapi.js 是一款优秀的 Node.js Web 开发框架，它的高度可扩展性和灵活性深受前端开发者的欢迎。其中，Vision 插件是 Hapi.js 框架中的一个核心插件，它能够帮助我们更好地管理模板渲染、视图文件的读取和渲染、静态文件的处理和压缩等工作，大大提升了我们的 Web 开发效率和网站性能。本文将详细介绍 Vision 插件的使用方法，并提供多个实际的代码示例，帮助读者深入掌握其核心功能。
基本介绍
Vision 插件是 Hapi.js 框架中的一个 View Manager 插件，它的作用是管理视图渲染、静态文件处理、前端资源合并和压缩等工作。在使用 Vision 插件之前，我们需要先安装 Handlebars 引擎或者其他可用的视图引擎。在安装完成后，我们需要注册 Vision 插件并配置服务器视图管理选项，在路由定义时指定视图模板的路径和渲染参数。示例代码如下：
-- -------------------- ---- -------
-- -- ---------- --
--- ------- ------------ ----------
-- ----- ------ --
----- ---- - ----------------------
----- ------ - ------------------------
----- ---------- - ----------------------
----- ------ - -------------
----- -----
----- -----------
---
----- -------- ------------------ -
----- ------------------------
--------------
-------- -
---- ----------
--
----------- ----------
----- -------
---
-
-- ----
--------------
------- ------
----- ----
-------- --------- -- -- -
------ -------------- -
------ -------- ---- ------
-------- -------- -- --------
---
-
---
-------------------在上述代码中，我们首先安装 Handlebars 引擎和 Vision 插件，然后在创建服务器实例时，异步注册 Vision 插件并配置视图管理选项。其中，引擎参数 'hbs' 指定了 Handlebars 名称，'__dirname' 参数指定了视图文件的根目录，'views' 参数指定了视图文件相对于根目录的路径。在路由定义时，我们通过 h.view 方法调用视图模板 'home' 并传递渲染参数。
功能概述
Vision 插件提供了一系列的视图管理函数和工具函数，可以帮助我们更好地处理视图文件、静态资源和前端资源。下面是 Vision 插件的核心功能介绍：
视图渲染
视图渲染是 Vision 插件最基本的功能之一。在 Hapi.js 开发中，我们可以通过视图管理选项配置视图引擎和模板路径，然后在路由处理函数中使用 h.view 方法调用模板并传递参数，从而实现灵活的模板渲染功能。示例代码如下：
-- -------------------- ---- -------
--------------
------- ------
----- ----
-------- --------- -- -- -
------ -------------- -
------ -------- ---- ------
-------- -------- -- --------
---
-
---在上述代码中，我们通过 h.view 方法调用名为 'home' 的模板，并传递两个参数，分别为 'title' 和 'message'。
视图路径
在上面的示例中，视图路径是通过视图管理选项中的 path 参数进行配置的。但在实际开发中，我们可能需要为每个模块或功能定义不同的视图路径，从而实现更灵活的模板渲染功能。Vision 插件提供了视图路径的多种配置方式，可以根据不同的需求选择合适的方式。下面是几种常见的视图路径配置方式：
- 直接配置路径
-- -------------------- ---- -------
--------------
----- ---------
-------- -
---- ----------
-
---
--------------
------- ------
----- --------
-------- --------- -- -- -------------- -
------ ----- ------
-------- -------- -- ------- ---- -----
--
---
--------------
------- ------
----- ---------
-------- --------- -- -- --------------------- -
------ ------ ---- ------
-------- -------- -- ------- ----- ---- -----
--
---在上述示例中，我们直接配置视图根目录为 '/views'，模板文件分别为 'home.hbs' 和 'users/index.hbs'。
- 相对路径配置
-- -------------------- ---- -------
--------------
-------- - ---- ---------- --
----------- ----------
----- -------
---
--------------
------- ------
----- ----
-------- --------- -- -- -------------- -
------ ----- ------
-------- -------- -- ------- ---- -----
--
---
--------------
------- ------
----- ---------
-------- --------- -- -- ----------------------- -
------ ------ ---- ------
-------- -------- -- ------- ----- ---- -----
--
---在上述示例中，我们首先通过 relativeTo 参数指定了视图的根目录为当前文件所在的目录，然后在路由定义时对于 'users' 路径使用了相对路径 './users/index'。
- 动态路径配置
-- -------------------- ---- -------
--------------
------- ------
----- ------------------
-------- --------- -- -- -
----- ---- - --------------------
------ -------------------------------- -
------ -------- ------- ------
-------- -------- -- ------- ------- ------- -----
---
-
---在上述示例中，我们通过路由参数 '{name}' 捕获了访问路径中的项目名称，动态拼接视图路径并渲染模板。
视图变量
视图变量是一个允许我们在视图模板中定义和使用的变量，它在模板渲染过程中充当了数据模型的角色。在 Hapi.js 开发中，我们可以通过视图路由处理函数中的 'context' 参数来传递视图变量。示例代码如下：
-- -------------------- ---- -------
--------------
------- ------
----- ----
-------- --------- -- -- -
----- ------- - -
------ -------- ---- ------
-------- -------- -- ---------
--------- -
- ----- -------- --- ------------ -------- ----------- -- --
- ----- -------- --- ------------ -------- ----------- -- --
- ----- -------- --- ------------ -------- ----------- -- -
-
--
------ -------------- ---------
-
---在上述代码中，我们通过一个对象字面量定义了一个视图变量 'context'，其中包含了标题、消息和项目列表等多个属性。然后将该变量传递给视图路由处理函数的 h.view 方法，从而在 'home' 模板中使用这些属性。
静态文件
在 Web 开发中，静态文件的处理是一项非常重要的工作，它包括对图片、样式、脚本等多种类型的资源进行管理和处理。在 Hapi.js 开发中，我们可以通过 Vision 插件来管理静态文件，其提供了多种静态文件路由配置选项，可以让我们更好地控制静态资源的读取和缓存。示例代码如下：
-- -------------------- ---- -------
--------------
------- ------
----- -------------------
-------- -
---------- -
----- ------------------
-------- -----
------ ----
-
-
---
--------------
------- ------
----- -------------------
-------- -
---------- -
----- ------------------
-------- -----
------ -----
----------- ------ -- -- -----------
---------------- - -- ----- ---- --
-
-
---在上述代码中，我们首先定义了一个静态文件路由 '/static/{param*}'，使其可以映射到对应的 './public/static' 目录下。然后定义了另一个静态文件路由 '/assets/{param*}'，映射到 './public/assets' 目录，并为其配置了更细粒度的选项，其中 etagMethod 和 etagPaddingSize 选项用于控制缓存机制，可以根据需要进行开启或关闭。
前端资源
前端资源包括 CSS、JavaScript、图片等各种类型的资源文件，其管理和处理也是 Web 开发中的重要工作。在 Hapi.js 开发中，我们可以通过 Vision 插件来管理前端资源，并通过工具函数来实现资源合并和压缩等操作，从而提高项目的性能和效率。示例代码如下：
-- -------------------- ---- -------
--------------
------- ------
----- -------------------
-------- -
---------- -
----- ------------------
-------- -----
------ ----
-
-
---
--------------
------- ------
----- -------------------
-------- --------- -- -- -
-- ------------
----- ----- - -------------------------------------- -- -------------------------
-- ------
----- ------- - ---------------- -- -- -- -- ------------------- ----
-- ------
----- -------- - ----------------
-- -----
----- -------- - ---------------------
----------------------------------------
----------------------------------- --------
------ ---------
-
---
----- -------- ------------------ -
----- -----------------------
----- ------------------------
--------------
-------- -
---- ----------
--
----------- ----------
----- -----------
---
-
-------------------在上述代码中，我们首先定义了一个前端资源路由 '/assets/{param*}'，可以映射到 './public/assets' 目录下的所有文件。然后定义了另一个路由 '/bundles/{name*}'，该路由将从请求参数中获取资源文件名列表，并使用数组方法 reduce()将多个 js 文件合并成一个字符串。最后，我们通过另外的工具函数 minify() 压缩生成的 js 文件，并使用 h.response 方法返回响应结果。
总结
通过以上的介绍，我们可以看到 Vision 插件在 Hapi.js 开发中有着非常重要的作用，它能够帮助我们完成诸如视图渲染、静态文件处理、前端资源管理等一系列重要的工作。我们可以根据实际的开发需求和性能要求选择 Vision 插件的不同配置选项和工具函数，从而最大化发挥其作用，提高 Web 应用的效率和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649ada2648841e98947c9775