最近在学习js表格排序，没想到不起眼的表格排序其实暗含了很多JS知识点。在此记录学习过程。希望对大家有所帮助。完整的表格排序涉及以下知识点：调用方法使用sort方法深入数据绑定DOM映射。下面对这些知识点进行详细的总结，最后结合这些知识点实现如下表格排序案例。完整案例源码：https://github.com/daweihe/JS...一、知识点总结1、调用方法使用调用方法的作用是改变方法中this的指向。调用方法定义在Function.prototype中。我们定义的任何函数都可以被视为Function类的实例。然后就可以通过实例的__proto__属性找到类的原型了。任何函数都可以调用call和apply等方法。我们先来看一个例子：varobj={name:'JS'}functiontestCall(){console.log(this);}testCall.call(obj);//{name:"JS"}首先，函数testCall通过原型链式搜索机制找到call方法并执行。在执行过程中，call方法将调用call方法的函数实例中的this改为call的第一个参数，然后调用call方法的实例函数执行。看两个题目：functionfn1(){console.log(1);console.log(this);}functionfn2(){console.log(2);console.log(this);}fn1.call(fn2);//这个->fn2fn1.call.call(fn2);//这里的call是在function.__proto__.call的call方法中改变this，相当于call方法执行时的执行参数。一个参数用来改变这个，从第二个参数开始就是传递给函数调用的参数。在非严格模式下，在不向调用方法传递参数后，或者传递null或undefined后，this指向window。求和.call();//windows.call(null);//windowsum.call(undefined);//window严格模式下call的执行与非严格模式不同：sum.call();//未定义和。呼叫（空）；//nullsum.call(undefined);//undefined使用下面的call方法实现类数组转数组的方法：functionlistToArray(likeAry){varary=[];try{ary=Array.prototype.slice.call(likeAry);}catch(e){for(vari=0;i'+(i+5)+''+ary[i].title;myUl.appendChild(oli);//动态添加元素}每次添加都会造成DOM回流。如果数据量太大，这会严重影响性能。关于DOM的回流和重绘，推荐你看这篇文章：http://www.css88.com/archives...拼接字符串：varstr="";for(vari=0;i';str+='';str+=(i+5);str+='';str+=ary[i].title;str+='';}myUl.innerHTML+=str;虽然这种方法只会导致一次重排，但它会删除原始元素中的所有事件和属性。如果我们在列表中的li标签中加入鼠标移动和背景颜色改变的事件，那么这个方法就会使这个事件失效。为了解决以上两种数据绑定方式带来的问题，我们使用文档片段来添加数据。varfrg=document.createDocumentFragment();//创建文档片段for(vari=0;i'+(i+5)+''+ary[i].title;frg.appendChild(li);//动态添加数据到文档片段}myUl.appendChild(frg);//向页面一次性添加数据frg=null;//释放内存，只引起一次DOM回流，原先存在的事件会保留。4、DOM映射DOM映射机制：所谓映射是指两个元素集之间元素之间的“对应”关系。这就是页面中的标签集合与JS中获取的元素对象（元素集合）的关系。如果页面中的HTML标签结构发生变化，集合中相应的内容也会自动发生变化。12345为此类列表使用以下脚本：varmyul=document.getElementById("myul");varmylis=myul.getElementsByTagName('li');对于(vari=mylis.length-1;i>=0;i--){myul.appendChild(mylis[i]);}console.log(mylis.length);//5将得到的列表元素倒序重新插入到ul中，那么ul列表就会变成这样：54321我们看到list的长度还是5，只是位置颠倒了。这是因为每个li标签和JS中获取到的标签对象都有对应关系。当标签重新插入页面时，页面中相应的标签将移动到插入的位置。这是DOM映射。二、实现表格排序1、使用ajax获取数据。使用动态数据获取的原因是使用文档片段来绑定数据。varres='';//声明一个全局变量来接收数据varxhr=newXMLHttpRequest();xhr.open('get','date.txt',false);xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){res=JSON.parse(xhr.responseText);}}xhr.send(null);此时数据保存在全局变量res中。2.使用文档片段绑定数据varfrg=document.createDocumentFragment();for(leti=0;i
