улучшение производительности табличной навигации в jquery

Question

Я пытаюсь написать навигацию по таблице, используя ключи для gridview asp.net. Это то, что я до сих пор. Работает нормально, но медленно. Пожалуйста, посмотрите на это и дайте мне знать, как улучшить производительность, если возможно.

В основном это HTML-таблица с элементами ввода. Структура таблицы выглядит следующим образом

<table>
<tr>
<td>
<div style="height:22px;">
     <input type = "text">
</div>
</td>
</tr>
<tr>
<td>
<div style="height:22px;">
     <input type = "text">
</div>
</td>
</tr>
...
</table>
jQuery(function($) {
             $('table#<%= myTable.ClientID %>')
                .bind('keydown', funcKeyDown)
        });


function funcKeyDown(event)
        {   
            //get cell element.
            var cell = event.target;

            //get current cellIndex
            var $cell = $(cell);         
            var currCell = $cell.parents("td"); 
            var cellIndex = currCell[0].cellIndex;
            //get current rowIndex
            var currRow = $cell.parents("tr");
            var rowIndex = currRow[0].rowIndex;   

            var nextRowIndex, targetElem = null; 
            var nextCell;           
            switch(event.keyCode) {                
                case 13: //enter key
                    if(shiftKeyPressed == 1){
                        //move left                        
                        if(!(cellIndex == 0)){                        
                        targetElem = currRow.children("td").eq(cellIndex-1).find("input[type=text]");
                        if(targetElem){targetElem.select();}}}
                    else {
                        //move right
                       if(!(cellIndex == (numElements -1))){
                            targetElem = currRow.children("td").eq(cellIndex+1).find("input[type=text]");                        
                            if(targetElem){
                                targetElem.select();
                            }
                        }
                    }                         
                    return false;                          
                case 16: //shift key
                    shiftKeyPressed = 1;
                    return false;
                case 33:                    
                case 34: //page-up, page-down
                    if(event.keyCode == 33){
                        nextRowIndex = rowIndex - pageSize;
                        if(nextRowIndex < 0) nextRowIndex = 0;                
                    }
                    if(event.keyCode == 34){
                        nextRowIndex = rowIndex + pageSize;
                        if(nextRowIndex > numRows) nextRowIndex = numRows;
                    }                      
                    targetElem = currRow.parent().children("tr").eq(nextRowIndex).children("td").eq(cellIndex)
                                    .find("input[type=text]");                                                                
                    if(targetElem != null){targetElem.select();}
                    return false;                   
                case 37: //left       
                    if(!(cellIndex == 0)){                        
                        targetElem = currRow.children("td").eq(cellIndex-1).find("input[type=text]");
                        if(targetElem != null){targetElem.select();}}
                    return false;                                                
                case 38: //up                    
                    if(rowIndex != 0){
                        targetElem = currRow.parent().children("tr").eq(rowIndex-1).children("td").eq(cellIndex)
                                        .find("input[type=text]");                                                                
                        if(targetElem != null){
                        targetElem.select();}}
                    return false;                                                
                case 39: //right arrow
                    if(!(cellIndex == (numElements -1))){
                        targetElem = currRow.children("td").eq(cellIndex+1).find("input[type=text]");                        
                        if(targetElem != null){targetElem.select();}}
                    return false;                                                
                case 40: //down                                               
                    if(rowIndex >= 0){
                        targetElem = currRow.parent().children("tr").eq(rowIndex+1).children("td").eq(cellIndex)
                                        .find("input[type=text]");                                                                
                        if(targetElem != null){targetElem.select();}}
                    return false;                                                                                                        
            }            
        }                

Answer 1

Прежде всего, вы запускаете код для каждого нажатия клавиши, прежде чем войти в оператор switch и определить, действительно ли вам нужно что-то делать.

Вам необходимо преобразовать этот код в функцию, которая просто получает TD (в виде простой переменной элемента, а не оболочки Jquery).

Кроме того, вы должны понимать, что JQuery, абстрагирующийся от различий между браузерами, имеет цену, производительность. Например, когда запускается связанное событие, событие имеет умеренный кусок Javascript для запуска до того, как будет вызвана ваша действительная функция события.

Ваше использование currRow.children ("td"). Eq (cellIndex + 1) .find ("input [type = text]"); не собирается быть особенно великим. Вы можете исключить дополнительный div, указав высоту на тд. Тогда предположим, что тд содержит только такой ввод.

var tdNext = td.nextSibling;
var textBox =  tdNext ? tdNext.firstChild : null;
if (textBox) $(textBox).select();

Урок иногда заключается в том, что вам необходимо обойти преимущества JQueries для повышения производительности. Приведенный выше код по-прежнему очень совместим с несколькими браузерами.

Вы можете применить аналогичные приемы к другим основным клавишам влево, вверх, вниз и ввести.

Есть ли причина, по которой вы не используете event.shiftKey для обнаружения клавиши Shift? Использование глобальной переменной в том виде, в каком вы ее представляете, не кажется правильным.