zoukankan      html  css  js  c++  java
  • 从头实现一个简易版的React虚拟dom和diff算法

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8" />
        <title>从头实现一个简易版的React虚拟dom和diff算法</title>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    </head>
    
    <body>
        <div id="root"></div>
        <script>
        //虚拟dom
        function Element(tagName, props, children) {
            this.tagName = tagName
            this.props = props || {};
            this.children = children;
        }
    
        Element.prototype.render = function() {
            var el = document.createElement(this.tagName)
            var props = this.props
    
            for (var propName in props) {
                var propValue = props[propName]
                el.setAttribute(propName, propValue)
            }
    
            var childEl = document.createTextNode(this.children);
            el.appendChild(childEl)
    
            return el
        }
    
        //diff算法
        function diff(oldTree, newTree) {
            var patches = {}
            var propsPatches = {}
            var oldProps = oldTree.props
            var newProps = newTree.props
            for (key in oldProps) {
                value = oldProps[key]
                if (newProps[key] !== value) {
                    propsPatches[key] = newProps[key]
                }
            }
            patches.props = propsPatches;
            return patches
        }
    
        //更新到页面上
        function patch(node, patches) {
            for (let prop in patches.props) {
                node.setAttribute(prop, patches.props[prop]);
            }
        }
    
        let tree = new Element('div', { 'data-msg': 'xu' }, 'xu');
        let html = tree.render();
        $('#root').html(html);
    
        let index = 0;
        setInterval(function() {
            index = index + 1;
            var newTree = new Element('div', { 'data-msg': 'xu' + index }, 'xu');
            var patches = diff(tree, newTree)
            console.log(patches)
            patch(html, patches)
            tree = newTree
        }, 1000)
        </script>
    </body>
    
    </html>
  • 相关阅读:
    排序算法整理
    V-REP Plugin 开发
    YAML-CPP
    YAML
    V-REP Remote API
    V-REP Plugin
    结构化方法与面向对象方法的比较
    敏捷软件开发vs传统软件工程
    个人项目-地铁出行路线规划程序
    Week1个人作业
  • 原文地址:https://www.cnblogs.com/xutongbao/p/10003202.html
Copyright © 2011-2022 走看看