使用 JS 和车把编译所有尚未编译的模板

Question

所以我有这个HTML文件，其中包含一堆模板，我想在加载页面开始时编译这些模板。它们可以一次编译所有内容，然后存储到数组中(可能)，或者当您转到 SPA 的页面时，它会编译并存储页面的模板，或者，如果它已经编译，只需查找并使用编译的页面，而无需每次访问时重复编译同一页面。 我正在使用JS和车把.js，你能帮我提供一些关于如何实现目标的建议吗？目前有一个不起作用的函数，我需要修改和实现：

function compile_template(template) {
var template_source;
if (templates_compiled[template] === undefined)
{
template_source = $("#" + template).html();
return Handlebars.compile(template_source);
}
}

那是在按如下方式使用之后：

template = "template_projects";
templates_compiled[template] = compile_template(template);
$("#div_page_data_container").html(templates_compiled[template](page_data));

Answer 1

我不完全确定您问题的根本原因是什么。我怀疑在提供的代码之外存在一些问题，这些问题正在产生影响。

但是，我可以提出一些建议，我相信这些建议将使您的缓存功能更易于使用。

我看到的第一个问题是您的compile_template函数从templates_compiled缓存对象读取但不写入它。这意味着调用compile_template的代码必须"记住"始终将结果从compile_template添加到templates_compiled。

其次，当templates_compiled[template] === undefined计算结果为false时，compile_template不返回任何内容(即undefined)。这会让调用代码负责在调用compile_template之前检查templates_compiled[template]是否有值。compile_template中的条件"泄漏"了缓存查找的抽象，迫使调用代码"知道"compile_template的内部结构。

我会重写缓存函数，以便它是代码中唯一需要了解缓存的部分。下面是一个示例：

const compiledTemplates = {};
function getCompiledTemplate(key) {
if (compiledTemplates[key]) {
return compiledTemplates[key];
}

const templateSource = $(`#${key}`).html();
const compiledTemplate = Handlebars.compile(templateSource);

compiledTemplates[key] = compiledTemplate;

return compiledTemplate;
}
let template;
template = getCompiledTemplate('template_projects'); // template not found in cache, is freshly compiled by Handlebars
template = getCompiledTemplate('template_projects'); // compiled template is returned from `compiledTemplates` cache