分离javascript和html可读代码 [英] separating javascript and html for readable code

问题描述

有时我的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 =0class =infotitle =MyTitle>< / span>'; 
 html + ='< span tabindex =0class =toggle box>< / span>'; 
 html + ='< div class =clear>< / div>'; 
 html + ='< / li>'; 
 var node = dom.byId（'layersList'）; 
 if（node）{
 domConstruct.place（html，node，first）; 
 Horizo​​ntalSlider（{
 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： 
 onChange：function（value）{
 layer.setOpacity（value）; 
} 
}，layerSlider+ index）; 
 
如果（！this.layerInfoShowClickHandler）{
 this.layerInfoShowClickHandler = on（query（。listMenu），.cBinfo：click，.cBinfo：keyup，this._onLayerInfoShowIconClicked） ; 
} 
} 
} 
  

在这种情况下，我的代码正在动态添加html来查看端。添加事件处理程序来创建html代码。同时添加其他工具（HorizantalSlider）。
此工作流彼此绑定。此代码无法读取。有没有办法用干净的代码解决这个问题？

解决方案

这个答案使用Dojo从JavaScript中分割你的HTML + CSS。 / p>

HTML模板

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

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

另请注意，替换 layersClass 占位符。

---

加载HTML模板

现在，加载您使用 dojo / text 插件。使用此插件，您可以加载外部模板，例如使用以下方式：

  require（[dojo / text！./ myTemplate。 html]，function（template）{
 //template变量包含你的HTML模板
}）; 
  





---

转换占位符

要替换 {layersClass} ，可以使用 替换（） 函数的 dojo / _base / lang 模块。您的代码最终将如下所示：

  require（[dojo / text！./ myTemplate.html，dojo / _base / lang]，function（myTemplate，lang）{
 var html = lang.replace（myTemplate，{
 layersClass：layersClass 
}）; 
}）; 
  

这将返回与您的 html 变量，但是从您的JavaScript代码中分离出HTML。

---

分离CSS

要从您的 Horizo​​ntalSlider 中分离CSS样式，您可以定义一个 id 属性，只需将您的CSS放在一个单独的CSS文件中。您的 Horizo​​ntalSlider 将成为：

  Horizo​​ntalSlider（{
 name ：slider，
 value：parseFloat（layer.opacity），
 minimum：0，
 maximum：1，
 showButtons：false，
 discreteValues： 
 intermediateChanges：true，
 id：mySlider，
 onChange：function（value）{
 layer.setOpacity（value）; 
} 
} ，layerSlider+ index）; 
  

现在您可以使用以下CSS：

< pre class =lang-css prettyprint-override> #mySlider {
width：100px;
显示：inline-block;
*显示：inline;
vertical-align：middle;
}


sometimes my javascript code is mixing with html and css. in this stuation, my code is beind unreadable. How do you separate the javascript and html side in javascript?

For example: (using javascript dojo toolkit)

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

In this stuation, my code is adding html to view side dynamically. Adding event handlers to created html code. Adding additional tools(HorizantalSlider) same time. This workflow is binded one to another. This code is unreadable. Is there a way to solve this with clean code?

解决方案

This answer uses Dojo to split your HTML + CSS from JavaScript.

HTML template

The recommended approach is by defining your HTML template in a seperate HTML file. For example:

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

Also notice the replacement of layersClass by a placeholder.

---

Load the HTML template

Now, to load the template you use the dojo/text plugin. With this plugin you can load external templates, for example by using:

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

---

Converting the placeholders

To replace {layersClass}, you can use the replace() function of the dojo/_base/lang module. Your code would eventually look like:

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

This would return exactly the same as your html variable, but seperated the HTML from your JavaScript code.

---

Seperate CSS

To seperate the CSS style from your HorizontalSlider you could define an id property and just put your CSS in a seperate CSS file. Your HorizontalSlider would become:

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

Now you can use the following CSS:

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

这篇关于分离javascript和html可读代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！