jquery 数据模板

基础概念

jQuery 数据模板是一种使用 jQuery 库来动态生成 HTML 内容的技术。它允许开发者通过数据绑定和模板引擎来简化 HTML 的生成过程，从而提高代码的可读性和可维护性。

类型

内联模板：直接在 HTML 中定义模板，使用 jQuery 选择器获取并渲染。
外部模板：将模板定义在外部文件中，通过 AJAX 请求加载并渲染。
模板引擎：使用专门的模板引擎（如 Handlebars、Mustache）结合 jQuery 使用。

应用场景

动态列表生成：根据数据动态生成列表项。
表单填充：根据后端返回的数据填充表单。
复杂页面渲染：对于结构复杂的页面，使用模板可以简化渲染逻辑。

示例代码

以下是一个简单的 jQuery 内联模板示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 数据模板示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="user-list"></div>

    <script>
        // 数据
        var users = [
            { name: 'Alice', age: 25 },
            { name: 'Bob', age: 30 },
            { name: 'Charlie', age: 35 }
        ];

        // 模板
        var template = '<ul>' +
                        '{{#each this}}' +
                        '<li>{{name}} - {{age}}</li>' +
                        '{{/each}}' +
                      '</ul>';

        // 渲染模板
        function renderTemplate(data, template) {
            return Mustache.render(template, { 'this': data });
        }

        // 将渲染结果插入到页面中
        $('#user-list').html(renderTemplate(users, template));
    </script>
</body>
</html>