第三节 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 条评论
登录 后参与评论

相关文章

来自专栏谈补锅

开发中常用的JS知识点集锦

802
来自专栏雪地二货笔记库

vue学习笔记10-组件

之后就可以在html中<tagName></tagName>来使用它。 自定义组件也分为全局和局部两种,全局可以在任何实例中使用,而局部只有注册后才能使用。 全...

1151
来自专栏LeoXu的博客

Flex笔记_MX DataGrid、列表和树

columnCount、columnWidth、dataProvider、iconField、iconFunction、labelField、labelFun...

1092
来自专栏liulun

自己动手写UI库——引入ExtJs(布局)

第一:来看一下最终的效果 ? 第二:来看一下使用方法: ? 第三: Component类代码如下所示: public class Compo...

2035
来自专栏魂祭心

原 js页面传值参数打包类

3205
来自专栏宋凯伦的技术小栈

【工作中学习1】两个设计模式:Singleton(单例)和 Adapter(适配器)

  好久没有写自己的学习小文章,罪过罪过。。最近本菜鸟在项目中接触到经常用到的设计模式,首先是Singleton(单例),这个相信大家都会用到很多,所以自己用代...

2015
来自专栏葡萄城控件技术团队

如何将第三方控件嵌入ToolStrip控件,并提供Design-Time支持

最近研究了一下如何将第三方控件嵌入到ToolStrip控件中,并能提供Design-Time下的支持. 下面将详细讲解如何把系统的MonthCalendar控件...

2088
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(八)each,多库共存,包装集,插件

each 方法用来遍历 jQuery 对象的,它的参数是一个事件处理函数,这个事件处理函数有两个参数,第一个参数是索引,第二个参数时索引对应的 DOM 对象,使...

1224
来自专栏进击的君君的前端之路

定时器

1746
来自专栏视觉求索无尽也

Markdown:技巧进阶参考资料:开始学习:

本文作者:keloli 本文说明:本文首发于2017.08.01,用于收集Markdown排版中的一些技巧,会不断更新。

1822

扫码关注云+社区