<!–markdown–>刚刚修复的小站,界面还未完工,现在发现markdown也跪了。真是悲剧,请大家将就着看吧
远程服务器方式
即从服务端获取模版文本填充到客户端的做法,因为这种做法很容易造成xss漏洞,所以我们还需要花费大力气在前后端做处理,所以不是很推荐。但是,将大量无用的标签存在dom或内存中也是很糟糕的做法,如果你有大量的html标签要处理,不妨试试这种方式。
简单客户端模版
1.注释流
<p><!–more–></p>
注释文本和其他html标记或文本一样是会被记录到dom树里,可以被javascript获取,以下是简单示例。
<input type='button' id='btn_ent' value='我按' />
<div id='container'>
<!--<ul>
<li>吃饭么今天</li>
<li>今天只有面唉</li>
<li>那怎么办<li>
<li>我们之间有一个人是食物,我不是</li>
<li>我也不是</li>
<li>你不是个鬼啊.快点给我变成食物</li>
<li>我不要,你去死吧</li>
<li>啊~~啊~~ 啊~~ 啊~~~ 啊~~~~</li>
<ul>-->
</div>
<script>
document.getElementById('btn_ent').onclick=function(){
var container=document.getElementById('container'),
script=document.getElementById('template');
/*
* 注释大法
* 有些浏览器可以通过 container.firstNode.nodeValue直接取出注释= - =
* 有些浏览器却不能 = - =
*/
container.insertAdjacentHTML('beforeend',getTemplate(container));
}
</script>
2.自定义script标签流
一般情况下我们的script标签默认是text/javascript类型的,但是同时我们是可以自定义type='jm-tempalte',来返回一段文本,通过这个特性我们可以更简单的获取到我们的模版。以下是简单示例。
<div id='container'>
</div>
<script type='text/jm-template' id='template'>
<ul>
<li>吃饭么今天</li>
<li>今天只有面唉</li>
<li>那怎么办<li>
<li>我们之间有一个人是食物,我不是</li>
<li>我也不是</li>
<li>你不是个鬼啊.快点给我变成食物</li>
<li>我不要,你去死吧</li>
<li>啊~~啊~~ 啊~~ 啊~~~ 啊~~~~</li>
<ul>
</script>
<script>
document.getElementById('btn_ent').onclick=function(){
var container=document.getElementById('container'),
script=document.getElementById('template');
/*
* script 模版大法
* script里取出来的文本前面总是会多一个空格,所以要记得去掉
*/
container.insertAdjacentHTML('beforeend',script.text.replace(/^s*/,''));
}
</script>
复杂客户端模版
复杂客户端模版一般使用Js类库实现,比如handlebars,比如backbone,又比如underscore。
最后,根据传统,放上完整demo[点我吧]。
在线demo稍后上线.