29--32例子

2020-11-02

29、渲染几万条数据不卡住页面

渲染大数据时，合理使用createDocumentFragment和requestAnimationFrame，将操作切分为一小段一小段执行。
createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。

setTimeout(() => {
    //插入十万条数据
    const total = 100000;
    //一次插入的数据
    const once = 20;
    //插入数据需要的次数
    //Math.ceil() 函数返回大于或等于一个给定数字的最小整数。
    const loopCount = Math.ceil(total / once);
    let countOfRender = 0;
    const ul = document.querySelector('ul');
    //添加数据的方法
    function add() {
        const fragment = document.createDocumentFragment();
        for(let i = 0; i < once; i++) {
            const li = document.createElement('li');
            li.innerText = Math.floor(Math.random() * total);
            fragment.appendChild(li);
        }
        ul.appendChild(fragment);
        countOfRender += 1;
        loop();
    }
    function loop() {
        if(countOfRender < loopCount) {
            window.requestAnimationFrame(add);
        }
    }
    loop();
}, 0);

30、打印出当前网页使用了多少种HTML元素

一行代码可以解决

1
2
3

const fn = () => {
    return [...new Set([...document.querySelectorAll('*')].map(el => el.tagName))].length;
}

值得注意的是：DOM操作返回的是类数组，需要转换为数组之后才可以调用数组的方法。

31、将VirtualDom转化为真实DOM结构

这是当前SPA(Single Page Application)应用的核心概念之一

// vnode结构：
// {
//    tag,
//    attrs,
//    children,
// }

//Virtual DOM => DOM
function render(vnode, container) {
    container.appendChild(_render(vnode));
}
function _render(vnode) {
    //如果是数字类型转化为字符串
    if (typeof vnode === 'number') {
        vnode = String(vnode);
    }
    //字符串类型直接就是文本节点
    if (typeof vnode === 'string') {
        return document.createTextNode(vnode);
    }
    //普通DOM
    const dom = document.createElement(vnode.tag);
    if (vnode.attrs) {
        //遍历属性
        Object.keys(vnode.attrs).forEach(key => {
            const value = vnode.attrs[key];
            dom.setAttribute(key, value);
        })
    }
    //子数组进行递归操作
    vnode.children.forEach(child => render(child, dom));
    return dom;
}

32、字符串解析问题

var a = {
    b: 123,
    c: '456',
    e: '789',
}
var str=`a{a.b}aa{a.c}aa {a.d}aaaa`;
// => 'a123aa456aa {a.d}aaaa'

实现函数使得将str字符串中的{}内的变量替换，如果属性不存在保持原样（比如{a.d}）
类似于模版字符串，但有一点出入，实际上原理大差不差

const fn1 = (str, obj) => {
    let res = '';
    // 标志位，标志前面是否有{
    let flag = false;
    let start;
    for (let i = 0; i < str.length; i++) {
        if (str[i] === '{') {
            flag = true;
            start = i + 1;
            continue;
        }
        if (!flag) res += str[i];
        else {
            if (str[i] === '}') {
                flag = false;
                res += match(str.slice(start, i), obj);
            }
        }
    }
    return res;
}
// 对象匹配操作
const match = (str, obj) => {
    const keys = str.split('.').slice(1);
    let index = 0;
    let o = obj;
    while (index < keys.length) {
        const key = keys[index];
        if (!o[key]) {
            return `{${str}}`;
        } else {
            o = o[key];
        }
        index++;
    }
    return o;
}