javascript - 使用字符串模板代替 HTML 文件

Question

当我们在 DOJO 中创建我们自己的小部件时，我们为其提供了一个模板文件。并使用 dojo/text 模块加载模板文件。小部件的典型结构如下所示:

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dojo/text!./templates/SomeWidget.html"
], function(declare, _WidgetBase, _TemplatedMixin, template) {

    return declare([_WidgetBase, _TemplatedMixin], {
        templateString: template
    });

});

HTML 模板看起来像这样:

<div class="someClass">
    <div data-dojo-attach-point="titleNode" data-dojo-attach-event="onclick: clickAction">
    Sample Content
    </div>
</div>

如果我们直接将 templateString 作为字符串提供给小部件而不是通过 dojo/text 模块加载它，是否会在性能方面产生任何差异？像这样:

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dojo/text!./templates/SomeWidget.html"
], function(declare, _WidgetBase, _TemplatedMixin, template) {

    return declare([_WidgetBase, _TemplatedMixin], {
        templateString: "<div class=\"someClass\"><div data-dojo-attach-point= \"titleNode\" data-dojo-attach-event= \"onclick: clickAction\">Sample Content</div></div>"
    });

});

此更改是否会导致页面加载速度比以前的方法快？

Answer 1

当使用模块 dojo/text 在您的应用程序中加载 HTML 文件(您的模板)时，会发出网络请求以获取您的 HTML 文件。

所以 dojo/text 在开发者模式下会增加一些网络开销。在这种环境下，这不是真正的问题。

但是当您在生产环境中发布应用程序时，您应该考虑构建它。

dojo 构建过程会自动将所有 HTML 文件作为字符串包含在您正在导出的层中(一个层是一个 JS 文件，它可能是构建过程的一个输出)，因此消除了对 HTML 文件的所有请求，因此他们的网络请求。