JS问题整理与思考--virtual DOM核心分析第一篇

vdom是什么?为何会存在vdom?

  • virtual dom ,虚拟DOM
  • 用JS模拟DOM解构
  • DOM变化的对比,放在JS层来做
  • 提高重绘性能

原则:浏览器最耗性能的,是渲染DOM。

在真实DOM中,如果要将item2删掉,执行的操作一般是将Item1/item2都删掉,然后再将item1加上。

在虚拟DOM中,就可以直接对比两段JS之间的差别,并直接将item2删掉。

    <ul id="list">
    <li class="item">item1</li>
    <li class="item">item2</li>
    </ul>
var a = {
    tag:'ul',
    attrs:{
        id:'list'
    },
    children:[
        {
            tab:'li',
            attr:{
                className:'item'
            },
            children:['item 1']
        },
        {
            tab:'li',
            attr:{
                className:'item'
            },
            children:['item 2']
        }
    ]
}

jQuery实现方法

var data = [
    {
        name:'张三',
        age:20,
        address:'北京'
    },
    {
        name:'里斯',
        age:20,
        address:'天津'
    },
    {
        name:'王五',
        age:22,
        address:'保定'
    },
]
function render(data) {
    $('#container').html('')
    var $table = $('<table>')
    $table.append($('<tr><td>name</td><td>age</td><td>address</td></tr>'))
    data.forEach(function (item) {
        $table.append($('<tr><td>'+item.name+'</td><td>'+item.age+'</td><td>'+item.address+'</td></tr>'))
    })
    $('#container').append($table)
}
$('#button').click(function () {
    data[1].age = 30
    data[2].address = '深圳'
    // re-render
    render(data)
})
render(data)

随机浏览