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


Posted in Javascript onOctober 08, 2016

一、当需要注入大段的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');

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

Javascript 相关文章推荐
JavaScript浏览器选项卡效果
Aug 25 Javascript
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
vue backtop组件的实现完整代码
Apr 07 Vue.js
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 #Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 #Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 #Javascript
Javascript中常用的检测方法小结
Oct 08 #Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 #Javascript
AngularJS 2.0入门权威指南
Oct 08 #Javascript
省市区三级联动jquery实现代码
Apr 15 #Javascript
You might like
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
php动态绑定变量的用法
2015/06/16 PHP
JavaScript自定义事件介绍
2013/08/29 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
JS实现手风琴特效
2020/11/08 Javascript
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Django中的Signal代码详解
2018/02/05 Python
python实现简易通讯录修改版
2018/03/13 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
介绍一下UNIX启动过程
2013/11/14 面试题
测试工程师岗位职责
2013/11/28 职场文书
心得体会开头
2014/01/01 职场文书
社区文化建设方案
2014/05/02 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
Nginx速查手册及常见问题
2022/04/07 Servers