如何利用模板将HTML从JavaScript中抽离

 更新时间:2016年10月08日 15:15:52   作者:苏福  
这篇文章主要为大家详细介绍了利用模板将HTML从JavaScript中抽离的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

一、当需要注入大段的HTML标签到页面中时,应该使用服务器渲染(从服务器加载HTML标签)

该方法将模板放置于服务器中使用XMLHttpRequest对象来获取外部标签(如多页应用)

function loadDialog(name, oncomplete) {
 var xhr = new XMLHttpRequest();
 xhr.open('get', '/js/dialog/'+name, true);
 xhr.onreadystatechange = function () {
  if(xhr.readyState == 4 && xhr.status == 200){
   var div = document.getElementById('dlg-holder');
   div.innerHTML = xhr.responseText;
   oncomplete();
  }else {
   //错误处理代码
  }
 };
 xhr.send(null);
}
//使用YUI的API
function loadDialog(name, oncomplete) {
 Y.one('#dlg-holder').log('/js/dialog/'+name,oncomplete);
}
//使用JQuery的API
function loadDialog(name, oncomplete) {
 $('#dlg-holder').load('/js/dialog/'+name, oncomplete);
}

二、客户端模板
对于少量的标签段,应该考虑采用客户端模板。
客户端模板是一些带‘插槽'(占位符)的标签片段,这些占位符会被JavaScript程序(模板引擎)替换为数据,然后把该替换好的标签片段插入到页面中。

JavaScript程序(模板引擎)
自定义模板文本处理程序

function sprintf(text){
 var i=1,args=arguments;
 return text.replace(/%s/g, function(){
  return (i<args.length) ? args[i++] : '';
 });
}

模板文本存放位置
1.存放于HTML注释中

<ul id = 'mylist'><!--<li id='item%s'><a href='%s'>%s</a></li>-->
 ...
</ul>

因为注释也是一个DOM节点,因此可以通过JS将其提取出来:

//格式化并插入DOM的方法定义
function addItem(url,text){
 var mylist = document.getElementById('mylist');
 var templateText = mylist.firstChild.nodeValue; //提取模板文本
 var result = sprintf(templateText,url,text);
 div.innerHTML = result;
 mylist.insertAdjacentHTML('beforeend', result);
}
//调用方法
addItem('/item/4', 'First item');
addItem('/item/4', 'Second item');

2.存放于自定义type属性的script标签内

<script type='text/x-my-template' id='list-item'>
 <li><a href='%s'>%s</a></li>
</script>
function addItem(url,text){
 var mylist = document.getElementById('mylist');
 var script = document.getElementById('list-item');
 var templateText = script.text; //提取模板文本
 var result = sprintf(templateText,url,text);
 var div = document.createElement('div');
 div.innerHTML = result.replace(/^\s*/,''); //去除模板文本的前导空格(因为它是在<script>标签的下一行)
 mylist.appendChild(div.firstChild);
}

使用第三方的模板系统(如:artTemplate-3.0、Jade、Handlebars、doT.js)

以Handlebars为例:

Handlebars建议将模板存放于script标签内

<script type='text/x-handlebars-template' id='list-item'>
 {{#if items}}
 <ul id='mylist'>
  {{#each items}}
   <li><a href='{{url}}'>{{text}}</a></li>
  {{/each}}
 </ul>
 {{/if}}
</script>
funtion addItem(url,text){
 var mylist = document.getElementById('mylist'),
   script = document.getElementById('list-item'),
   template = Handlebars.compile(script.text), //提取模板文本,返回格式化方法
   div = document.createElement('div'),
   result;

 result = template({text:text,url:url});
 div.innerHTML = result;
 mylist.appendChild(div.firstChild);
}
//调用
addItem('/item/4,'First item');

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 在使用JSON格式处理数据时应该注意的问题小结

    在使用JSON格式处理数据时应该注意的问题小结

    这篇文章主要介绍了在使用JSON格式处理数据时应该注意的问题,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-05-05
  • canvas绘制爱心的几种方法总结(推荐)

    canvas绘制爱心的几种方法总结(推荐)

    下面小编就为大家带来一篇canvas绘制爱心的几种方法总结(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • JavaScript实现移动端弹窗后禁止滚动

    JavaScript实现移动端弹窗后禁止滚动

    这篇文章主要介绍了JavaScript实现移动端弹窗后禁止滚动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • js实现完美兼容各大浏览器的人民币大小写相互转换

    js实现完美兼容各大浏览器的人民币大小写相互转换

    在基于网页的打印输出或报表中,经常会牵扯到金额的大写,每次都打上去很麻烦,所以想法用一个JavaScript客户端脚本来实现自动转换,只需在需要显示大写金额的时候调用该JS函数,下面我们就来汇总下吧
    2015-10-10
  • 微信小程序实现图片翻转效果的实例代码

    微信小程序实现图片翻转效果的实例代码

    这篇文章主要介绍了微信小程序实现图片翻转效果的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • 通过layer实现可输入的模态框的例子

    通过layer实现可输入的模态框的例子

    今天小编就为大家分享一篇通过layer实现可输入的模态框的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 一些有关检查数据的JS代码

    一些有关检查数据的JS代码

    一些有关检查数据的JS代码...
    2006-09-09
  • 微信小程序实现bindtap等事件传参

    微信小程序实现bindtap等事件传参

    这篇文章主要介绍了微信小程序实现bindtap等事件传参,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • 基于对象合并功能的实现示例

    基于对象合并功能的实现示例

    下面小编就为大家带来一篇基于对象合并功能的实现示例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • JavaScript仿支付宝密码输入框

    JavaScript仿支付宝密码输入框

    那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签
    2015-12-12

最新评论