由数据绑定和排序引入的几个 JavaScript 知识点

961 阅读7分钟

一、sort深入

这次我们要完成一个表格排序的案例,那说到排序,最终肯定是归结于数组的排序。对于数组的排序,我们最先想到的肯定是sort方法,所以我们深入了解一下sort。

1.1、基本排序

定义数组:

var ary = [22, 3, 14, 12, 23, 1, 48];

在mdn中对sort的定义如下:

arr.sort(compareFunction)
compareFunction:可选。用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序。

从mdn的描述中可以看出,如果没有指定一个函数作为参数,那么只能比较10以内的数字,所以一般都会指定一个函数作为参数。

在compareFunction中可以传入两个参数假定为a、b,这两个参数即为待比较多两个数:

  • a:每一次执行匿名函数的时候,找到的数组中的当前项;
  • b:当前项的后一项

compareFunction的返回值则为一个数字,如果返回值大于0,则让a和b交换一下位置,如果返回值小于等于0,原来的位置不动。

在本例中:

  • 如果:return a - b,表示升序排序,如果a大于b,返回值大于0,a和b交换位置,输出的结果为:[1, 3, 12, 14, 22, 23, 48]

  • 如果:return b - a,表示降序排序,如果b大于a,返回值大于0,a和b交换位置,输出的结果为:[48, 23, 22, 14, 12, 3, 1]

1.2、对象数组(二维数组)排序

定义对象数组:

var ary = [
    {name: 'iceman', age: 25},
    {name: 'mengzhe', age: 13},
    {name: 'shoushou', age: 107},
    {name: 'jiajia', age: 256}
];

对象数组的排序,正常情况都是要求根据某个值为数字的属性来排序,在本例中,我们要求以年龄来排序。

sort方法的参数compareFunction的参数中两个参数,并一定就一定是要数字,这两个参数是数组中的某一项,注意是数组中的某一项哦!也就是说在对象数组中,这两个参数代表的是一个对象。在得到了这个结论之后,我们就可以根据通过对象的属性来排序了:

ary.sort(function (a, b) {
    return parseFloat(a.age) - parseFloat(b.age);
});
console.log(ary);

对象数组排序后的结果.png

二、json

现在与服务端的交互中一般都是使用json,应该基本被使用xml了,我是做Android开发的,在我开始做Android的时候就是使用json,所以json也是现在主流的一种数据交互格式。。

可能很多人会将json归结于一种新的数据类型,其实并不是这样的,json只是一种特殊的数据格式,归根结底json还是对象数据类型的。比如,

普通格式的对象如下:

var obj = {name:'iceman' , age:7};

json格式对象如下:

var jsonObj = {"name":"iceman" , "age":7};

相对于普通格式的对象来说,json对象只是把属性名用双引号包起来了。

在window浏览器对象中,提供了一个叫做JSON的属性(window.JSON),它里面提供了两个方法:

  • JSON.parse :把JSON格式的字符串,转换为JSON格式的对象;
  • JSON.stringify :把JSON格式的对象,转换为JSON格式的字符串;
var jsonObj = {"name":"iceman" , "age":7};
var jsonStr = JSON.stringify(jsonObj); // --> 字符串
console.log(jsonStr);

var str = '{"name":"iceman" , "age":7}';
console.log(JSON.parse(str));

注意: 在IE6~7中,window下没有JSON属性,所以parse和stringify方法都不存在了,那么这时候要把JSON格式的字符串转换为JSON格式的对象可以使用eval方法:

var str = '{"name":"iceman" , "age":7}';
eval("(" + str + ")");

使用eval装好JSON格式的对象,一定要手动加一个小括号。

二、数据绑定

2.1、准备JSON格式的数据

var ary = [
    {
        "title": "11111",
        "desc": "aaaaaaaa"
    },
    {
        "title": "22222",
        "desc": "bbbbbbbb"
    }
  ......
];

2.2、页面结构

<ul id="ul1">
    <li>原来就有的,这里有鼠标的移入移出事件</li>
</ul>
body, ul, li {margin: 0; padding: 0; list-style: none;}
#ul1 {margin: 10px auto; padding: 10px; width: 300px; border:1px solid #008000;  }
#ul1 li {position: relative; padding-left: 28px;  height:35px; line-height: 35px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;  }
#ul1 li span { display: block; position: absolute;  top: 6px;  left: 0;  width: 21px;  height: 21px;  line-height: 20px;  text-align: center;  border: 1px solid #ccc;  font-size: 12px;  border-radius: 50%;  }

