简述前端 templating(Mustache, underscore, handlebars)的作用, 怎么用 ？

前端 templating 库（如 Mustache、Underscore、Handlebars 等）的作用是将数据和模板结合生成最终的 HTML 内容，实现数据和 UI 的分离，提高代码的可维护性和可复用性。

这些库通常采用类似于模板语言的语法，通过占位符或特定的语法来表示数据应该插入的位置，然后将数据传入模板中进行渲染，生成最终的 HTML 内容。

以下是一个简单的示例，使用 Handlebars 模板库来展示如何使用前端 templating：

1. 引入 Handlebars 库：<script src="https://cdn.jsdelivr.net/npm/handlebars/dist/handlebars.min.js"></script> Copy
2. 编写 Handlebars 模板：<script id="template" type="text/x-handlebars-template"> <div> <h1>{{title}}</h1> <p>{{content}}</p> </div> </script> Copy
3. 准备数据：var data = { title: "Hello, World!", content: "This is a Handlebars example." }; Copy
4. 编译模板并渲染数据： “`javascript var source = document.getElementById(“template”).innerHTML; var template = Handlebars.compile(source); var html = template(data);

document.getElementById(“output”).innerHTML = html;

“`

在上面的示例中，我们定义了一个 Handlebars 模板，包含了两个占位符 {{title}} 和 {{content}}，然后准备了要插入的数据。通过 Handlebars 库的方法，我们将数据和模板结合生成最终的 HTML 内容，并将其插入到页面中。

使用其他前端 templating 库（如 Mustache、Underscore 等）也类似，只需根据具体的语法和方法进行相应的操作。这样可以更好地组织代码，提高开发效率，并降低代码维护的难度。