Недостатки jQuery, чтобы избежать

Я начинаю проект с jQuery.

Какие ошибки/ошибки/неправильные представления/злоупотребления/злоупотребления у вас есть в вашем проекте jQuery?

ОТВЕТЫ

Ответ 1

Не знать о производительности и злоупотребления селекторами вместо того, чтобы назначать их локальным переменным. Например: -

$('#button').click(function() {
    $('#label').method();
    $('#label').method2();
    $('#label').css('background-color', 'red');
});

Вместо: -

$('#button').click(function() {
    var $label = $('#label');
    $label.method();
    $label.method2();
    $label.css('background-color', 'red');
});

Или еще лучше с цепочкой: -

$('#button').click(function() {
    $("#label").method().method2().css("background-color", "red"); 
});

Я нашел этот в качестве просветительного момента, когда я понял, как работают стеки вызовов.

Изменить: добавлены предложения в комментариях.

Ответ 2

Понять, как использовать контекст. Как правило, селектор jQuery будет искать весь документ:

// This will search whole doc for elements with class myClass
$('.myClass');

Но вы можете ускорить процесс поиска в контексте:

var ct = $('#myContainer');
// This will search for elements with class myClass within the myContainer child elements
$('.myClass', ct);

Ответ 3

Не используйте селектор серого класса, например:

$('.button').click(function() { /* do something */ });

Это приведет к просмотру каждого элемента, чтобы увидеть, имеет ли он класс "button".

Вместо этого вы можете помочь, например:

$('span.button').click(function() { /* do something */ });
$('#userform .button').click(function() { /* do something */ });

Я узнал об этом в прошлом году из Блог Ребекки Мерфи

Обновить. Этот ответ был дан более 2 лет назад и не подходит для текущей версии jQuery. Один из комментариев включает тест, подтверждающий это. Существует также обновленная версия теста, которая включает в себя версию jQuery во время этого ответа.

Ответ 4

Попробуйте разделить анонимные функции, чтобы их можно было повторно использовать.

//Avoid
$('#div').click( function(){
   //do something
});

//Do do
function divClickFn (){
   //do something    
}

$('#div').click( divClickFn );

Ответ 5

При использовании функции $.ajax для Ajax запросов к серверу вам следует избегать использования события complete для обработки данных ответа. Он сработает, был ли запрос успешным или нет.

Вместо complete используйте success.

Смотрите Ajax Events в документах.

Ответ 6

  • Избегайте злоупотребления документом.
  • Сохраните документ только для инициализации кода.
  • Всегда извлекайте функции вне готового документа, чтобы их можно было повторно использовать.

Я видел сотни строк кода внутри документа doc ready. Уродливые, нечитаемые и невозможные для поддержания.

Ответ 7

"Цепочки" анимационных событий с обратными вызовами.

Предположим, вы хотели оживить абзац, исчезающий при щелчке. Вы также хотели удалить элемент из DOM впоследствии. Вы можете подумать, что можете просто связать методы:

$("p").click(function(e) {
  $(this).fadeOut("slow").remove();
});

В этом примере вызывается функция .remove() до завершения .fadeOut(), уничтожения эффекта постепенного замирания и просто моментального удаления элемента. Вместо этого, когда вы хотите запустить команду только после завершения предыдущего, используйте обратный вызов:

$("p").click(function(e){
  $(this).fadeOut("slow", function(){
    $(this).remove();
  });
});

Второй параметр .fadeOut() - анонимная функция, которая будет запущена после завершения анимации .fadeOut(). Это приводит к постепенному замиранию и последующему удалению элемента.

Ответ 8

Если вы связываете() одно и то же событие несколько раз, он будет срабатывать несколько раз. Обычно я всегда ходим unbind('click').bind('click'), чтобы быть в безопасности

Ответ 9

Не злоупотреблять плагинами.

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

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

Выберите плагины, которые вы используете с умом. Помимо библиотеки и пользовательского интерфейса, я постоянно использую $. Cookie, $. форма, $. validate и thickbox. Для остальных я в основном разрабатываю свои собственные плагины.

