js管理你的html字符串，并渲染简单的json数据

2016/11/29

在项目中，我们每当需要动态插入部分html的时候，都是在 js 里面拼接字符串。那样既不美观，又会让代码变得非常常，有时候我们又不需要用 handlebars 或者 xTemplate 这类的模板引擎。那怎么管理这些又长又难以排版的 html 呢？

例如：

var html =
'<div>'+
'<p>Hello</p>'+
'<p>World'</p>' +
'</div>';

简单的字符串拼接还好，如果有各种数据渲染，转移符，等等，那不蛋疼了。
因为在一个 function 里面，注释的内容是不会被解析出来的，我们把这个内容用 toString 转一下就变成完整的字符串了，然后用正则匹配一下，就可以拿到里面的内容。

马上试试：

var RESET_CLASS = _TEXT(function(){/*
div { border:1px solid red;}
input { border:1px solid red;}
*/});
var ARTICLE = _TEXT(function(){/*
生活中最值得珍惜的就是彼此。
*/});
var NAVIGATION = _TEXT(function(){/*
<nav role="main-navigation" class="collapse">
  <ul class="nav navbar-nav">
    <li>
      <a href="/">首 页</a>
    </li>
  </ul>
</nav>
*/});
function _TEXT(wrap){
  return wrap.toString().match(/\/\*\s([\s\S]*)\s\*\//)[1];
}
console.log(RESET_CLASS);
console.log(ARTICLE);
console.log(NAVIGATION);

结果截图：

当然你可能会说写个方法太渣渣了
那我们还能这样做：

<script type="text/html" id="htmlDiv">
  <div class="div">我也可以</div>
</script>
<script type="text/x-handlebars-template" id="htmlTemplate">
  <div class="div">handlebars-template</div>
</script>
<script type="text/javascript">
  console.log(document.getElementById('htmlDiv').innerHTML)
  console.log(document.getElementById('htmlTemplate').innerHTML)
</script>

结果截图：

字符串里面要渲染数据怎么处理，办法有很多，例如通过里面的 id 或者 class 反正能取到里面的节点，就能给里面的标签加上需要的内容。

另外就是把某一段字符串替换成想要的数据，下面例子提供了个简单的方案，更复杂的方法请自行摸索。。。（注意：这个写法可能会和别的语言或模板引擎冲突，所以用的时候请注意）
例子：

var NAV_XML = _TEXT(function() {
/*
<a href="/">{{home}}</a>
<a href="/">{{aboutUs}}</a>
*/
});
function changeModelToHtml(template, oSource) {
  for(var i in oSource) {
    var reg = new RegExp("{{"+ i + "}}", "gim");
    template = template.replace(reg, oSource[i]);
    reg = null;
  }
  return template;
}
function _TEXT(wrap) {
  return wrap.toString().match(/\/\*\s([\s\S]*)\s\*\//)[1];
}
// 测试
var list = {home: '首页',aboutUs: '关于我们'};
console.log(changeModelToHtml(NAV_XML, list));

结果截图：

关注 web翎云阁，定时推送，互动精彩多，若你有更好的见解，欢迎留言探讨！

本作品采用知识共享署名 3.0 中国大陆许可协议进行许可，分享、演绎需署名且使用相同方式共享。转载请务必保留本页网址和作者信息，否则即为侵权。