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

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

例如：（使用javascript dojo工具包）

addLayer:函数（层，索引）{
var layerClass=layer.visible==true？'layer checked'：'layer'；
var html=''；
html+='
”；
html+=''；
html+=''；
html+=''；
html+=''；
html+='
'；
var node=dom.byId（'layersList'）；
如果（节点）{
位置（html，节点，“第一”）；
水平滑块({
名称：“滑块”，
值：parseFloat（图层不透明度），
最低：0，
最大值：1，
显示按钮：错误，
离散值：20，
中间变化：是的，
样式：“宽度：100px；显示：内联块；*显示：内联；垂直对齐：中间；”，
onChange：函数（值）{
图层设置不透明度（值）；
}
}“分层滑翔机”+指数）；
如果（！this.layerInfoShowClickHandler）{
this.layerInfoShowClickHandler=on（查询（“.listMenu”），“.cBinfo:click，.cBinfo:keyup”，this.\u onlayerinfoshowIConclick）；
}
}                 
}

在本文中，我的代码是动态地将html添加到视图端。向创建的html代码添加事件处理程序。同时添加其他工具（HorizantalSlider）。

---

此工作流彼此绑定。这段代码不可读。有没有办法用干净的代码来解决这个问题？

考虑使用模板来构建动态视图元素

例如：

一种方法是使用HTML（如果您不喜欢分割逻辑，就没有那么酷）：

另一种方法是转义字符串换行符：

var 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>'; //don't forget to escape possible textual single-quotes in your string

var-html=\
\
\
\
\
\
'//不要忘记在字符串中转义可能的文本单引号

此答案使用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}

，可以使用

dojo/\u 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

分开，可以定义一个属性，然后将CSS放在一个单独的CSS文件中。您的

水平滑块将变成：

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{
宽度：100px；
显示：内联块；
*显示：内联；
垂直对齐：中间对齐；
}
您可以将
html
变量存储在不同的位置，比如说存储在名为
template.js
的文件中。但是，这样做不能立即连接HTML字符串，因为需要注入此
layersClass
变量。以下是一个可能的解决方法：

// template.js

var template = function () {
    return [
        '<li class="', this.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>'
    ].join('');
};

有效且易于使用。但是，如果希望使用字符串形式的模板而不是函数形式的模板，则需要模板解析器。下面的一个将给出与上面相同的结果（请注意，IE7
split（）
）不支持正则表达式捕获）：

用法示例：

var template = '<b>{{text}}</b>';
var compiled = compile(template);
// compiled -> function () {
//     return ["<b>",this["text"],"</b>"].join("");
// }
var html1 = compiled.call({ text: 'Some text.' });
var html2 = compiled.call({ text: 'Bold this.' });
// html1 -> "<b>Some text.</b>"
// html2 -> "<b>Bold this.</b>"

//product.tpl.js
product.tpl=[
'',
'',
“{{name}}-${{price}}”，
'',
''
];

//product.view.js
var html=[]；
var compiled=compile（product.tpl）；
对于（变量i=0，l=product.data.length；i

演示：

更多详细信息请参见：


这个
compile
函数可能不足以满足您的需要，我的意思是，您可能很快需要一些更强大的功能，例如包括条件结构。在这种情况下，您可以查看或谷歌。
在何处以及如何使用
水平滑块
？我的意思是
HorizontalSlider
的构建方式还是
html
变量的问题？这种方式与在dojo中创建基于模板的小部件的方式相同吗？除此之外还有什么区别？这很相似，但基于模板的小部件使用另一个解析器。在本例中，我使用了
dojo/\u base/lang:：replace（）
，但基于模板的小部件使用了一个单独的解析器，它还解释
数据dojo附加点
和
数据dojo附加事件
属性。占位符表示法也略有不同，因为在模板中您将使用
${layerClass}
，而现在我们做了类似的事情，但没有美元符号
$
（但是您可以使用
dojo/\u base/lang
覆盖模式）。
require(["dojo/text!./myTemplate.html", "dojo/_base/lang"], function(myTemplate, lang) {
    var html = lang.replace(myTemplate, {
        layersClass: layersClass
    });
});

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);

// template.js

var template = function () {
    return [
        '<li class="', this.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>'
    ].join('');
};

function compile(tpl) {
    tpl = Array.prototype.join.call(tpl, '').split(/{{(.*?)}}/);
    return Function('return [' + tpl.map(function (v, i) {
        if (i % 2) return 'this["' + v + '"]';
        return v && '"' + v.replace(/"/g, '\\"') + '"';
    }).join(',') + '].join("");');
}

var template = '<b>{{text}}</b>';
var compiled = compile(template);
// compiled -> function () {
//     return ["<b>",this["text"],"</b>"].join("");
// }
var html1 = compiled.call({ text: 'Some text.' });
var html2 = compiled.call({ text: 'Bold this.' });
// html1 -> "<b>Some text.</b>"
// html2 -> "<b>Bold this.</b>"

// product.data.js

product.data = [{ 
    name: 'Apple iPad mini', 
    preview: 'ipadmini.jpeg', 
    link: 'ipadmini.php',
    price: 280
}, { 
    name: 'Google Nexus 7',
    preview: 'nexus7.jpeg', 
    link: 'nexus7.php',
    price: 160
}, { 
    name: 'Amazon Kindle Fire',
    base64: 'kindlefire.jpeg', 
    link: 'kindlefire.php',
    price: 230
}];