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

一、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这个集合中的长度和内容会自动跟着发生改变

---

个人公众号（icemanFE）：分享更多的前端技术和生活感悟

个人公众号.png