专栏首页河湾欢儿的专栏第三节 json数据绑定以及dom回流重绘、映射

第三节 json数据绑定以及dom回流重绘、映射

----------------------------------json----------------------------------------------
json是一种特殊的数据格式
Json相对于普通格式来说,只是把属性名用双引号包起来了(单引号不行)
在window浏览器中,提供了一个叫做(window.JSON)JSON的属性,它里面提供了两个方法:
1>JSON.parse(xxx)   在ie6~8不支持
2>JSON.stringify(xxx)  在ie6~8不支持

    //1>把JSON格式的字符串转换为JSON的对象
    var str1 = '{"name":"张三","age":18}';
    JSON.parse(str1);//ie6~8不支持
    eval("(" + str1 + ")");//一定要记住使用eval的话,不要忘记手动加一个括号(ie6~8支持)

    //2>把JSON格式的对象转换为JSON格式的字符串
    var str2 = {"name": "张三", "age": 18};
JSON.stringify(str2);//ie6~8不支持

------------------------------数据绑定以及dom回流-----------------------------------------------
第一种方式 动态创建节点和把它追加到页面中的方式实现数据绑定
        for (var i = 0; i < ary.length; i++) {
            var ali1 = document.createElement('li');
            ali1.innerHTML='<span>'+'0'+(i+4)+'</span>'+ary[i].name;
            oul.appendChild(ali1);
        }
优势:把需要动态绑定的内容一个个的追加到页面中,对原来的元素没有影响
弊端:浏览器每当创建一个li,我们就添加到页面中,引发一次dom的回流,最终导致回流次数过多,影响性能


第二种:字符串拼接方式:首先循环需要绑定的数据,然后把需要动态绑定的标签以字符串方式拼接到一起,拼接完成后,最后统一添加到页面中,工作中最常用的方式
        var str = '';
        for (var i = 0; i < ary.length; i++) {
            str += '<li>';
            str += '<span>' + '0' + (i + 4) + '</span>' + ary[i].name;
            str += '</li>';
        }
        oul.innerHTML += str;
        相当于oul.innerHTML = oul.innerHTML(把之前的三个li以字符串的方式获取到)+str 拼接完成的整体还是字符串,最后把字符串统一的添加到了页面中,浏览器还需要把字符串渲染成对应的标签
弊端:我们把新拼接的字符串添加到ul中,原来标签绑定事件消失了,鼠标滑过效果消失
优势:事先把内容拼接好,最后统一添加到页面中,只引发一次回流



    第三种方式:文档碎片
    var frg = document.createDocumentFragment();//创建一个文档碎片,相当于创建了一个容器
    for (var i = 0; i < ary.length; i++) {
        var ali1 = document.createElement('li');
        ali1.innerHTML = '<span>' + '0' + (i + 4) + '</span>' + ary[i].name;
        frg.appendChild(ali1);
    }
    oul.appendChild(frg);
    frg = null;


 js中dom深入知识(浏览器是如何渲染页面的)
 1、回流(重排)当页面中的html结构发生改变(增加或者删除元素或者位置发生改变),浏览器都需要重新计算一遍最新的dom结构,重新的对当前页面进行渲染
 2、重绘  某一个元素的部分样式发生改变了(背景颜色、字体大小),浏览器只需要重新渲染当前元素即可
 js优化性能:尽量减少回流
---------------------------------------------表格排序以及dom映射----------------------------------
表格排序:把页面中html结构,按照某一个规律进行升降序排序
上课案例:图1排列成图2

css样式略

html结构:
<ul>
    <li>1</li>
    <li>19</li>
    <li>10</li>
    <li>2</li>
</ul>

js写法:
    var oul = document.getElementsByTagName('ul')[0];
//获取到类数组
var ali=document.getElementsByTagName('li');
//将类数组转换为数组
    var arr = utils.listToArray(ali);
    //  给数组进行排序
    arr.sort(function (a, b) {
        return parseFloat(a.innerHTML) - parseFloat(b.innerHTML);
    });
    // 按照数组中的最新顺序依次的把对应的li添加到页面中
    var frg = document.createDocumentFragment();
    for (var i = 0; i < arr.length; i++) {
        frg.appendChild(arr[i]);
    }
    oul.appendChild(frg);
frg = null;
页面上为何不是8条数据?
原因:由于dom映射机制,操作的是每一个li元素对象,把li元素对象的顺序追加到oul中,同时也相当于让页面中的li标签的顺序调整了

dom映射机制:
页面中的标签和js中获取到的元素对象(元素集合)是紧紧的绑定在一起的,页面中的html结构改变了,js中不需要重新获取,集合里面的内容也会跟着自动改变

作业:复杂的表格排序详见案例库
升降序的排列规律:利用了-1*1=-1  -1*-1=1的特点

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 隔行变色

    河湾欢儿
  • getByClass

    河湾欢儿
  • 标签

    p,h,a,b,u,i,s,em,del,ins,strong,ul,li,ol,

    河湾欢儿
  • BBS论坛(二十六)

    zhang_derek
  • 不可思议的纯CSS导航栏下划线跟随效果

    Sb_Coco
  • js - 移动端的超出滚动功能,附带滚动条,可解决弹层中滚动穿透问题。

    1、解决滚动穿透:通过给弹层绑定touchmove和mousewheel事件,取消默认行为实现。

    xing.org1^
  • 不可思议的纯CSS导航栏下划线跟随效果

    Sb_Coco
  • React学习(9)—— 高阶应用:虚拟Dom差异比对算法

    React提供了一系列声明性的API接口,因此在使用时不必担心每次库的更新会修改API接口。这样可以降低编写应用的复杂度,但是带来的问题是无法很好的理解Reac...

    随风溜达的向日葵
  • React 虚拟Dom渲染算法

    React提供了一系列声明性的API接口,因此在使用时不必担心每次库的更新会修改API接口。这样可以降低编写应用的复杂度,但是带来的问题是无法很好的理解Reac...

    随风溜达的向日葵
  • React应用渲染界面的入口

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券