javascript - 分离 javascript 和 html 以获得可读代码

Question

有时我的 javascript 代码与 html 和 css 混合在一起。在这种情况下，我的代码不可读。如何在 javascript 中分离 javascript 和 html 端？

例如:(使用 javascript dojo 工具包)

addLayer: function (layer, index) {                
var layerClass = layer.visible === true ? 'layer checked' : 'layer';
var html = '';
html += '<li class="' + layersClass + '">';
html += '<div class="cover"></div>';
html += '<span tabindex="0" class="info" title="MyTitle"></span>';
html += '<span tabindex="0" class="toggle box"></span>';
html += '<div class="clear"></div>';                    
html += '</li>';
var node = dom.byId('layersList');
if (node) {
    domConstruct.place(html, node, "first");
    HorizontalSlider({
        name: "slider",
        value: parseFloat(layer.opacity),
        minimum: 0,
        maximum: 1,
        showButtons: false,
        discreteValues: 20,
        intermediateChanges: true,
        style: "width:100px; display:inline-block; *display:inline; vertical-align:middle;",
        onChange: function (value) {
            layer.setOpacity(value);
        }
    }, "layerSlider" + index);

    if (!this.layerInfoShowClickHandler) {
        this.layerInfoShowClickHandler = on(query(".listMenu"), ".cBinfo:click, .cBinfo:keyup", this._onLayerInfoShowIconClicked);
    }
}                 
}

在这种情况下，我的代码正在动态添加 html 以查看端。将事件处理程序添加到创建的 html 代码中。同时添加其他工具(HorizantalSlider)。此工作流程相互绑定(bind)。此代码不可读。有没有办法用干净的代码解决这个问题？

Answer 1

此答案使用 Dojo 将 HTML + CSS 从 JavaScript 中分离出来。

HTML 模板

推荐的方法是在单独的 HTML 文件中定义 HTML 模板。例如:

<li class="{layersClass}">
    <div class="cover"></div>
    <span tabindex="0" class="info" title="MyTitle"></span>
    <span tabindex="0" class="toggle box"></span>
    <div class="clear"></div>
</li>

另请注意用占位符替换了 layersClass。

---

加载 HTML 模板

现在，要加载模板，您可以使用 dojo/text插入。使用此插件，您可以加载外部模板，例如使用:

require(["dojo/text!./myTemplate.html"], function(template) {
    // The "template" variable contains your HTML template
});

---

转换占位符

要替换 {layersClass}，您可以使用 replace() dojo/_base/lang 模块的功能。您的代码最终将如下所示:

require(["dojo/text!./myTemplate.html", "dojo/_base/lang"], function(myTemplate, lang) {
    var html = lang.replace(myTemplate, {
        layersClass: layersClass
    });
});

这将返回与您的 html 变量完全相同的结果，但将 HTML 与您的 JavaScript 代码分开。

---

独立的 CSS

要将 CSS 样式与 Horizo​​ntalSlider 分开，您可以定义 id属性并将您的 CSS 放在一个单独的 CSS 文件中。您的 Horizo​​ntalSlider 将变为:

HorizontalSlider({
    name: "slider",
    value: parseFloat(layer.opacity),
    minimum: 0,
    maximum: 1,
    showButtons: false,
    discreteValues: 20,
    intermediateChanges: true,
    id: "mySlider",
    onChange: function (value) {
        layer.setOpacity(value);
    }
}, "layerSlider" + index);

现在您可以使用以下 CSS:

#mySlider {
    width:100px;
    display:inline-block;
    *display:inline;
    vertical-align:middle;
}