寻找元素以及添加移入移出事件:

var oUl = document.getElementById('ul1');
var oLis = oUl.getElementsByTagName('li');

for (var i = 0; i < oLis.length; i++) {
    oLis[i].onmouseover = function () {
        this.style.backgroundColor = 'pink';
    };
    oLis[i].onmouseout = function () {
        this.style.backgroundColor = '';
    };
}

2.3、DOM深入:重绘与回流

  • 回流(也叫重排):当页面中的HTML结构发生改变(增加、删除元素、位置发生改变...),浏览器都需要重新计算一遍最新的DOM结构,重新对当前的页面进行渲染;

  • 重绘:某一个元素的部分样式发生改变了(背景颜色、字号等),浏览器只需要重新渲染当前页面即可;

2.4、动态创建节点再追加到页面的方式实现数据绑定

for (var i = 0; i < ary.length; i++) {
    var cur = ary[i];
    var oLi = document.createElement('li');
    oLi.innerHTML = '<span>' + i + '</span>' + cur.title + '---' + cur.desc;
    oUl.appendChild(oLi);
}

优势: 把需要动态绑定的内容一个个追加到页面中,对原来的元素没有任何的影响;

缺点:每当创建一个li,就添加到页面中,会引发一次DOM回流最后引发回流的次数过多,影响性能。

2.5、字符串拼接的方式实现数据绑定

var str = "";
for (var i = 0; i < ary.length; i++) {
    var cur = ary[i];
    str += '<li>';
    str += '<span>' + i + '</span>';
    str += cur.title;
    str += '</li>'
}
oUl.innerHTML += str;

首先循环需要绑定的数据,然后把需要动态绑定的标签以字符串的方式拼接到一起,拼接完成最后统一添加到页面中。

拼接完成的整体还是字符串,最后把字符串统一的添加到页面中,浏览器还需要把字符串渲染成最新的标签。

字符串拼接绑定数据,使以后工作中最常用的一种绑定数据的方式,因为所有模板引擎的数据绑定(jade、kTemplate....)以及所有的框架(angular.js、backbone.js....)的原理都是字符串拼接,所以说你可能没有自己直接使用字符串拼接,但是在使用引擎以及框架的过程已经用到了。

优势: 事先把内容拼接好,最后统一添加到页面中,只引发一次回流;

缺点: 把新拼接的字符串添加到#ul1中,原有的三个li的鼠标滑过效果都消失了(原来标签绑定的事件都消失了)。

2.6、文档碎片的方式实现数据绑定

var frg = document.createDocumentFragment(); // 创建一个文档碎片,相当于临时创建了一个容器
for (var i = 0; i < ary.length; i++) {
    var cur = ary[i];
    var oLi = document.createElement('li');
    oLi.innerHTML = '<span>' + i + '</span>' + cur.title;
    frg.appendChild(oLi);
}
oUl.appendChild(frg);
frg = null;

这种方式解决了以上的问题,但是实际开发中用的很少。

三、表格排序

<ul id="ul1">
    <li>98</li>
    <li>99</li>
    <li>96</li>
    <li>95</li>
    <li>90</li>
</ul>
var utils = {
    listToArray:function (likeAry) {
        var ary = [];
        try {
            ary = Array.prototype.slice.call(likeAry);
        } catch (e) {
            for (var i = 0; i < likeAry.length; i++) {
                ary[ary.length] = likeAry[i];
            }
        }
        return ary;
    }
};
var oUl = document.getElementById('ul1');
var oLis = oUl.getElementsByTagName('li');

// 1、先把元素集合类数组转换为数组
var ary = utils.listToArray(oLis);

// 2、给数组进行排序:按照每一个li中的内容大小进行排序
ary.sort(function (a, b) {
    return parseFloat(a.innerHTML) - parseFloat(b.innerHTML);
});

// 3、按照ary中存储的最新顺序,依次的把对应的li添加到页面当中
var frg = document.createDocumentFragment();
for (var i = 0; i < ary.length; i++) {
    var obj = ary[i];
    frg.appendChild(obj);
}
oUl.appendChild(frg);
frg = null;

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

var oUl = document.getElementById('ul1');
var oLis = oUl.getElementsByTagName('li');
console.log(oLis.length); // 5

var oLi = document.createElement('li');
oUl.appendChild(oLi);
console.log(oLis.length); // 6,没有重新的获取,但是oLis这个集合中的长度和内容会自动跟着发生改变