Ответ 10

Pitfall: использование циклов вместо селекторов.

Если вы обнаружите, что достигли метода jQuery '.each' для итерации элементов DOM, спросите себя, можете ли использовать селектор для получения элементов.

Дополнительная информация о селекторах jQuery:
http://docs.jquery.com/Selectors

Pitfall: НЕ использовать инструмент Firebug

Firebug был практически создан для такого рода отладки. Если вы собираетесь обманывать DOM с Javascript, вам нужен хороший инструмент, например Firebug, чтобы вы могли видеть.

Дополнительная информация о Firebug: http://getfirebug.com/

Другие замечательные идеи в этом эпизоде ​​Полиморфного подкаста: (секреты jQuery с Дейвом Уордом) http://polymorphicpodcast.com/shows/jquery/

Ответ 11

Непонимание использования этого идентификатора в правильном контексте. Например:

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   $(".listOfElements").each( function()
   {
      $(this).someMethod( ); // here 'this' is not referring first_element anymore.
   })
});

И вот один из образцов, как вы можете его решить:

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   var $that = this;
   $(".listOfElements").each( function()
   {
      $that.someMethod( ); // here 'that' is referring to first_element still.
   })
});

Ответ 12

Избегайте поиска по всей DOM несколько раз. Это то, что действительно может задержать ваш script.

Плохо:

$(".aclass").this();
$(".aclass").that();
...

Хорошо:

$(".aclass").this().that();

Плохо:

$("#form .text").this();
$("#form .int").that();
$("#form .choice").method();

Хорошо:

$("#form")
    .find(".text").this().end()
    .find(".int").that().end()
    .find(".choice").method();

Ответ 13

Всегда кэшируйте $(this) в значимую переменную особенно в .each()

Подобно этому

$(selector).each(function () {
    var eachOf_X_loop = $(this); 
})

Ответ 14

Подобно тому, что сказал Репо Ман, но не совсем.

При разработке winforms ASP.NET я часто делаю

$('<%= Label1.ClientID %>');

забыв знак #. Правильная форма

$('#<%= Label1.ClientID %>');

Ответ 15

События

$("selector").html($("another-selector").html());

не клонирует ни одно из событий - вы должны их перепроверять.

В соответствии с JP comment - clone() выполняет повторную проверку событий, если вы передаете true.

Ответ 16

Избегайте множественного создания одних и тех же объектов jQuery

//Avoid
function someFunc(){
   $(this).fadeIn();
   $(this).fadeIn();
}

//Cache the obj
function someFunc(){
   var $this = $(this).fadeIn();
   $this.fadeIn();
}

Ответ 17

Я тоже говорю это для JavaScript, но jQuery, JavaScript НИКОГДА не заменит CSS.

Кроме того, убедитесь, что сайт доступен для тех, у кого отключен JavaScript (не так актуально сегодня, как и в тот же день, но всегда приятно иметь полностью пригодный для использования сайт).

Ответ 18

Создание слишком большого количества манипуляций с DOM. Хотя методы .html(),.append(),.prepend() и т.д. Велики, из-за того, что браузеры визуализируют и повторно отображают страницы, использование их слишком часто приведет к замедлению. Часто лучше создавать html в виде строки и включать его в DOM один раз, вместо того, чтобы изменять DOM несколько раз.

Вместо:

var $parent = $('#parent');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $('<div class="foo-' + i + '" />');
    $parent.append($div);
}

Попробуйте следующее:

var $parent = $('#parent');
var iterations = 10;
var html = '';

for (var i = 0; i < iterations; i++){
    html += '<div class="foo-' + i + '"></div>';
}

$parent.append(html);

Или даже это ($ wrapper - это вновь созданный элемент, который еще не был добавлен в DOM. Добавление узлов в эту оболочку div не вызывает замедление, а в конце мы добавляем $wrapper к $parent, используя только одна манипуляция DOM):

var $parent = $('#parent');
var $wrapper = $('<div class="wrapper" />');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $('<div class="foo-' + i + '" />');
    $wrapper.append($div);
}

