<h2>基于HTML模板和JSON数据的JavaScript交互</h2>
<div class="entry">
<p><br> 本文地址：<a href="http://www.zhangxinxu.com/wordpress/?p=2649" rel="noopener noreferrer" target="_blank">http://www.zhangxinxu.com/wordpress/?p=2649</a></p>
<h3>一、小妹妹不要怕，哥哥很温柔的</h3>
<p>写文章之前，我总要去网上搜索相关资料，避免内容重复，顺便学习。</p>
<p>同样的，在这个风和日丽，阳光明媚的周三上午，我兴致勃勃地打开百度，搜索：“JS 模板 数据”，然后……<br> <img alt="百度搜索尼玛坑爹的结果 张鑫旭-鑫空间-鑫生活" class="alignnone" height="209" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-a7620514754b22e7488344b280ef5b78.png" title="百度搜索尼玛坑爹的结果" width="232"></p>
<p>我擦，怎么都是些非原创的，低质量的内容~~<br> <img alt="" class="alignnone" height="453" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-263bc64e2aa2c38fef103e0d73ba25c5.png" title="百度内容质量比较糟糕" width="414"></p>
<div class="mt10 mb10" style="width:500px; border-bottom:1px dotted #ccc" title="摸人家干嘛，我只是个良家分隔线">
</div>
<p><strong>谷歌</strong>之，立马长舒一口气：<br> <img alt="谷歌搜索令人欣慰" class="alignnone" height="232" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-8efb6a47b1379ecdb3285d7a223b304f.png" title="谷歌搜索令人欣慰" width="314"></p>
<p>这种感觉就像是在厕所憋气撒尿，完事后冲出厕所终于呼吸到了一口新鲜空气……<br> <img alt="" class="alignnone" height="245" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-029e5e960fa6541d5d124aba164dcf6c.jpg" title="新鲜空气" width="385"></p>
<div class="mt10 mb10" style="width:500px; border-bottom:1px dotted #ccc" title="摸人家干嘛，我只是个良家分隔线">
</div>
<p>然而，这些文章的内容，大部分都是介绍JS模板引擎的，而且看上去都是很高级的样子，它们或长成这个样子：<br> <a href="http://cdc.tencent.com/?p=5723" rel="noopener noreferrer" target="_blank"><img alt="artTemplate JS模板引擎 张鑫旭-鑫空间-鑫生活" class="alignnone" height="87" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-019f8a1918bab2309a18128a3ba900e3.png" title="artTemplate JS模板引擎" width="322"></a></p>
<p>或长成这个样子（Yaya Template模板引擎）：</p>
<div class="zxx_code">
<pre class="blockcode">for(var i=0;i<list.length;i++){
{$ <li>这是第 {% i %} 列：{% list[i] %}</li> $}
}
var list = [“红桃”,”方块”,”梅花”,”黑桃”];
var html = YayaTemplate(templateText).render({list:list});</pre>
</div>
<p>还有类似的，这个样子的（EasyTemplate前端模板 – 作者杜欢?）：</p>
<div class="zxx_code">
<pre class="blockcode"><#list data as list>
<li>这里是第${list_index} 列：${list}</li>
</#list>
var list = [“红桃”,”方块”,”梅花”,”黑桃”];
var html = easyTemplate.render(templateText,list); <span style="color:green">//templateText指模板语言</span></pre>
</div>
<p>还有其他N多jquery template、 ace template、lite template……</p>
<p>我勒个去，这些乱七八糟的标记字符语句什么的只会让我辈们产生两种反应：<br> 1. 哎呀呀，好多字符标记，眼花缭乱，看得我头晕晕~~<br> <img alt="头晕" class="alignnone" height="150" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-1c93513b8835f5f168687a3ae25c8d8a.png" title="头晕" width="150"></p>
<p>2. 矮油，看上去很高级吧，但是，香奈儿这种高级货对于我们底层大众来说过于闪耀，会不小心亮瞎了金钛狗眼的~~<br> <img alt="亮瞎了狗眼 表情图" class="alignnone" height="115" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-2d9a24d7ab67738907288201a6366e8b.jpg" title="亮瞎了狗眼" width="140"></p>
<p>结果还自诩“易学易用”什么的~~果然，巴神的世界不是我等所能理解的！</p>
<div class="mt10 mb10" style="width:500px; border-bottom:1px dotted #ccc" title="摸人家干嘛，我只是个良家分隔线">
</div>
<p>好好的一个帅哥，如果改造的过于夸张，在不深入了解的情况下，会吓着人家小妹妹的。比方说你丫把自己变成了绿巨人，或是变成爬上摩天楼打飞机的巨猩猩~~<br> <img alt="绿巨人-呐喊 表情图 张鑫旭-鑫空间-鑫生活" class="mt10" height="298" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-e711eb9d266222015eea6fd9f3af2401.jpg" title="绿巨人-呐喊" width="500"></p>
<p>因此，所谓HTML模板，如果折腾地过于夸张，在这个卖萌的年代，会吓着那些做前端的小妹妹的（可能你自个儿对自己的一身肌肉自恋不已）。</p>
<p>我这里也要介绍HTML模板，也是结合JSON数据 |
|
转播
