Native JS implementiert die Tabellensortierung

Ich habe kürzlich das Sortieren von Tabellen in JS gelernt und nicht erwartet, dass das unauffällige Sortieren von Tabellen tatsächlich viele JS-Wissenspunkte impliziert. Zeichnen Sie diesen Lernprozess hier auf. Ich hoffe, es hilft auch allen.

Die vollständige Tabellensortierung umfasst die folgenden Wissenspunkte:

• Aufrufmethode verwendet die

• Sortiermethode im Detail

• Datenbindung

• DOM-Mapping

Im Folgenden werden diese Wissenspunkte detailliert zusammengefasst und schließlich kombiniert Wissenspunkte implementieren den folgenden Tabellensortierungsfall.

Vollständiger Fallquellcode: https://github.com/daweihe/JS...

1. Zusammenfassung der Wissenspunkte

1. Verwendung der Aufrufmethode

Die Funktion der Aufrufmethode besteht darin, diesen Zeiger in der Methode zu ändern.

Aufruf Diese Methode ist in Function.prototype definiert. Jede von uns definierte Funktion kann als Instanz der Klasse Function betrachtet werden. Anschließend können Sie den Prototyp der Klasse über das Attribut __proto__ der Instanz finden. Jede Funktion kann Methoden wie call und apply aufrufen.

Schauen wir uns zunächst ein Beispiel an:

var obj = {
    name : 'JS'
}

function testCall () {
    console.log(this);
}

testCall.call( obj );     // {name: "JS"}

Zuerst findet die Funktion testCall die Aufrufmethode über den Prototypketten-Suchmechanismus und führt sie während des Ausführungsprozesses aus Methode platziert die Aufrufmethode in der Funktionsinstanz. Dies wird in den ersten Parameter von Aufruf geändert, und dann wird die Instanzfunktion der Aufrufmethode aufgerufen und ausgeführt.

Sehen Sie sich zwei Fragen an:

function fn1() {
    console.log(1);
    console.log(this);
}

function fn2() {
    console.log(2);
    console.log(this);
}

fn1.call(fn2);   //this -> fn2
fn1.call.call(fn2);   //这里的call是改变function.__proto__.call的call方法中的this，相当于执行参数

Wenn die Aufrufmethode ausgeführt wird, wird der erste Parameter der Aufrufmethode verwendet, um dies zu ändern, und ab dem zweiten Parameter werden Parameter übergeben der Funktionsaufruf.

Wenn im nicht-strikten Modus keine Parameter an die Aufrufmethode übergeben werden oder null oder undefiniert übergeben wird, zeigt dies auf window.

sum.call(); //window
sum.call(null); //window
sum.call(undefined); //window

Die Aufrufausführung im strikten Modus unterscheidet sich von der im nicht strikten Modus:

sum.call(); //undefined
sum.call(null); //null
sum.call(undefined); //undefined

Im Folgenden wird die Aufrufmethode verwendet, um eine Methode zum Konvertieren eines Klassenarrays zu implementieren ein Array:

