jquery 模板

jQuery 模板的基本概念

jQuery 模板是一种用于动态生成 HTML 结构的技术，通常用于将数据绑定到预定义的 HTML 模板中。虽然 jQuery 本身没有内置的模板引擎，但可以通过插件或手动拼接字符串实现。

使用字符串拼接生成模板

通过拼接字符串和变量，可以直接生成 HTML 结构。

var data = { name: "John", age: 30 };
var html = '<div class="user"><h2>' + data.name + '</h2><p>Age: ' + data.age + '</p></div>';
$("#container").append(html);

使用 jQuery 的 $.tmpl()（需引入 jQuery Templates 插件）

jQuery 曾有一个官方模板插件 jquery.tmpl.js，但已不再维护。

<script src="https://cdn.jsdelivr.net/npm/jquery.tmpl@1.0.0/jquery.tmpl.min.js"></script>
<script>
  var data = { name: "Alice", age: 25 };
  var template = '<div class="user"><h2>${name}</h2><p>Age: ${age}</p></div>';
  $.tmpl(template, data).appendTo("#container");
</script>

使用现代模板引擎（如 Handlebars.js）

现代模板引擎如 Handlebars 或 Mustache 更强大且易于维护。

<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.min.js"></script>
<script>
  var data = { name: "Bob", age: 28 };
  var source = '<div class="user"><h2>{{name}}</h2><p>Age: {{age}}</p></div>';
  var template = Handlebars.compile(source);
  $("#container").append(template(data));
</script>

使用 ES6 模板字符串

如果项目支持 ES6，可以直接使用模板字符串。

const data = { name: "Eve", age: 22 };
const html = `<div class="user"><h2>${data.name}</h2><p>Age: ${data.age}</p></div>`;
$("#container").append(html);

选择建议

• 简单场景：使用字符串拼接或 ES6 模板字符串。
• 复杂数据绑定：推荐 Handlebars 或类似模板引擎。
• 遗留项目：可考虑 jquery.tmpl，但需注意兼容性。

以上方法均能实现 jQuery 模板功能，选择时需根据项目需求和技术栈决定。