翻译自wo README
wo是一个基于浏览器的JavaScript模板引擎，与其他流行的模板引擎相比，它非常小巧而简洁，同时具有很高的性能和灵活性。在本文中，我将详细介绍如何在你的应用程序中使用wo。
安装wo
wo是一个npm包，可以使用npm或yarn安装：
# 使用npm安装 npm install wo # 使用yarn安装 yarn add wo
在浏览器中使用wo，你可以下载包含wo源代码的文件，或者使用 unpkg.com，并将它作为一个脚本在HTML文件中引入:
<script src="https://unpkg.com/wo"></script>
wo快速示例
假设你想要创建一个用户界面，用来显示一个列表，这个列表包含用户的信息。在wo中，你可以使用以下类似于HTML的语法来编写模板:
<ul>
<% users.forEach(function(user) { %>
<li><%= user.name %></li>
<% }) %>
</ul>我们可以解析上面的模板，并传入一个名为users的列表，这样就会生成HTML列表，并在每个li中显示名称字段。
-- -------------------- ---- -------
----- -- - --------------
----- ----- - -
- ----- ------- --
- ----- ----- --
- ----- --------- -
--
----- -------- - -
----
-- ---------------------------- - --
------- --------- -------
-- -- --
-----
--
----- -------- - ------------ - ----- ---
----------------------上述代码会在控制台输出以下HTML字符串:
<ul> <li>Alice</li> <li>Bob</li> <li>Charlie</li> </ul>
wo模板语法
wo的模板语法与其他模板引擎类似，包含以下部分：
输出表达式
输出表达式以<% =开头，以%>结尾。例如：
<p>Hello <%= name %>!</p>
输出表达式会将name参数的值插入到生成的HTML代码中，生成的HTML如下：
<p>Hello Alice!</p>
代码块
代码块用于执行JavaScript代码。在代码块中，我们可以声明函数、变量、执行条件语句和循环语句等。代码块以<%开头，以%>结尾。例如：
<% if (isAdmin) { %>
<p>Welcome, admin!</p>
<% } else { %>
<p>Welcome, user!</p>
<% } %>在上面的示例中，我们使用了if语句来根据用户是否是管理员来显示不同的消息。
转义表达式
wo还支持转译表达式，以防止XSS攻击。转义表达式以<% -开头，以%>结尾。例如：
<p>Hello, <%= name %>! Your email address is <%= email %>.</p>
在上面的示例中，我们可以使用转义表达式来转义email字段中的特殊字符：
<p>Hello, Alice! Your email address is alice@example.com.</p>
让wo与其它库一起运行
wo非常灵活，可轻松集成到各种应用程序和框架中。下面将介绍如何将wo集成到常见的库中。
在React应用程序中使用wo
-- -------------------- ---- -------
------ -- ---- -----
-------- ---------- ----- -- -
----- -------- - -
----
-- ---------------------------- - --
------- --------- -------
-- -- --
-----
--
----- -------- - ------------ - ----- ---
------ ---- -------------------------- ------- -------- -- ---
-在上述示例中，我们使用wo的template函数生成HTML字符串，然后将HTML字符串传递到React的dangerouslySetInnerHTML属性中，以将其呈现为DOM元素。
在Vue应用程序中使用wo
-- -------------------- ---- -------
----------
---- -------------------
-----------
--------
------ -- ---- -----
------ ------- -
------ -
------ -
------ -
- ----- ------- --
- ----- ----- --
- ----- --------- -
-
--
--
--------- -
---------- -
----- -------- - -
----
-- ---------------------------- - --
------- --------- -------
-- -- --
-----
--
------ ------------ ------------
-
-
--
---------在Vue中，我们可以使用v-html指令将HTML字符串呈现为DOM元素。
在Angular应用程序中使用wo
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ -- ---- -----
------------
--------- ----------------
--------- -
---- -----------------------------
-
--
------ ----- ----------------- -
----- - -
- ----- ------- --
- ----- ----- --
- ----- --------- -
--
--- ---------- -
----- -------- - -
----
-- ---------------------------- - --
------- --------- -------
-- -- --
-----
--
------ ------------ ------
-
-在Angular中，我们可以使用属性绑定中的元素属性来呈现HTML字符串。
wo进阶使用
wo非常灵活，不仅可以呈现简单的HTML字符串，还可以呈现复杂的组件和布局。下面介绍一些wo的高级用法。
如果想要传递多个参数怎么办？
wo的template函数接受两个参数：模板字符串和模板上下文。如果你的模板上下文包含多个值，则可以将它们打包为一个JSON对象并将其传递给wo。例如：
-- -------------------- ---- ------- ----- -- - -------------- ----- ------- - - ---------- -------- --------- ------------ -- ----- -------- - - ------ --------- -- --- -------- ------ -- ----- -------- - ------------ --------- ----------------------
上面的代码将在控制台输出以下HTML字符串：
<p>Alice Wonderland</p>
如何定义过滤器？
wo的过滤器类似于Angular或Vue的过滤器。过滤器允许你在呈现值之前对它进行格式化或转换。以下是wo中实现过滤器的示例。
-- -------------------- ---- ------- ----- -- - -------------- -- -------------------- ------------------- - --------------- - ------ ----------------- -- ----- ------- - - ------ ----- -- ----- -------- - - ------- ----- - -------- ------ -- ----- -------- - ------------ --------- ----------------------
上述代码将在控制台输出以下HTML字符串：
<p>$16.99</p>
如何定义模板模块？
模板模块使你可以在模板中定义可重用的代码片段，同时还可以接受参数。以下是一个实际示例。我们将创建一个可以接受名字和消息的模板模块，并在主模板中多次调用它。
-- -------------------- ---- -------
----- -- - --------------
--------------- - -------------- -------- -
------ -
-----
-------- --- ---- -------
------ ------- -------
------
--
--
----- ------- - -
----- --------
-------- ---- --- --- -------
--
----- -------- - -
-----
----------- -- -- ---------
--- ---------- -------- --
------- --- ---- ---- -------------
--- ----------- -------- -- --- ------ --
--- --------------- ------- ------- ---- ------------ --
------
--
----- -------- - ------------ ---------
----------------------上述代码将在控制台输出以下HTML字符串：
-- -------------------- ---- -------
-----
----------- -- -- ---------
-----
-------- ----------
------ --- --- -----------
------
------- --- ---- ---- -------------
-----
-------- --------
---------- -- --- ---------
------
-----
-------- ------------
--------- ------- ---- ---------------
------
------如何扩展wo的功能？
wo非常灵活，并且易于扩展。在前面的示例中，我们已经定义了自定义过滤器和模板模块。wo还支持添加函数，可以被模板中的任何代码块调用。以下是一个示例，演示如何定义一个函数来计算一个订单的总价格，并在模板代码块中调用该函数。
-- -------------------- ---- -------
----- -- - --------------
-- --------------------------
-------------------- - --------------- -
------ -------------------- ----- -- ----- -- ----------- ---
--
----- ------- - -
------ -
- ----- -------- ------ ----- --
- ----- ----------- ------ ----- --
- ----- ------ ------ ---- -
-
--
----- -------- - -
-----
--------- ------------
----
-- ---------------------------- - --
------- --------- -- - ---- --------------------- -------
-- -- --
-----
-------- ------ ---- ------------------------------- ------
------
--
----- -------- - ------------ ---------
----------------------上述代码将在控制台输出以下HTML字符串：
-- -------------------- ---- -------
-----
--------- ------------
----
--------- - -----------
------------ - -----------
------- - ----------
-----
-------- ------ ----------
------总结
wo是一个非常灵活的JavaScript模板引擎，可以轻松地与许多现有的应用程序和框架集成。它支持许多各种不同形式的模板语法，包括输出表达式、代码块和转义表达式。wo还支持过滤器和模板模块，可以用于格式化输出和重复使用代码。如果你需要一个性能良好、小巧而简洁的模板引擎，那么wo是一个值得考虑的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671108dd3466f61ffe349