//template('授权id',需要渲染的数据对象)
<div id="text"></div>
<!-- 标签内写模板结构指定html -->
<script type="text/html" id="user">
<h1>{{name}}-----{{age}}</h1>
</script>
<script>
let data = {
name : '张三',
age : 20,
}
//调用tempalet函数
let htmstr = template('user',data)
document.querySelector('#text').innerHTML = htmstr
</script>
原文输出语法:{{@ text}}
以下为关于渲染你的综合案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <link rel="stylesheet" href="./assets/news.css" /> <script src="./lib/jquery.js"></script> <script src="./lib/template-web.js"></script> <script src="./js/news.js"></script> </head> <body> <div id="news-list"></div> <!-- 定义模板 --> <script type="text/html" id="tpl-news"> {{each data}} <div class="news-item"> <img class="thumb" src="{{'http://www.liulongbin.top:3006' + $value.img}}" alt="" /> <div class="right-box"> <h1 class="title">{{$value.title}}</h1> <div class="tags"> {{each $value.tags}} <span>{{$value}}</span> {{/each}} </div> <div class="footer"> <div> source为新闻来源 <span>{{$value.source}}</span> <span>{{$value.time | dateFormat}}</span> </div> <span>评论数:{{$value.cmtcount}}</span> </div> </div> </div> {{/each}} </script> </body> </html>
$(function () {
//补零
function zero (n) {
if (n<10) {
return '0'+n
}
else {
return n
}
}
// 定义格式化时间的过滤器
template.defaults.imports.dateFormat = function (dtStr) {
var dt = new Date(dtStr)
var y = dt.getFullYear()
var m = zero(dt.getMonth() + 1)
var d = zero(dt.getDate())
var hh = zero(dt.getHours())
var mm = zero(dt.getMinutes())
var ss = zero(dt.getSeconds())
return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
}
// 获取新闻列表的函数
function getNewsList() {
$.get('http://www.liulongbin.top:3006/api/news', function (res) {
if (res.status !== 200) {
return alert('获取新闻列表数据失败!')
}
for (var i = 0; i < res.data.length; i++) {
// 把每一项的 tags 属性,从字符串改造成字符串的数组
res.data[i].tags = res.data[i].tags.split(',')
}
var htmlStr = template('tpl-news', res)
$('#news-list').html(htmlStr)
})
}
getNewsList()
})
关于正则和字符操作
let str = '<div>我是{{name}}</div>'
let pa = /{{([a-zA-Z]+)}}/
//得到name相关内容
let res = pa.exec(str)
console.log(res)
let str = '<div>我叫{{name}}</div>'
let pa = /{{([a-zA-Z]+)}}/
let res = pa.exec(str)
let ress = str.replace(res[0],res[1])
console.log(res)
//多次replace
let str = '<div>{{name}}今年{{age}}岁了</div>'
let pattern = /{{\s*([a-zA-Z]+)\s*}}/ //+代表至少出现一次
//第一次匹配
let res1 = pattern.exec(str)
str.replace(res1[0],res1[1])
console.log(str)
//第二次匹配
let res2 = pattern.exec(str)
str = str.replace(res2[0],res2[1])
console.log(str)
利用while循环replace
//使用while进行replace操作
let str = '<div>{{name}}今年{{age}}岁了</div>'
let pattern = /{{\s*([a-zA-Z]+)\s*}}/ //+代表至少出现一次
let parres = null
while(parres=pattern.exec(str)){
str = str.replace(parres[0],parres[1])
}
console.log(str)
let data = {name:'张三',age:20}
let str = '<div>{{name}}今年{{age}}岁了</div>'
let pattern = /{{\s*([a-zA-Z]+)\s*}}/ //+代表至少出现一次
let parres = null
while(parres=pattern.exec(str)){
str = str.replace(parres[0],data[parres[1]])
}
console.log(str)
调用自己的模板引擎
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/modereplace.js"></script>
</head>
<body>
<div id="user-box"></div>
<script type="text/html" id="tpl-user">
<div>姓名:{{name}}</div>
<div>年龄:{{ age }}</div>
<div>性别:{{ gender}}</div>
<div>住址:{{address }}</div>
</script>
<!-- 预调用 -->
<script>
//定义数据
let data = {name:'za',age:28,gender:'男',address:'翻斗花园'}
//预调用模板引擎
let htmlStr = template('tpl-user',data)
//渲染结构
document.getElementById('user-box').innerHTML = htmlStr
</script>
</body>
</html>
function template( id , data) {
let str = document.getElementById(id).innerHTML
let pattern = /{{\s*([a-zA-Z]+)\s*}}/
let pattResult = null
while( pattResult=pattern.exec(str)) {
str = str.replace(pattResult[0], data[pattResult[1]])
}
return str
}