20210925
MCV模式
由数据(状态)驱动视图的渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.active {
color: #F50;
}
</style>
</head>
<body>
<div>
<ul id="age">
<li>年龄从小到大排序</li>
<li>年龄从大到小排序</li>
<li>默认排序</li>
</ul>
</div>
<div>
<ul id="sex">
<li>男</li>
<li>女</li>
<li>全选</li>
</ul>
</div>
<table id="table" border="1">
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
{
/**
1.定义数据
2.定义状态
3.渲染视图
4.状态驱动视图操作
**/
// 1.定义数据
let dataList = [
{
id: 1,
name: '张三',
age: 28,
sex: '男'
},
{
id: 2,
name: '潘云',
age: 65,
sex: '女'
},
{
id: 3,
name: '王五',
age: 15,
sex: '男'
},
{
id: 4,
name: '赵六',
age: 18,
sex: '男'
},
{
id: 5,
name: '漫云',
age: 36,
sex: '女'
},
{
id: 6,
name: '寻柔',
age: 20,
sex: '女'
},
{
id: 7,
name: '桥河',
age: 25,
sex: '男'
},
{
id: 8,
name: '琥渤',
age: 65,
sex: '男'
}
]
// 2.定义状态
let sortStatus = 2 // 0 年龄从小到大排序 1年龄从大到小排序 2默认排序
let sexStatus = 2 // 0 男 1女 2全选
let sortFn = [
(n1, n2) => n1.age - n2.age,
(n1, n2) => n2.age - n1.age,
(n1, n2) => n1.id - n2.id,
]
let sexFn = [
item => item.sex == '男',
item => item.sex == '女',
item => true
]
// 获取dom元素
let tbody = document.querySelector('#table tbody')
let ageLis = document.querySelectorAll('#age li')
let sexLis = document.querySelectorAll('#sex li')
// 渲染视图
const render = () => {
// 对性别进行筛选
let nowData = dataList.filter(sexFn[sexStatus])
// 对年龄进行排序
nowData = nowData.sort(sortFn[sortStatus])
// 操作激活状态的class
ageLis.forEach(item => {
item.classList.remove("active")
})
ageLis[sortStatus].classList.add("active")
sexLis.forEach(item => {
item.classList.remove("active")
})
sexLis[sexStatus].classList.add("active")
// 放入页面
tbody.innerHTML = nowData.map(item => {
return `
<tr>
<th>${item.id}</th>
<th>${item.name}</th>
<th>${item.age}</th>
<th>${item.sex}</th>
</tr>
`
}).join("")
}
render()
// 状态驱动视图操作
// 获取的ageLis是伪数组 可以用forEach遍历 或者伪数组转换为数组,再map遍历
ageLis.forEach((item, index) => {
item.onclick = () => {
sortStatus = index
render()
// console.log(index)
}
})
// 伪数组转换为数组,再map遍历 可以Array.from(ageLis) 或者 [...ageLis]
// ageLis = Array.from(ageLis)
// console.log(ageLis)
// ageLis.map((item, index) => {
// item.onclick = () => {
// console.log(index)
// }
// })
sexLis.forEach((item, index) => {
item.onclick = () => {
sexStatus = index
render()
// console.log(index)
}
})
}
</script>
</body>
</html>