$parent.append($wrapper);

Ответ 19

Использование ClientID для получения "реального" идентификатора элемента управления в проектах ASP.NET.

jQuery('#<%=myLabel.ClientID%>');

Кроме того, если вы используете jQuery внутри SharePoint, вы должны вызвать jQuery.noConflict().

Ответ 20

Передача идентификаторов вместо объектов jQuery в функции:

myFunc = function(id) { // wrong!
    var selector = $("#" + id);
    selector.doStuff();
}

myFunc("someId");

Передача завернутого набора намного более гибкая:

myFunc = function(elements) {
    elements.doStuff();
}

myFunc($("#someId")); // or myFunc($(".someClass")); etc.

Ответ 21

Чрезмерное использование цепочки.

Смотрите это:

this.buttonNext[n ? 'bind' : 'unbind'](this.options.buttonNextEvent, this.funcNext)[n ? 'removeClass' : 'addClass'](this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true);

Объяснение

Ответ 22

Использовать стиль накопителей

Используя оператор +, в памяти создается новая строка, и ей назначается связанное значение. Только после этого результат присваивается переменной. Чтобы избежать промежуточной переменной для результата конкатенации, вы можете напрямую назначить результат с помощью оператора + =. Slow:

a += 'x' + 'y';

Быстрее

a += 'x';
a += 'y';

Примитивные операции могут быть быстрее вызовов функций

Рассмотрите возможность использования альтернативной примитивной операции над вызовами функций в критических циклах и функциях производительности. Slow:

var min = Math.min(a, b);
arr.push(val);

Быстрее

var min = a < b ? a : b;
arr[arr.length] = val;

Подробнее в Рекомендации по эффективности JavaScript

Ответ 23

Если вы хотите, чтобы пользователи видели html-объекты в своем браузере, используйте "html" вместо "text", чтобы ввести строку Unicode, например:

$('p').html("Your Unicode string")

Ответ 24

мои два цента)

Обычно работа с jquery означает, что вам не нужно постоянно беспокоиться о элементах DOM. Вы можете написать что-то вроде этого - $('div.mine').addClass('someClass').bind('click', function(){alert('lalala')}) - и этот код будет выполняться без каких-либо ошибок.

В некоторых случаях это полезно, в некоторых случаях - совсем не так, но это факт, что jquery имеет тенденцию быть, ну, пустым-дружеским. Тем не менее, replaceWith выдаст ошибку, если попытается использовать ее с элементом, который не принадлежит документу. Я считаю это довольно противоречивым.

Другая ошибка - это, на мой взгляд, порядок узлов, возвращаемых методом prevAll() - $('<div><span class="A"/><span class="B"/><span class="C"/><span class="D"/></div>').find('span:last-child').prevAll(). На самом деле, неважно, но мы должны иметь в виду этот факт.

Ответ 25

Если вы планируете Ajax в большом количестве данных, например, 1500 строк таблицы с 20 столбцами, то даже не думайте об использовании jQuery для вставки этих данных в ваш HTML. Используйте простой JavaScript. jQuery будет слишком медленным на более медленных машинах.

Кроме того, половина времени jQuery будет делать то, что заставит его работать медленнее, например, пытаться разобрать теги script во входящем HTML и разбираться с чертами браузера. Если вам нужна быстрая скорость вставки, придерживайтесь обычного JavaScript.

Ответ 26

Использование jQuery в небольшом проекте, который может быть дополнен только несколькими строками обычного JavaScript.

Ответ 27

Неиспользуется привязка событий. JavaScript и jQuery работают по-разному.

По популярному запросу, пример:

В jQuery:

$("#someLink").click(function(){//do something});

Без jQuery:

<a id="someLink" href="page.html" onClick="SomeClickFunction(this)">Link</a>
<script type="text/javascript">
SomeClickFunction(item){
    //do something
}
</script>

В принципе, требуемые для JavaScript привязки больше не нужны. То есть используйте встроенную разметку (onClick и т.д.), потому что вы можете просто использовать идентификатор и классы, которые разработчик обычно использует для целей CSS.