在项目中,我们每当需要动态插入部分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));
结果截图:
有什么更牛逼的方法,可以留言探讨,如果喜欢,加关注可获得更多知识分享,谢谢。