之前一直用 "" + "" 这种方式来拼接一个很长的字符串 或者 HTML 代码, 太累了. 那有没有什么好的方法了, 起码敲起代码起来不会感觉到厌烦, 于是我总结了2种比较舒服的方法, 望大家采纳.
第一种方法: 采用数组的方式. 最后利用join('')连接起来. 直接上代码.
Js
<script>
var lang = {
url : 'http://www.dianziq.com',
upload : 'ABCD',
viewServer : 'viewServer',
width : 100 ,
height : 100
} ,
var html = [
'<div style="padding:20px;">' ,
//url
'<div class="ke-dialog-row">' ,
'<label for="keUrl" style="width:60px;">' + lang.url + '</label>',
'<input class="ke-input-text" type="text" id="keUrl" name="url" value="" style="width:160px;" /> ',
'<input type="button" class="ke-upload-button" value="' + lang.upload + '" /> ',
'<span class="ke-button-common ke-button-outer">',
'<input type="button" class="ke-button-common ke-button" name="viewServer" value="' + lang.viewServer + '" />',
'</span>',
'</div>',
//width
'<div class="ke-dialog-row">' ,
'<label for="keWidth" style="width:60px;">' + lang.width + '</label>',
'<input type="text" id="keWidth" class="ke-input-text ke-input-number" name="width" value="550" maxlength="4" /> ',
'</div>',
//height
'<div class="ke-dialog-row">' ,
'<label for="keHeight" style="width:60px;">' + lang.height + '</label>',
'<input type="text" id="keHeight" class="ke-input-text ke-input-number" name="height" value="400" maxlength="4" /> ',
'</div>',
'</div>'
].join ('');
</script>
第二种方法: 采用"\"连接的方法
Js
<script>
var lang = {
url : 'http://www.dianziq.com',
upload : 'ABCD',
viewServer : 'viewServer',
width : 100 ,
height : 100
} ,
var html2 = '\
<div style="padding:20px;">\
<div class="ke-dialog-row">\
<label for="keUrl" style="width:60px;">' + lang.url + '</label>\
<input class="ke-input-text" type="text" id="keUrl" name="url" value="" style="width:160px;" /> \
<input type="button" class="ke-upload-button" value="' + lang.upload + '" /> \
<span class="ke-button-common ke-button-outer">\
<input type="button" class="ke-button-common ke-button" name="viewServer" value="' + lang.viewServer + '" />\
</span>\
</div>\
<div class="ke-dialog-row">\
<label for="keWidth" style="width:60px;">' + lang.width + '</label>\
<input type="text" id="keWidth" class="ke-input-text ke-input-number" name="width" value="550" maxlength="4" />\
</div>\
<div class="ke-dialog-row">\
<label for="keHeight" style="width:60px;">' + lang.height + '</label>\
<input type="text" id="keHeight" class="ke-input-text ke-input-number" name="height" value="400" maxlength="4" />\
</div>\
</div>\
' ;
</script>
这样子我们就可以在JS里面直接写HTML代码了