Deno 是一个现代化的 JavaScript 和 TypeScript 运行时,它提供了一种安全的方式来运行 JavaScript 代码。与 Node.js 不同,Deno 自带了一个内置的模块化系统,这使得 Deno 可以更好地管理依赖项。在 Deno 中,我们可以使用模板引擎来渲染视图,并将其用于构建 Web 应用程序。在本文中,我们将介绍如何在 Deno 中使用模板引擎来渲染视图。
安装模板引擎
在 Deno 中,我们可以使用多种模板引擎,如 Handlebars、EJS、Pug 等。在本文中,我们将使用 Handlebars 作为我们的模板引擎。要安装 Handlebars,我们可以使用 Deno 的内置包管理器:
---- ------- ----------
安装完成后,我们可以在我们的代码中引入 Handlebars:
------ ---------- ---- -------------
创建视图
在我们可以开始使用模板引擎之前,我们需要创建一个视图。视图是我们将要渲染的 HTML 页面。我们可以将视图保存在一个单独的文件中,如 views/home.hbs
:
--------- ----- ------ ------ ----- ---------------- ------------------------ ------- ------ ------------------ ---------- -- ------------- ------- -------
在这个视图中,我们使用了 Handlebars 的模板语法来插入变量。变量是由双大括号包裹的字符串。在渲染视图时,我们将提供变量的值。
渲染视图
现在我们已经创建了一个视图,我们可以使用 Handlebars 来渲染它。我们可以在我们的代码中创建一个 render
函数,并使用 Handlebars 的 compile
方法编译视图:
----- -------- ---------------- ------- ----- -------------- ---------- --------------- - ----- ------ - ----- ---------------------------- ----- ---------------- - --------------------------- ------ ----------------------- -
在这个函数中,我们首先使用 Deno.readTextFile
方法读取视图文件的内容。然后,我们使用 Handlebars 的 compile
方法编译视图,并将其返回。
现在我们可以调用 render
函数来渲染我们的视图。我们可以将视图文件的路径和一个对象作为参数传递给 render
函数,这个对象包含我们要插入到视图中的变量。例如,我们可以这样调用 render
函数:
----- ---- - ----- -------------------------- - ------ --- ---- ---- --- ------------------
在这个例子中,我们渲染了 ./views/home.hbs
视图,并将 { title: "My Deno App" }
作为数据传递给视图。这将把 {{title}}
变量替换为 "My Deno App"
。
将视图发送到客户端
现在我们已经成功地渲染了我们的视图,我们可以将其发送到客户端。在 Deno 中,我们可以使用内置的 HTTP 模块来创建 Web 服务器。我们可以创建一个简单的 Web 服务器,并在客户端请求时渲染我们的视图:
------ - ----- - ---- ------- ----- ------ - ------- ----- ---- --- --- ----- ------ --- -- ------- - ----- ---- - ----- -------------------------- - ------ --- ---- ---- --- ------------- ----- ---- --- -
在这个例子中,我们使用 http
模块创建了一个 Web 服务器,并使用 render
函数渲染了我们的视图。然后,我们将渲染后的 HTML 作为响应发送给客户端。
总结
在本文中,我们介绍了如何在 Deno 中使用 Handlebars 模板引擎来渲染视图。我们首先安装了 Handlebars,并创建了一个视图文件。然后,我们编写了一个 render
函数来渲染视图。最后,我们使用内置的 HTTP 模块创建了一个 Web 服务器,并在客户端请求时渲染了我们的视图。通过本文,我们学习了如何在 Deno 中使用模板引擎来构建 Web 应用程序。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/660366b4d10417a222fc8bab