Question

来自https://github.com/ccoenraets/backbone-jax-cellar/blob/master/WebContent/js/utils.js：

tpl = {

// Hash of preloaded templates for the app
templates: {},

// Recursively pre-load all the templates for the app.
// This implementation should be changed in a production environment. All the template files should be
// concatenated in a single file.
loadTemplates: function(names, callback) {

    var that = this;

    var loadTemplate = function(index) {
        var name = names[index];
        console.log('Loading template: ' + name);
        $.get('tpl/' + name + '.html', function(data) {
            that.templates[name] = data;
            index++;
            if (index < names.length) {
                loadTemplate(index);
            } else {
                callback();
            }
        });
    }

    loadTemplate(0);
},

// Get template by name from hash of preloaded templates
get: function(name) {
    return this.templates[name];
}
};

我应该做点什么

$.get('tpl/all-tpls.html', function(data) { }

获取所有html模板？难道不会不必要地获取一堆HTML吗？我们的应用程序是用Java构建的，我们使用https://github.com/samaxes/minify-maven-plugin来缩小和组合我们的js和css文件。任何方向都会受到赞赏。

Answer 1

简短回答：是的。您应该首先在app load上加载所有模板，以便它们可用。在生产中，这可以与服务正确的远期到期标题组合，以便在访问之间（即1年）为用户缓存模板。然后，您可以使用查询字符串（例如tpl/all-tpls.html?v=001

）来破坏缓存

更长的答案：

出于性能原因，您很可能希望尽可能减少加载时间和请求数量。如果模板已经可用，如果在加载新部分时延迟较少，这也可以帮助应用程序提高响应速度。

组合模板并缓存它们将一直有效，直到您的应用变得非常大。此时，您可能希望分解加载 - 例如，基于应用各部分的组。但是，请考虑这种生命周期性能优化 - 不要仅仅为了它而进行预优化。

生产中的骨干模板

1 个答案: