简介
rooby 是一个 JavaScript 的极简式（minimalistic）模板引擎，拥有一个小而精悍的 API，非常适合用于前端开发中。它被优化为浏览器和 Node.js 环境下都能完美运行，是许多前端工程师和开发者的首选。
在本篇教程中，我将会带你学习如何使用 rooby，从安装到编写代码，再到实际使用，全程指导。如果你是一名前端工程师或开发者，并正在寻找一个高效简洁的模板引擎，那么本文将会让你获益匪浅。
安装
在开始之前，我们需要先安装 rooby。使用 npm 可以轻松完成此项任务。在终端中输入以下命令：
npm install rooby
这样就可以将 rooby 安装到你的项目中了。
基本语法
rooby 使用 {{ }} 包裹变量和表达式。下面是一些使用示例：
- 输出元素
{{name}} - 模板中添加 HTML
Hello {{name}} <p>Welcome to my site</p>- 输出数组中的元素
<ul>
{{#each fruits}}
<li>{{this}}</li>
{{/each}}
</ul>- 判断语句
{{#if (isMale)}}
<p>Male</p>
{{else}}
<p>Female</p>
{{/if}}编写代码
下面，我们将来实战演练，让你更好地理解 rooby 的使用方法。
我们假设有一个学生列表，每个学生都有一个名字和一个总分。我们的任务是使用 rooby 模板引擎来生成一个 HTML 表格，其中包含所有学生的姓名和总分。以下是我们的数据结构：
const students = [
{ name: 'Alice', score: 90 },
{ name: 'Bob', score: 80 },
{ name: 'Charlie', score: 70 },
{ name: 'David', score: 60 },
];我们首先需要创建一个 HTML 模板，并将 rooby 插入其中：
-- -------------------- ---- -------
--------- -----
------
------
-------------- --------------
-------
------
----------- -----------
-------
----
-------------
--------------
-----
------- ----------
----
----------------------
-----------------------
-----
---------
--------
-------
-------在模板中，我们使用了 #each 进行循环，将每个学生的姓名和总分显示在表格中。
接下来，我们需要在 JavaScript 中编写代码，渲染模板。我们首先需要加载 rooby：
const rooby = require('rooby');为了将模板和数据合并，我们需要将两者传递给 rooby：
const html = rooby(template, { students });在上面的代码中，我们将模板和数据传递给 rooby，并将渲染结果存储在 html 变量中。
最后，我们可以将 HTML 插入到页面中：
document.body.innerHTML = html;
现在，我们已经成功地使用 rooby 创建了一个学生成绩表格。
指导意义
在本文中，我们介绍了 npm 包 rooby 的功能和用法。当你需要在前端开发中使用一个简洁高效的模板引擎时，rooby 可以轻而易举地实现你的需求。通过学习 rooby 的语法，你可以将数据和模板合并，并通过 rooby 生成HTML页面。希望本文能够对你的前端开发工作起到一定的帮助作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557da81e8991b448d4e6d