虚拟DOM（一）
二、什么是虚拟DOM,为什么要使用虚拟DOM
首先:虚拟DOM(vdom) 就是用JS来模拟DOM结构的树形结构。
JS模拟DOM结构
- Item 1
- Item 2
{
tag: 'ul' attrs: {
id: 'list' } children: [ {
tag: 'li', attrs: {
className: 'item'}, children: ['Item 1'] }, {
tag: 'li', attrs: {
className: 'item'}, children: ['Item 2'] } ] } 那么我们为什么要使用虚拟?
因为DOM操作是’昂贵’ 的,在浏览器里一遍又一遍的渲染DOM是非常非常消耗性能,为了提高性能,JS在V8引擎下运行效率是很高的,我们尽量减少DOM操作,而不是’推倒重来’
我们可以看看这篇博文 虚拟DOM介绍
我们打印一下普通divDOM节点看看里面有什么东西
// dom节点 var div = document.createElement('div'); var item,result = ''; for (item in div){
result += "|" +item; } console.log(result) ///。。。茫茫多的东西 大家可以自己打印一下 对比一下jQuery和vdom的不同
两个例子:
jQuery实现：控制台打开看到,会将整个table DOM重新渲染,这并不符合我们的预期，我们希望的是每次修改能够只修改我们想要修改的DOM而不是重新渲染所有的DOM
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document
title> <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js">
script>
head> <body> <div id="container">
div> <button id="btn-change">changeContent
button> <script type="text/javascript"> // 将数据展示成一个表哥 随便修改一个信息，表格跟着修改 var data = [{
name: 'A先生', age: '18', address: '北京' }, {
name: 'B先生', age: '19', address: '上海' }, {
name: 'C先生', age: '20', address: '深圳' }] // 渲染函数 function render(data) {
var $container = $("#container") // 清空内容 $container.html('') //拼接table var $table = $('
'
) $table.append($(' name age address ')) data.forEach(function (item){
$table.append($(` ${
item.name} ${
item.age} ${
item.address} `)) }) // 最后的时候一起插入HTML更高效 $container.append($table) } //修改信息 $('#btn-change').click(function () {
data[0].age = '30'; data[1].address = '武汉' render(data) }) //初始化渲染 render(data)
script>
body>
html> vdom实现
我们使用了snabbdom来实现 [snabbdom]https://github.com/snabbdom/snabbdom
这就不一样了，在控制太就实现了我们想要的样子，只改变有变化的位置
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/snabbdom/0.7.0/snabbdom.js"></script> <script src="https://cdn.bootcss.com/snabbdom/0.7.0/snabbdom-class.js"></script> <script src="https://cdn.bootcss.com/snabbdom/0.7.0/snabbdom-props.js"></script> <script src="https://cdn.bootcss.com/snabbdom/0.7.0/snabbdom-style.js"></script> <script src="https://cdn.bootcss.com/snabbdom/0.7.0/snabbdom-eventlisteners.js"></script> <script src="https://cdn.bootcss.com/snabbdom/0.7.0/h.js"></script> </head> <body> <div id="contanier"></div> <button id="btn-change">btn-change</button> <script> var snabbdom = window.snabbdom; // 定义关键函数 patch var patch = snabbdom.init([ snabbdom_class, snabbdom_props, snabbdom_style, snabbdom_eventlisteners ]) // 定义关键函数 h var h = snabbdom.h // 原始数据 var data = [ {
name: 'A先生', age: '20', address: '北京' }, {
name: 'B先生', age: '25', address: '上海' }, {
name: 'C先生', age: '30', address: '深圳' } ]; // 把表头也放在 data 中 data.unshift({
name: '姓名', age: '年龄', address: '地址' }) var contanier = document.getElementById('contanier'); //定义一个渲染函数 var vnode; function render(data) {
var newVnode = h('table', {
}, data.map(function (item) {
var tds = []; var i; for (i in item) {
if (item.hasOwnProperty(i)) {
tds.push(h('td', {
}, item[i] + '')) } } return h('tr', {
}, tds) })) if (vnode) {
patch(vnode, newVnode) } else {
patch(contanier, newVnode) } vnode = newVnode } //初次渲染 render(data) var btnChange = document.getElementById('btn-change'); btnChange.addEventListener('click', function () {
data[1].age = '30'; data[2].address = '武汉' render(data) }) </script> </body> </html> 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/228951.html原文链接：https://javaforall.net
