背景
我们都知道频繁的dom给我们带来的代价是昂贵的,例如我们有时候需要去更新Table 的部分数据,必须去重新重绘表格,这代价实在是太大了,相比于频繁的手动去操作dom而带来性能问题，vdom很好的将dom做了一层映射关系，进而将在我们本需要直接进行dom的一系列操作，映射到了操作vdom.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>virtualDom</title>
</head>
<body>
<div id="container"></div>
<button id="btn-change">修改</button>
<script type="application/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="application/javascript">
const dataSource = [{
key: ‘1‘,
name: ‘胡彦斌‘,
age: 32,
address: ‘西湖区湖底公园1号‘
}, {
key: ‘2‘,
name: ‘胡彦祖‘,
age: 42,
address: ‘西湖区湖底公园1号‘
}];
const columns = [{
title: ‘姓名‘,
dataIndex: ‘name‘,
key: ‘name‘,
}, {
title: ‘年龄‘,
dataIndex: ‘age‘,
key: ‘age‘,
}, {
title: ‘住址‘,
dataIndex: ‘address‘,
key: ‘address‘,
}];
function render(data) {
var container = $(‘#container‘);
container.html(‘‘); //清空容器
//添加表头
var $table =$(‘<table>‘)
$table.append($(‘<tr>‘))
columns.map(function(item,index){
$table.append($(‘<td>‘+item.title+‘</td>‘))
})
$table.append($(‘</tr>‘))
//添加表体
dataSource.forEach(function(item){
$table.append($(‘<tr></tr><td>‘+item.name+‘</td>‘+‘<td>‘+item.age+‘</td>‘+‘<td>‘+item.address+‘</td></tr>‘))
})
//只渲染一遍dom,尽然如此,还是需要清空容器
container.append($table)
}
$(‘#btn-change‘).click(function(){
dataSource[0].name="胡军网";
dataSource[1].address=‘南山区沙河东路1号‘
//re——render
render(dataSource)
})
render()
</script>
</body>
</html>
解决
- virtual dom,虚拟 DOM
- 用 JS 模拟 DOM
什么是vdom
HTML DOM 结构:
<ul id="ul-list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
针对于上面HTML DOM 结构,可以用JS表示为:
var ulE = {
tagName: ‘ul‘, // 标签名
props: { // 属性用对象存储键值对
id: ‘ul-list‘
},
children: [ // 子节点
{tagName: ‘li‘, props: {className: ‘item‘}, children: ["Item 1"]},
{tagName: ‘li‘, props: {className: ‘item‘}, children: ["Item 2"]},
{tagName: ‘li‘, props: {className: ‘item‘}, children: ["Item 3"]},
]
}
JS对象中抽取公共的部分属性,进一步封装:
export default Ele = (tagName, props, children) => {
this.tagName = tagName
this.props = props
this.children = children
}
import * as el from ‘ele‘;
var ol = el(‘ul‘, {id: ‘ul-list‘}, [
el(‘li‘, {className: ‘item‘}, [‘Item 1‘]),
el(‘li‘, {className: ‘item‘}, [‘Item 2‘]),
el(‘li‘, {className: ‘item‘}, [‘Item 3‘])
]);
原文地址：https://www.cnblogs.com/fuGuy/p/9220106.html
时间： 2024-11-08 11:29:59