根据数据把页面结构填充完整
// 准备数据
var users = [
{ id: 1, name: 'Jack', gender: '男', age: 18 },
{ id: 2, name: 'Rose', gender: '女', age: 20 },
{ id: 3, name: 'Tom', gender: '男', age: 22 },
{ id: 4, name: 'Jerry', gender: '男', age: 24 },
]
// 如何考虑把 users 数组转换到 页面的 tbody 内
// 利用 innerHTML 这个属性, 因为他可以解析识别 html 结构字符串
// 只要想把发 users 数组, 组装成一个 html 结构字符串
渲染页面技巧
1. 写好 html + css
2. 把数据组装成 html 结构字符串
2-1. 准备一个空字符串
2-2. 循环遍历数组
2-3. 使用模板字符串直接复制 html 结构(因为 模板字符串 可以换行书写和解析变量)
2-4. 变量代入
3. 把组装好的 html 结构字符串使用 innerHTML 插入到指定标签内(tbody)
<!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>
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
</table>
<script>
// 获取元素
var tbody = document.querySelector('tbody')
// 2-1. 准备一个空字符串
// var str = ''
// // 2-2. 循环遍历数组
// users.forEach(function (item) {
// // 数组内有多少个对象, 就会执行多少回
// // 执行一回拼接一个完整
// str += `
// <tr>
// <td>${ item.id }</td>
// <td>${ item.name }</td>
// <td>${ item.gender }</td>
// <td>${ item.age }</td>
// </tr>
// `
// })
// console.log(str)
// // 3. 使用 innerHTML 插入到指定标签内
// tbody.innerHTML = str
// 我们一直在做的事情, 就是循环叠加 str
// 叠加: reduce
tbody.innerHTML = users.reduce(function (prev, item) {
return prev + `
<tr>
<td>${ item.id }</td>
<td>${ item.name }</td>
<td>${ item.gender }</td>
<td>${ item.age }</td>
</tr>
`
}, '')
</script>
</body>
</html>
效果图：
渲染页面的插件
+ art-template 模板引擎
插件, 类库, 框架的区别
+ 插件: 为了实现页面上某一类单一功能而封装的代码
+ 类库: 按照类别对一些列操作进行的封装
+ 框架: 有一套自己独立的生态系统
模板引擎 art-template
0. 下载
1. 引入一个 art-template 封装文件
2. 按照规则开始使用
使用规则:
1. 书写一个 script 标签
=> 给 script 标签添加一个 type 属性, 值书写 text/template 或者 text/html
=> 必须要给这个 script 标签书写一个 id 属性(将来 art-rtemplate 语法需要的)
2. 把你需要渲染的内容直接粘贴在 script 标签内
=> 你需要渲染的 html 结构
=> 按照 模板引擎 的语法对 要渲染的内容进行渲染操作(欠着)
3. 使用 art-template 的语法 把标签内的内容填充到指定位置
=> 语法: template('id名称', { 数据 })
-> id 名称, 你准备的模板的 script 标签的 id 名
-> { 数据 }: 你可以在模板内直接使用的数据
=> 返回值: 一个渲染好的字符串
<!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>
</head>
<body>
<div>
<!-- JS 渲染 -->
</div>
<!-- 提前准备好的模板标签 -->
<script type="text/html" id="test">
<!-- 需要在这个 h1 标签内使用 message 这一段数据, 插值表达式 -->
<h1>{{ message }}</h1>
<p>我是一个 p 标签</p>
<span>我是一个 span 标签</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<span>我是一个 span 标签</span>
<p>我是一个 p 标签</p>
</script>
<script src="./art-template.js"></script>
<script>
var ele = document.querySelector('div')
// 我需要向 div 内渲染一些内容
// 会找到 id="test" 的标签, 读取到里面所有的内容(innerHTML)
// 根据你指定的渲染语法, 和对象中的数据把 test 内的内容渲染好
// 把渲染好的内容返回
var str = template('test', { message: '你好 我是模板引擎初体验' })
ele.innerHTML = str
</script>
</body>
</html>
渲染语法
+ art-template 提供了两套渲染语法
1. art-template 自己研究的 模板语法
2. 纯原生 js 语法
1. 将数据渲染在模板内
1-1. 原生语法:
<%= 变量 %> 不会解析 html 格式字符串
<%- 变量 %> 会解析 html 格式字符串
1-2. 模板语法:
{{ 变量 }} 不会解析 html 格式字符串
{{@ 变量 }} 会解析 html 格式字符串
2. 条件渲染
2-1. 原生语法:
<% if () { %>
你要渲染的内容
<% } %>
2-2. 模板语法
{{ if 条件 }}
你要渲染的内容
{{ /if }}
3. 循环渲染
3-1. 原生语法:
<% for () { %>
你需要循环输出的内容
<% } %>
3-2. 模板语法:
{{ each 数组 }}
你需要循环输出的内容 $value 表示数组内的每一项 $index 表示数组每一项的索引
{{ /each }}
4. 定义临时变量
4-1. 原生语法: <% var 变量名 = 值 %>
4-2. 渲染语法: {{ set 变量名 = 值 }}
<!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>
</head>
<body>
<div>
</div>
<!-- 准备渲染模板 -->
<script type="text/html" id="test">
<!-- 模板内需要的变量定义在最上面 - 个人习惯 -->
{{ set a = users.reduce(function (prev, item) { return prev + item.age }, 0) }}
<h1>原生语法渲染 : <%= message %></h1>
<h1>渲染语法渲染 : {{ message }}</h1>
<hr>
<h1>原生语法渲染 : <%- msg %></h1>
<h1>渲染语法渲染 : {{@ msg }}</h1>
<hr>
<h1>性别:
<% if (gender === 1) { %>
<span>男</span>
<% } else { %>
<span>女</span>
<% } %>
</h1>
<h1>性别:
{{ if gender === 1 }}
<span>男</span>
{{ else }}
<span>女</span>
{{ /if }}
</h1>
<hr>
<ul>
<% for (var i = 0; i < users.length; i++) { %>
<li> <%= users[i].id %> --- <%= users[i].name %> </li>
<% } %>
</ul>
<ol>
{{ each users }}
<li> {{ $value.id }} --- {{ $value.name }} --- {{ $index }} </li>
{{ /each }}
</ol>
<p>平均年龄 : {{ a / users.length }} </p>
</script>
<script src="./art-template.js"></script>
<script>
var ele = document.querySelector('div')
var obj = {
message: '我是一段数据',
msg: '<span>一段html格式字符串</span>',
gender: 0,
users: [ { id: 1, name: 'Jack', age: 18 }, { id: 2, name: 'Rose', age: 19 }, { id: 3, name: 'Tom', age: 20 } ]
}
ele.innerHTML = template('test', obj)
</script>
</body>
</html>
动态渲染表格
<!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>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 500px;
margin: 10px auto;
text-align: center;
}
</style>
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>全选</th>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- JS 渲染 -->
</tbody>
</table>
<!-- 准备表格模板 -->
<script type="text/html" id="users">
{{ each users }}
<tr bgcolor="{{ $index % 2 ? 'pink' : 'skyblue' }}">
<td>
<input type="checkbox" {{ $value.is ? 'checked' : '' }}>
</td>
<td>{{ $value.id }}</td>
<td>{{ $value.name }}</td>
<td>{{ $value.gender }}</td>
<td>{{ $value.age }}</td>
<td>
<button data-id="{{ $value.id }}">编辑</button>
<button class="del" data-id="{{ $value.id }}">删除</button>
</td>
</tr>
{{ /each }}
</script>
<script src="./art-template.js"></script>
<script>
/*
动态渲染表格
*/
// 0. 获取元素
var tbody = document.querySelector('tbody')
// 1. 准备数据
var users = [
{ id: 1, name: 'Jack', age: 18, gender: '男', is: true },
{ id: 2, name: 'Rose', age: 20, gender: '女', is: true },
{ id: 3, name: 'Tom', age: 22, gender: '男', is: false }
]
// 2. 渲染页面
function bindHtml() {
// 对于一些复杂数据进行简单化处理
// 例如: 分页时, 在这里对数据进行 slice 操作
// 渲染页面
tbody.innerHTML = template('users', { users })
}
bindHtml()
// 3. 绑定事件
tbody.addEventListener('click', function (e) {
if (e.target.className === 'del') {
var id = e.target.dataset.id - 0
users = users.filter(function (item) { return item.id !== id })
bindHtml()
}
})
</script>
</body>
</html>
效果图：
