0

平时工作中时常需要根据数据或者配置来拼接一段html代码,当需要拼接的代码非常长时,编写和查看就非常困难,问问各位平时工作或学习中有没有什么既能兼顾性能又能方便编写和查看的dom拼接方式???

gooa 182
2018-12-06 提问

查看全部 7 个回答

1

已采纳

如果允许使用ES6的话,可以直接使用字符串模板

var str =
`
<div>
    <div></div>
</div>
`

如果不能使用ES6,要进行字符串换行的话(字符串不允许换行,会报错),可以在每一行最后加上反斜杠

var str =
"\
<div>\
    <div></div>\
</div>\
"

推荐答案

2

如果你的项目可以使用vue, 就是可以直接使用vue 的模板 去做,不过我看你说的这个情况 ,应该不是使用vue那一套,
根据你说的既要兼顾性能,又要方便查看和编写,可以使用模板引擎
1.artTemplate 腾讯开源的前端模版引擎

<!--用于展示模版的位置-->
<div id="area"></div> 
​
<script src="js/template-native.js"></script>
<!--用于存放模版-->
<script id="template" type="text/html"> 
    <div>
        <% for(i=0;i<content.length;++i) {%>
        <h1><%=content[i].province%></h1>
            <% for(j=0 ; j<content[i].city.length ; ++j){%>
            <p><%=content[i].city[j]%></p>
            <%}%>
        <%}%>
    </div>
</script>
<!--用于渲染模版-->
<script>
  var data={
    content:[
      {province:'四川',city:['成都','绵阳','自贡']},
      {province:'广东',city:['广州','东莞','佛山']},
      {province:'海南',city:['海口','三亚']}
    ]
  };
  var html=template('template',data);
  document.getElementById('area').innerHTML=html
</script>

artTemplate
性能极佳,比字符串拼接和动态生成dom,要快一倍至少,学习成本极低。

  1. es6 模板字符串
$('#result').append(`
         There are <b>${basket.count}</b> items
          in your basket, <em>${basket.onSale}</em>
         are on sale!
       `);

[模板字符串] [1]

你可能感兴趣的

推广链接