使用js进行数据渲染,是一个很繁琐和麻烦的过程。
使用js+jq封装采用插值表达式,以及data指定数据源,即可直接渲染
utils.js
let html = $('#app')
let htmlStr = html.html()
function linster() {
html.html(htmlStr)
let forBom = $('for')
// 便利每个for元素
for (let i = 0; i < forBom.length; i++) {
let forItem = forBom.eq(i)
let dataKey = forItem.attr('data')
if (data[dataKey]) {
let arr = data[dataKey]
forEachToBom(forItem.prop('outerHTML'), forItem.parent(), forItem, arr)
}
}
}
// 循环遍历数组元素 渲染到 Bom
function forEachToBom(source, toDom, remove, arr) {
$(remove).remove()
// 便利数组
arr.forEach((el, index) => {
let resetSource = source
let keys = Object.keys(el)
if (resetSource.indexOf('index') != -1) {
resetSource = resetSource.replaceAll(`{{index}}`, index)
}
keys.forEach((key, index) => {
// 重置数据源html
if (resetSource.indexOf(key) != -1) {
resetSource = resetSource.replaceAll(`{{${key}}}`, el[key])
}
})
toDom.append(resetSource)
})
}
使用
<html>
<for data='banner'>
<if>
<div index='{{index}}' >
<img src='http://xxxx.xxxx.xxxx:3064{{url}}' class='d-block' style='width:100%'>
{{title}}
</div>
</if>
</for>
</html>
<script>
var data = {
}
$.ajax({
url: baseUrl + '/rest/banner',
method: 'get',
async: false,
headers: {
'token': sessionStorage.getItem("token"),
'Content-Type': 'application/json'
},
success(va) {
data['banner'] = va.data
}
})
// 渲染数据
linster()
</script>