什么是 ml-template-basic？
ml-template-basic 是一个基于浏览器的 JavaScript 库，其用途是提供一个简单的、易于修改的模板引擎，适用于一般的 HTML 模板需求。
它可以帮助你快速生成 HTML 代码，而不用手动创建 DOM 元素。您只需要设计 HTML 模板，然后使用 ml-template-basic 插入数据即可。
安装 ml-template-basic
在终端命令行界面上运行以下指令：
npm install ml-template-basic
使用 ml-template-basic
首先在 HTML 中，需要使用 script 标签引入 ml-template-basic 库：
<script src="./node_modules/ml-template-basic/index.js"></script>
接下来，需要在 JavaScript 中编写 ml-template-basic 的相应代码。下面是一个简单的例子：
-- -------------------- ---- -------
----- -------- - -
--- ----------
------- -------
-----------------
---------
-----
--
----- ---- - -
------ ------ --- ----- --- ----- ----
--
----- ---- - ------------------------- ------
----------------------- - -----在这个例子中，我们首先定义了模板的字符串格式，它包含了一些占位符，例如 {{#each items}} 和 {{/each}}，以及 {{this}}。这些占位符表示我们所期望的数据在哪里。
然后定义了我们要填充的数据对象，即 data。它是一个普通的 JavaScript 对象，其中的 items 是一个数组，这个数组将会填充到模板的相应占位符中。
最后，我们调用了 mlTemplateBasic 函数，将模板和数据对象传递给它。mlTemplateBasic 会将模板中的占位符替换为数据对象中的相应值，最终生成一个 HTML 字符串。
占位符
在 ml-template-basic 中，有两种占位符：
- 变量占位符：{{变量名}}
- 循环占位符：{{#each 数组}}{{/each}}
变量占位符用于在模板中表示要填充的数据，它们将被替换为数据对象中相应的值。例如，如果你的数据对象是这样的：
{
title: 'My HTML template',
user: {
name: 'John',
email: 'john@example.com',
},
}那么，在模板中可以这样使用变量占位符：
<h1>{{title}}</h1>
<p>Welcome, {{user.name}}!</p>当 mlTemplateBasic 将模板和数据对象传入时，它将生成以下 HTML 代码：
<h1>My HTML template</h1> <p>Welcome, John!</p>
循环占位符用于在模板中表示要重复的数据。它们应该被包裹在一个 {{#each 数组}} 和 {{/each}} 对之间，其中数组表示要遍历的数据。
例如，如果你的数据对象是这样的：
{
items: ['item 1', 'item 2', 'item 3'],
}那么，在模板中可以这样使用循环占位符：
<ul id="list">
{{#each items}}
<li>{{this}}</li>
{{/each}}
</ul>当 mlTemplateBasic 将模板和数据对象传入时，它将生成以下 HTML 代码：
<ul id="list"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>
在循环占位符内部，{{this}} 表示当前遍历到的数据项的值。
进阶用法
自定义循环占位符内的变量名
默认情况下，循环占位符内的数据会被赋值到一个名为 this 的变量中。如果你希望使用自定义的变量名可以这样写：
{{#each items as item}}
<li>{{item}}</li>
{{/each}}这样，每次循环时，{{this}} 将会被替换为当前项的值，而 {{item}} 将会被替换为当前项的值。
自定义变量占位符开始和结束字符
默认情况下，变量占位符是以两个花括号包裹的，如 {{title}}。如果你需要使用非默认字符，可以这样做：
const template = `
<h1>{{=title}}</h1>
<p>Welcome, {{=user.name}}!</p>
`;
const html = mlTemplateBasic(template, data, { varStart: '{{=', varEnd: '}}' });这样，当 mlTemplateBasic 遇到 {{= 开始时，它将会将其中的变量名视为一个变量占位符。同样地，当它遇到 }} 结尾时，也会将其视为变量占位符。
辅助函数
ml-template-basic 本身只提供了最基础的模板功能，但你可以使用 JavaScript 的辅助函数来扩展 ml-template-basic 的能力。这些函数可以在模板中使用，并且将在执行模板时被调用。
例如，你可以这样使用一个辅助函数：
-- -------------------- ---- -------
----- ------- - -
------- ----- -- -
------ --------------------- -- -
------ ----------------------- - -----------------
------------
--
--
----- -------- - -
------------ -------- --- --------- ----------------------
--
----- ---- - ------------------------- - ------ ------ ------- -- - ------- ---在这个例子中，我们定义了一个名为 invert 的函数，并将它传递给了 mlTemplateBasic。在模板中，我们使用了 {{#invert title}}{{/invert}} 占位符，这会调用 invert 函数，并把 title 的值作为参数传递给它。invert 函数会将 title 的字符一个个取出来，并将其 ASCII 码值反转。最终生成的 HTML 含有：
<p>Hello world! inverted is: Svool dliow!</p>
除了这个例子，你还可以使用其他任意的 JavaScript 函数来扩展 ml-template-basic 的功能。
总结
使用 ml-template-basic 可以帮助你快速生成 HTML 代码。在模板中，你可以使用变量占位符和循环占位符，以及使用 JavaScript 辅助函数来扩展 ml-template-basic 的能力。
虽然 ml-template-basic 的模板功能相对简单，但它很容易上手，并可以完成绝大部分常规的 HTML 模板需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbc1ab5cbfe1ea06119d3