jQuery 模板 - 我应该把它们放在哪里？

Question

目前我有一个 html 页面，其中有 4 个模板，并且还会有更多模板。是否可以将模板放在不同的文件中并“导入”它们？我可以在 .js 文件中定义它们吗？

我正在使用jQquery模板插件:http://api.jquery.com/category/plugins/templates/

我的代码看起来像示例!

Answer 1

我基本上同意这个答案的说法:Where to keep html templates?由于KISS，您已经在做正确的事情了原理。

根据您最终获得的模板数量(您提到“更多”)，您可能希望将它们与主页分开。造成这种情况的原因有几个。

原因之一还是 KISS 原则。太多的模板可能会使您的源代码难以导航。您的编辑器或 IDE 可能已经介绍了这一点。如果没有，这可能是将您的模板放入单独的文件中的一个很好的理由。

另一个原因是性能。如果您在没有模板的情况下单独提供 HTML 文件，您的页面将到达客户端并更快地开始渲染。您还可以允许客户端缓存一些模板，并仅在模板更改时加载新模板。这将使以后对您网站的访问初始化得更快。

如果性能特别重要，您可以考虑混合使用这两种方法。您可以在 HTML 主页面中包含基本模板，即组装页面基本结构的模板。然后，可以在页面加载后和/或在需要它们之前获取可选模板。要包含基本模板，您可以使用服务器端模板。

关于你最初的问题，关于在哪里存储它们，我说你应该把它们放在对你有意义的地方。然后，参见Dave Ward's article on using external templates with jQuery templates有关如何构建和获取模板的信息。这是基本的代码片段:

// Asynchronously our PersonTemplate's content.
$.get('PersonTemplate.htm', function(template) {

  // Use that stringified template with $.tmpl() and 
  //  inject the rendered result into the body.
  $.tmpl(template, person).appendTo('body');
});

然后，请参阅An Introduction to jQuery Templates, by Stephen Walther并跳转到标题为“远程模板”的部分。他有一个示例，该示例仅获取并编译模板一次，但可以多次渲染。以下是基本片段:

// Get the remote template
$.get("ProductTemplate.htm", null, function (productTemplate) {

    // Compile and cache the template
    $.template("productTemplate", productTemplate);

    // Render the products
    renderProducts(0);
});

function renderProducts() {
    // Get page of products
    var pageOfProducts = products.slice(pageIndex * 5, pageIndex * 5 + 5);

    // Used cached productTemplate to render products
    $.tmpl("productTemplate", pageOfProducts).appendTo("#productContainer");
}