有时我的 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)。此代码不可读。有没有办法用干净的代码解决这个问题?
最佳答案
此答案使用 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 样式与 HorizontalSlider
分开,您可以定义 id
属性并将您的 CSS 放在一个单独的 CSS 文件中。您的 HorizontalSlider
将变为:
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;
}
关于javascript - 分离 javascript 和 html 以获得可读代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21900821/