Javascript 管理信息窗口html代码的有效方法

Javascript 管理信息窗口html代码的有效方法,javascript,html,string,google-maps-api-3,Javascript,Html,String,Google Maps Api 3,我已经在一个基于谷歌地图API v3的项目上工作了一年多了。“信息”窗口中显示的信息有很多很多更改 我正在寻找一种比字符串变量更有效的方法来管理html代码。有什么想法吗 var tabA = "" + '<div class="iw_field"><div class="iw_label">NAME</div>'+ '<div class="iw_data">'+c[i].pName+'</div></div&g

我已经在一个基于谷歌地图API v3的项目上工作了一年多了。“信息”窗口中显示的信息有很多很多更改

我正在寻找一种比字符串变量更有效的方法来管理html代码。有什么想法吗

var tabA = "" +
    '<div class="iw_field"><div class="iw_label">NAME</div>'+
    '<div class="iw_data">'+c[i].pName+'</div></div>' +
    '<div class="iw_field"><div class="iw_label">CORPORATION</div>'+
    '<div class="iw_data">'+c[i].corp+'</div></div>' +
    '<div class="iw_field"><div class="iw_label">INDUSTRY</div>'+
    '<div class="iw_data">'+c[i].industry+'</div></div>'+
    "<div style='text-align: center;'>"+
    "<button class='btn btn-info' onclick='retriveCustomerOf(\""+c[i].num+"\")'>Customers</button>" +
    "<button class='btn btn-info' onclick=''>Prospects</button>"+
    "</div>";

var tabB = "" +
    '<div class="iw_field" style="border-bottom: 0px"><div class="iw_label">SALES VOLUME</div>'+
    '<div class="iw_data">$'+dollarFormat(c[i].statA)+'</div></div>' +
    '<table style="border-top: 1px solid #aaaaaa;"><tr><td>'+
    '<div class="iw_field"><div class="iw_label">GM</div><div id="" class="iw_data">$'+dollarFormat(c[i].statB)+'</div></div>'+
    '<div class="iw_field"><div class="iw_label">OPAT</div><div id="" class="iw_data">$'+dollarFormat(c[i].statC)+'</div></div>'+
    '<div class="iw_field"><div class="iw_label">ROI</div><div id="" class="iw_data">'+dollarFormat(c[i].statD)+'%</div></div>'+
    '</td><td>'+
    '<div class="iw_field"><div class="iw_label">GM RANK</div><div id="" class="iw_data">'+c[i].statE+'</div></div>'+
    '<div class="iw_field"><div class="iw_label">OPAT RANK</div><div id="" class="iw_data">'+c[i].statF+'</div></div>'+
    '<div class="iw_field"><div class="iw_label">ROI RANK</div><div id="" class="iw_data">'+c[i].statG+'</div></div>'+
    '</td></tr></table>';

var tabC = ""+
    '<div class="iw_field" style="border-bottom: 0px"><div class="iw_label">SERVICE REGION</div>'+
    '<div class="iw_data">'+c[i].area+'</div></div>' +
    '<table style="border-top: 1px solid #aaaaaa;"><tr><td>'+
    '<div class="iw_field"><div class="iw_label">PLACE 1</div><div id="" class="iw_data">$'+dollarFormat(c[i].p1)+'</div></div>'+
    '<div class="iw_field"><div class="iw_label">PLACE 2</div><div id="" class="iw_data">$'+dollarFormat(c[i].p2)+'</div></div>'+
    '</td><td>'+
    '<div class="iw_field"><div class="iw_label">PLACE 3</div><div id="" class="iw_data">$'+dollarFormat(c[i].p3)+'</div></div>'+
    '<div class="iw_field"><div class="iw_label">PLACE 4</div><div id="" class="iw_data">$'+dollarFormat(c[i].p4)+'</div></div>'+
    '</td></tr></table>';

var windowContent = "<div id='infowindow' class='company'>" +
    "<span class='header'>"+c[i].cName+" (#"+c[i].num+")</span>" +
    "<div class='tabs'>" +
    "<ul>" +
    "<li><a href='#tab_1' onclick='selectedTab = 0'><span>A</span></a></li>" +
    "<li><a href='#tab_2' onclick='selectedTab = 1'><span>B</span></a></li>" +
    "<li><a href='#tab_3' onclick='selectedTab = 2'><span>C</span></a></li>" +
    "</ul>" +
    "<div id='tab_1'>"+tabA+"</div>" +
    "<div id='tab_2'>"+tabB+"</div>" +
    "<div id='tab_3'>"+tabC+"</div>" +
    "</div>" +
    "<div style='text-align: right;'>"+
    "<button class='btn btn-primary' onclick='toggleRings(new google.maps.LatLng("+c[i].latitude+","+companies[i].longitude+"));'>Rings</button>" +
    "<button class='btn btn-primary' onclick='zoom("+c[i].latitude+", "+c[i].longitude+", 9)'>Zoom</button>"+
    "</div></div>";
var tabA=“”+
“姓名”+
''+c[i].pName+''+
“公司”+
''+c[i].公司+''+
“工业”+
''+c[i].工业+''+
""+
“客户”+
“前景”+
"";
var tabB=“”+
“销售量”+
“$”+美元格式(c[i].statA)+”+
''+
“GM$”+美元格式(c[i].statB)+”+
“OPAT$”+美元格式(c[i].statC)+”+
“ROI”+dollarFormat(c[i].statD)+'%+
''+
“GM排名”+c[i]。州+”+
“OPAT等级”+c[i]。statF+”+
“投资回报率排名”+c[i]。statG+”+
'';
var tabC=“”+
“服务区”+
''+c[i].面积+''+
''+
“放置1$”+美元格式(c[i].p1)+”+
“PLACE 2$”+美元格式(c[i].p2)+”+
''+
“放置3$”+美元格式(c[i].p3)+”+
“PLACE 4$”+美元格式(c[i].p4)+”+
'';
var windowContent=“”+
“+c[i].cName+”(#“+c[i].num+”)+
"" +
“
    ”+ “
  • ”+ “
  • ”+ “
  • ”+ “
”+ “”+tabA+“”+ “”+tabB+“”+ “”+tabC+“”+ "" + ""+ “戒指”+ “缩放”+ "";

这不是管理此代码的最佳实践。请保存我的理智。

检查js模板库。我使用过,并且对结果感到满意

谢谢你的帮助。我对这个还不太熟悉。在过去的几年里,我对基本原理有了深刻的理解,但现在我想学习“最简单”的方法,而不是“正确”的方法。