[HTML] 模板的用法
2024-08-20 02:22:28
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" >
<meta name="description" content="" >
<title></title>
<script type="text/javascript" src="js/template.js" ></script>
<script type="text/template" id="app_tpl"><!-- 描述:建立模板 --> <div class="product">
<div class="imageContainer">
<img src="{#img#}" /><!--{##} 自己定义匹配 -->
<div class="layer">
<p>找同款</p>
<p>找相似</p>
</div>
</div>
</div>
<div class="content">
<p class="price">
<span class="price-text">¥{#price#}</span>
<span class="sum">{#sales#}人付款</span>
</p>
<p class="title">{#title#}</p>
<p class="store">
<span class="store-title">{#store#}</span>
<span class="adress">{#address#}</span>
</p>
</div>
</script>
</head>
<body>
<div id="app" class="ppa"></div>
</body>
</html>
<script type="text/javascript">
document.write(footerTpl);
</script>
<script type="text/javascript">
//命名空间:封装工具方法
var Util = {
//封装选择元素的方法
id:function(id){
return document.getElementById(id);
}, //封装ajax请求数据方法
ajax:function(url,callback){ //创建ajax对象
var xhr = new XMLHttpRequest();
//订阅事件
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//var data = xhr.responseText;
var data = JSON.parse(xhr.responseText);
//console.log(xhr.responseText);
//处理数据
callback&&callback(data);
} }
}
//open方法
xhr.open('get',url,true);
//send方法
xhr.send(null);
} }
//console.log(Util.id('app_tpl').innerHTML);
//封装格式化模板方法
function formDataString(str,data){
return str.replace(/\{#(\w+)#\}/g,function(match,$1){
//console.log(this);//this作用域
//console.log(arguments);
console.log('match:'+match);//match实参集合
console.log($1);
return data[$1] === undefined?'':data[$1];
});//w+ 任意多个字符
}
var html = '';
var str = Util.id('app_tpl').innerHTML;
Util.ajax('data/list.json',function(data){
//console.log(data);
//console.log(data.list.length);
for(var i=0,len=data.list.length;i<len;i++){ var list = data.list[i]; html += formDataString(str,list);
}
Util.id('app').innerHTML = html;
});
</script>
最新文章
- const 和 readonly
- mysql 自动备份和nginx自动安装脚本
- 自定义浏览器协议,实现web程序调用本地程序
- AngularJs ngInclude、ngTransclude
- sublime text 全局搜索
- javascript 布尔类型值判断
- Solve error: Cannot open include file: &#39;X11/Xlocale.h&#39;: No such file or directory
- ecshop第一讲之安装
- schtasks命令遇见ERROR: The request is not supported.
- iOS Instruments内存检测使用
- java对Ldap操作1
- PHP实现对MongoDB的基础操作
- css3属性选择器总结
- 3.使用secureCRT连接PC,LINUX,开发板
- JavaWeb(三)JSP概述
- SmartSql 性能评测
- Mock Server 实现post方法的接口(三)
- 使用spark访问hive错误记录
- JdbcTemplate学习笔记(更新插入删除等)
- 【九天教您南方cass 9.1】 04 编码法Ⅱ绘制地形图
热门文章
- js中获取父节点,兄弟节点及处理属性节点
- C++:初始化列表
- DSOframer 的简单介绍和资源整理(2015-09-02重新整理)
- C语言命令行处理
- Linux select/poll和epoll实现机制对比
- 自学PHP的野方法
- [Selenium]计算坐标进行拖拽,重写dragAndDropOffset
- Please ensure that adb is correctly located at 。。。。。。。。。。。。
- vue项目 调用百度地图 BMap is not defined
- BZOJ 4326 NOIP2015 运输计划 (二分+树上差分)