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

web翎云阁 2016-11-29 11:48

在项目中，我们每当需要动态插入部分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="http://orzhtml.github.io/">首 页</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 反正能取到里面的节点，就能给里面的标签加上需要的内容。

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

例子：

var NAV_XML = _TEXT(function() {

/*

<a href="http://orzhtml.github.io/">{{home}}</a>

<a href="http://orzhtml.github.io/">{{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));

结果截图：

有什么更牛逼的方法，可以留言探讨，如果喜欢，加关注可获得更多知识分享，谢谢。