function listToArray (likeAry) {
    var ary = [];
    try {
        ary = Array.prototype.slice.call(likeAry);
    } catch (e) {
        for (var i = 0; i <p>Zu den Aufrufmethoden gehören die Apply- und Bind-Methoden. Hier ist eine kurze Zusammenfassung. </p><p>Die Apply-Methode funktioniert genauso wie die Call-Methode, außer dass die Form der Parameterübergabe unterschiedlich ist. Apply verpackt die Parameter der Funktion in ein Array: </p><pre class="brush:php;toolbar:false">function sum(num1, num2) {
    console.log(num2 + num1);
    console.log(this);
}

sum.apply(null,[100,200]);

Die Bindung Die Methode wird auch zum Ändern verwendet. Das Schlüsselwort this wird verwendet, aber es ändert nur den Sinn von this und führt nicht sofort die Funktion aus, die this aufruft.

function sum(num1, num2) {
    console.log(num2 + num1);
    console.log(this);
}

var obj = {name : 'zx'}

var temp = sum.bind(obj);   //temp已经是被改变了this的函数
temp(100,200);              //当我们需要的时候才执行


//或者像这样处理
var temp = sum.bind(null, 100, 200);
temp();

Bind-Methode verkörpert die Vorverarbeitungsidee in js.

2. Detaillierte Sortierung

Wir wissen, dass die sort-Methode von Arrays nur Arrays innerhalb von 10 sortieren kann. Wenn das zu sortierende Array Zahlen größer als 10 enthält, müssen wir die Rückruffunktion an die sort-Methode übergeben. Die übliche lautet wie folgt:

ary.sort(function (a,b) {
    return a - b;
});

Auf diese Weise wird die Array kann in aufsteigender Reihenfolge sortiert werden. Was ist also das Prinzip dieser Sortierung?

Für die beiden übergebenen Parameter gilt: a stellt das aktuelle Element im gefundenen Array dar und b stellt das Element nach dem aktuellen Element dar.

• return a -b: Wenn a größer als b ist, wird das Ergebnis zurückgegeben und a und b tauschen die Positionen. Wenn a kleiner als b ist, bleiben die Positionen von a und b unverändert. Dies ist die aufsteigende Sortierung

• return b -a: Wenn b größer als a ist, wird das Ergebnis zurückgegeben und a und b tauschen die Positionen. Wenn a kleiner als b ist, bleiben die Positionen von a und b unverändert. Dies ist eine absteigende Reihenfolge

Wie sortiert man ein solches zweidimensionales Array nach Alter, nachdem man die Grundprinzipien verstanden hat?

var persons = [{
    name:'dawei',
    age:55
},{
    name:'ahung',
    age:3
},{
    name:'maomi',
    age:2
},{
    name:'heizi',
    age:78
},{
    name:'afu',
    age:32
}];

Eigentlich ist es ganz einfach:

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

Wenn Sie nach Namen sortieren, ist die localeCompare()-Methode der Zeichenfolge beteiligt: ​​

ary.sort(function(a,b){
    return a.name.localeCompare(b.name);
});

name.localeCompare() Diese Methode vergleicht die Buchstaben der beiden Zeichenfolgen unter den 24 englischen Buchstaben, wenn der erste Buchstabe der vorherigen Zeichenfolge früher erscheint als das erste Zeichen der zweiten Zeichenfolge. Geben Sie . Wenn es später erscheint, wird die erste Zeichenfolge als größer betrachtet und 1 zurückgegeben. Wenn die verglichenen Zeichen gleich sind. Vergleichen Sie dann das nächste Zeichen. -1

Diese Methode ist sehr praktisch und wird oft zum Sortieren nach Nachnamen verwendet. Bei chinesischen Schriftzeichen wandelt diese Methode die chinesischen Schriftzeichen zum Vergleich automatisch in chinesisches Pinyin um.

3. Datenbindung

In js wird im Allgemeinen dynamische Bindung oder String-Splicing verwendet, um die Datenbindung zu implementieren.

Dynamische Bindung:

//ary为需要添加到页面中的数据数组
var op = document.getElementById("box");//获取容器
var myUl = op.getElementsByTagName("ul")[0];//获取列表

var arrLength = ary.length;
for (var i = 0;i ' + (i + 5) + '' + ary[i].title;
    myUl.appendChild(oli);//动态添加元素
}

Jede Hinzufügung führt zu einem DOM-Reflow. Wenn die Datenmenge zu groß ist, beeinträchtigt dies die Leistung erheblich.

Bezüglich DOM-Reflow und Neuzeichnen empfehle ich Ihnen, diesen Artikel zu lesen: http://www.css88.com/archives...

Strings verbinden:

var str = "";
for(var i=0; i<ary.length>';
    str += '<span>';
    str += (i+5);
    str += '</span>';
    str += ary[i].title;
    str += '';
}

myUl.innerHTML += str;</ary.length>

Obwohl diese Methode nur einen Reflow verursacht, werden alle Ereignisse und Attribute aus den ursprünglichen Elementen entfernt. Wenn wir der Liste ein Ereignis für das li-Tag hinzufügen, wenn die Maus hinein bewegt wird und der Hintergrund seine Farbe ändert, macht diese Methode dieses Ereignis ungültig.

Um die durch die beiden oben genannten Datenbindungsmethoden verursachten Probleme zu lösen, verwenden wir Dokumentfragmente zum Hinzufügen von Daten.

var frg = document.createDocumentFragment();//创建文档碎片
for (var i =0; i <ary.length>' + ( i + 5 ) + '' + ary[i].title;
    frg.appendChild(li);//将数据动态添加至文档碎片中
}
myUl.appendChild(frg); //将数据一次性添加到页面中
frg = null;  //释放内存</ary.length>

Dies führt nur einmal zu einem DOM-Reflow und behält die ursprünglich vorhandenen Ereignisse bei.

4、DOM映射

DOM映射机制：所谓映射，就是指两个元素集之间元素相互“对应”的关系。页面中的标签集合和在JS中获取到的元素对象（元素集合）就是这样的关系。如果页面中的HTML标签结构发送变化，那么集合中对应的内容也会跟着自动改变。

    
• 1
    
• 2
    
• 3
    
• 4
    
• 5

对于这样一个列表使用下列脚本：

var myul = document.getElementById("myul");
var mylis = myul.getElementsByTagName('li');
    for (var i = mylis.length - 1 ; i >= 0; i --) {
        myul.appendChild(mylis[i]);
    }
console.log(mylis.length);   // 5

将获取到的列表元素反序重新插入ul中，那么ul列表会变成下面这样：

    
• 5
    
• 4
    
• 3
    
• 2
    
• 1

我们看到列表的长度依然是5，只是位置颠倒了。这是因为每个li标签和JS中获取的标签对象存在一个对应关系，当某个标签被重新插入到页面中时，页面中对应的标签会移动到插入的位置。这就是DOM映射。

二、实现表格排序

1、使用ajax获取数据

之所以使用动态获取数据，是为了使用文档碎片绑定数据。

var res = ''; //声明一个全局变量，接收数据
var xhr = new XMLHttpRequest();
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、使用文档碎片绑定数据

var frg = document.createDocumentFragment();
for (let i = 0; i <h3 id="对表格进行排序">3、对表格进行排序</h3><p>这里涉及的点较多</p><pre class="brush:php;toolbar:false">//为两列添加点击事件
for (let i = 0; i <p>表格排序应用很常见，在面试中也会有这样的题目。这个小案例做下来，受益匪浅。这是我在学习的某峰学院的JS课程中的一个案例，如果对JS掌握不扎实的同学，欢迎保存：<code>链接: https://pan.baidu.com/s/1jHVy8Uq 密码: v4jk</code>。如果链接失效，加Q群领取：<code>154658901</code>。</p><p class="article fmt article__content"><br></p><p>Ich habe kürzlich das Sortieren von Tabellen in JS gelernt und nicht erwartet, dass das unauffällige Sortieren von Tabellen tatsächlich viele JS-Wissenspunkte impliziert. Zeichnen Sie diesen Lernprozess hier auf. Ich hoffe, es hilft auch allen. </p><p>Die vollständige Tabellensortierung umfasst die folgenden Wissenspunkte: </p>

• Aufrufmethode verwendet die

• Sortiermethode im Detail

• Datenbindung

• DOM-Mapping

Im Folgenden werden diese Wissenspunkte detailliert zusammengefasst und schließlich kombiniert Wissenspunkte implementieren den folgenden Tabellensortierungsfall.

Vollständiger Fallquellcode: https://github.com/daweihe/JS...

1. Zusammenfassung der Wissenspunkte

1. Verwendung der Aufrufmethode

Die Funktion der Aufrufmethode besteht darin, diesen Zeiger in der Methode zu ändern.

Aufruf Diese Methode ist in Function.prototype definiert. Jede von uns definierte Funktion kann als Instanz der Klasse Function betrachtet werden. Anschließend können Sie den Prototyp der Klasse über das Attribut __proto__ der Instanz finden. Jede Funktion kann Methoden wie call und apply aufrufen.

Schauen wir uns zunächst ein Beispiel an:

var obj = {
    name : 'JS'
}

function testCall () {
    console.log(this);
}

testCall.call( obj );     // {name: "JS"}

Zuerst findet die Funktion testCall die Aufrufmethode über den Prototypketten-Suchmechanismus und führt sie während des Ausführungsprozesses aus Methode platziert die Aufrufmethode in der Funktionsinstanz. Dies wird in den ersten Parameter von Aufruf geändert, und dann wird die Instanzfunktion der Aufrufmethode aufgerufen und ausgeführt.

Sehen Sie sich zwei Fragen an:

function fn1() {
    console.log(1);
    console.log(this);
}

function fn2() {
    console.log(2);
    console.log(this);
}

fn1.call(fn2);   //this -> fn2
fn1.call.call(fn2);   //这里的call是改变function.__proto__.call的call方法中的this，相当于执行参数

Wenn die Aufrufmethode ausgeführt wird, wird der erste Parameter der Aufrufmethode verwendet, um dies zu ändern, und ab dem zweiten Parameter werden Parameter übergeben der Funktionsaufruf.

Wenn im nicht-strikten Modus keine Parameter an die Aufrufmethode übergeben werden oder null oder undefiniert übergeben wird, zeigt dies auf window.

sum.call(); //window
sum.call(null); //window
sum.call(undefined); //window

Die Aufrufausführung im strikten Modus unterscheidet sich von der im nicht strikten Modus:

sum.call(); //undefined
sum.call(null); //null
sum.call(undefined); //undefined

Im Folgenden wird die Aufrufmethode verwendet, um eine Methode zum Konvertieren eines Klassenarrays zu implementieren ein Array:

function listToArray (likeAry) {
    var ary = [];
    try {
        ary = Array.prototype.slice.call(likeAry);
    } catch (e) {
        for (var i = 0; i <p>Zu den Aufrufmethoden gehören die Apply- und Bind-Methoden. Hier ist eine kurze Zusammenfassung. </p><p>Die Apply-Methode funktioniert genauso wie die Call-Methode, außer dass die Form der Parameterübergabe unterschiedlich ist. Apply verpackt die Parameter der Funktion in ein Array: </p><pre class="brush:php;toolbar:false">function sum(num1, num2) {
    console.log(num2 + num1);
    console.log(this);
}

sum.apply(null,[100,200]);

Die Bindung Die Methode wird auch zum Ändern verwendet. Das Schlüsselwort this wird verwendet, aber es ändert nur den Sinn von this und führt nicht sofort die Funktion aus, die this aufruft.

function sum(num1, num2) {
    console.log(num2 + num1);
    console.log(this);
}

var obj = {name : 'zx'}

var temp = sum.bind(obj);   //temp已经是被改变了this的函数
temp(100,200);              //当我们需要的时候才执行


//或者像这样处理
var temp = sum.bind(null, 100, 200);
temp();

Bind-Methode verkörpert die Vorverarbeitungsidee in js.

2. Detaillierte Sortierung

Wir wissen, dass die sort-Methode von Arrays nur Arrays innerhalb von 10 sortieren kann. Wenn das zu sortierende Array Zahlen größer als 10 enthält, müssen wir die Rückruffunktion an die sort-Methode übergeben. Die übliche lautet wie folgt:

ary.sort(function (a,b) {
    return a - b;
});

Auf diese Weise wird die Array kann in aufsteigender Reihenfolge sortiert werden. Was ist also das Prinzip dieser Sortierung?

Für die beiden übergebenen Parameter gilt: a stellt das aktuelle Element im gefundenen Array dar und b stellt das Element nach dem aktuellen Element dar.

• return a -b: Wenn a größer als b ist, wird das Ergebnis zurückgegeben und a und b tauschen die Positionen. Wenn a kleiner als b ist, bleiben die Positionen von a und b unverändert. Dies ist die aufsteigende Sortierung

• return b -a: Wenn b größer als a ist, wird das Ergebnis zurückgegeben und a und b tauschen die Positionen. Wenn a kleiner als b ist, bleiben die Positionen von a und b unverändert. Dies ist eine absteigende Reihenfolge

Wie sortiert man ein solches zweidimensionales Array nach Alter, nachdem man die Grundprinzipien verstanden hat?

var persons = [{
    name:'dawei',
    age:55
},{
    name:'ahung',
    age:3
},{
    name:'maomi',
    age:2
},{
    name:'heizi',
    age:78
},{
    name:'afu',
    age:32
}];

Eigentlich ist es ganz einfach:

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

Wenn Sie nach Namen sortieren, ist die localeCompare()-Methode der Zeichenfolge beteiligt: ​​

ary.sort(function(a,b){
    return a.name.localeCompare(b.name);
});

name.localeCompare() Diese Methode vergleicht die Buchstaben der beiden Zeichenfolgen unter den 24 englischen Buchstaben, wenn der erste Buchstabe der vorherigen Zeichenfolge früher erscheint als das erste Zeichen der zweiten Zeichenfolge. Geben Sie . Wenn es später erscheint, wird die erste Zeichenfolge als größer betrachtet und 1 zurückgegeben. Wenn die verglichenen Zeichen gleich sind. Vergleichen Sie dann das nächste Zeichen. -1

Diese Methode ist sehr praktisch und wird oft zum Sortieren nach Nachnamen verwendet. Bei chinesischen Schriftzeichen wandelt diese Methode die chinesischen Schriftzeichen zum Vergleich automatisch in chinesisches Pinyin um.

3. Datenbindung

In js wird im Allgemeinen dynamische Bindung oder String-Splicing verwendet, um die Datenbindung zu implementieren.

Dynamische Bindung:

//ary为需要添加到页面中的数据数组
var op = document.getElementById("box");//获取容器
var myUl = op.getElementsByTagName("ul")[0];//获取列表

var arrLength = ary.length;
for (var i = 0;i ' + (i + 5) + '' + ary[i].title;
    myUl.appendChild(oli);//动态添加元素
}

Jede Hinzufügung führt zu einem DOM-Reflow. Wenn die Datenmenge zu groß ist, beeinträchtigt dies die Leistung erheblich.

Bezüglich DOM-Reflow und Neuzeichnen empfehle ich Ihnen, diesen Artikel zu lesen: http://www.css88.com/archives...

Strings verbinden:

var str = "";
for(var i=0; i<ary.length>';
    str += '<span>';
    str += (i+5);
    str += '</span>';
    str += ary[i].title;
    str += '';
}

myUl.innerHTML += str;</ary.length>

Obwohl diese Methode nur einen Reflow verursacht, werden alle Ereignisse und Attribute aus den ursprünglichen Elementen entfernt. Wenn wir der Liste ein Ereignis für das li-Tag hinzufügen, wenn die Maus hinein bewegt wird und der Hintergrund seine Farbe ändert, macht diese Methode dieses Ereignis ungültig.

Um die durch die beiden oben genannten Datenbindungsmethoden verursachten Probleme zu lösen, verwenden wir Dokumentfragmente zum Hinzufügen von Daten.

var frg = document.createDocumentFragment();//创建文档碎片
for (var i =0; i <ary.length>' + ( i + 5 ) + '' + ary[i].title;
    frg.appendChild(li);//将数据动态添加至文档碎片中
}
myUl.appendChild(frg); //将数据一次性添加到页面中
frg = null;  //释放内存</ary.length>

Dies führt nur einmal zu einem DOM-Reflow und behält die ursprünglich vorhandenen Ereignisse bei.

4、DOM映射

DOM映射机制：所谓映射，就是指两个元素集之间元素相互“对应”的关系。页面中的标签集合和在JS中获取到的元素对象（元素集合）就是这样的关系。如果页面中的HTML标签结构发送变化，那么集合中对应的内容也会跟着自动改变。

    
• 1
    
• 2
    
• 3
    
• 4
    
• 5

对于这样一个列表使用下列脚本：

var myul = document.getElementById("myul");
var mylis = myul.getElementsByTagName('li');
    for (var i = mylis.length - 1 ; i >= 0; i --) {
        myul.appendChild(mylis[i]);
    }
console.log(mylis.length);   // 5

将获取到的列表元素反序重新插入ul中，那么ul列表会变成下面这样：

    
• 5
    
• 4
    
• 3
    
• 2
    
• 1

我们看到列表的长度依然是5，只是位置颠倒了。这是因为每个li标签和JS中获取的标签对象存在一个对应关系，当某个标签被重新插入到页面中时，页面中对应的标签会移动到插入的位置。这就是DOM映射。

二、实现表格排序

1、使用ajax获取数据

之所以使用动态获取数据，是为了使用文档碎片绑定数据。

var res = ''; //声明一个全局变量，接收数据
var xhr = new XMLHttpRequest();
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、使用文档碎片绑定数据

var frg = document.createDocumentFragment();
for (let i = 0; i <h3 id="对表格进行排序">3、对表格进行排序</h3><p>这里涉及的点较多</p><pre class="brush:php;toolbar:false">//为两列添加点击事件
for (let i = 0; i <p>以上内容就是原生JS实现表格排序，希望能帮助到大家。</p><p><a href="http://www.php.cn/js-tutorial-371957.html" target="_self">js学习总结经典小案例之表格排序</a></p><p><a href="http://www.php.cn/js-tutorial-375121.html" target="_self">jquery中tablesorter表格排序组件是如何使用的？</a></p><p><a href="http://www.php.cn/js-tutorial-372544.html" target="_self">js表格排序实例详解（支持int,float,date,string四种数据类型）</a></p>

Das obige ist der detaillierte Inhalt vonNative JS implementiert die Tabellensortierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!