jQuery підводні камені, яких слід уникати [закрито]

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

Які підводні камені / помилки / неправильні уявлення / зловживання / зловживання мали у своєму проекті jQuery?

Не знаючи про ефективність та надмірне використання селекторів замість того, щоб призначати їх локальним змінним. Наприклад:-

$('#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"); 
});

Я виявив цей просвітницький момент, коли зрозумів, як працюють стеки викликів.

Редагувати: включені пропозиції в коментарі.

Зрозумійте, як використовувати контекст. Зазвичай селектор 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);

Не використовуйте голі селектори класу, як це:

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

Це в кінцевому підсумку перегляне кожен елемент, щоб побачити, чи є у нього клас "кнопка".

Натомість ви можете допомогти, наприклад:

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

Про це я дізнався минулого року з блогу Ребекки Мерфі

Оновлення - Ця відповідь була надана понад 2 роки тому і не є правильною для поточної версії jQuery. Один із коментарів включає тест, який підтверджує це. Існує також оновлена ​​версія тесту, яка включає версію jQuery на момент цієї відповіді.

Спробуйте розділити анонімні функції, щоб ви могли їх повторно використовувати.

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

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

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

• Не допускайте зловживань готовим документом.
• Тримайте документ готовим лише до ініціалізації коду.
• Завжди витягуйте функції за межами документа, готові, щоб їх можна було повторно використовувати.

Я бачив сотні рядків коду всередині оператора goc. Некрасивий, нечитабельний і неможливий у підтримці.

Під час використання $.ajaxфункції для запитів Ajax до сервера, вам слід уникати використанняcomplete події для обробки даних відповідей. Він запустить, чи запит був успішним чи ні.

Замість цього completeвикористовуйтеsuccess .

Дивіться події Ajax у документах.

"Зв'язування" анімаційних подій з зворотними дзвінками.

Припустимо, ви хотіли анімувати абзац, що зникає після його клацання. Ви також хотіли згодом видалити елемент з DOM. Ви можете подумати, що ви можете просто зав'язати методи:

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

У цьому прикладі .remove () буде називатися раніше .fadeOut () завершиться, знищивши ваш ефект поступового згасання та просто змусивши елемент миттєво зникнути. Натомість, коли ви хочете запустити команду лише після завершення попередньої, використовуйте зворотний виклик:

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

Другий параметр .fadeOut () - це анонімна функція, яка запуститься після завершення анімації .fadeOut (). Це спричиняє поступове вицвітання і подальше видалення елемента.

Якщо ви зв’яжете () одну і ту ж подію кілька разів, вона запуститься кілька разів. Зазвичай я завжди йду unbind('click').bind('click')просто для безпеки

Не зловживайте плагінами.

У більшості випадків вам знадобиться лише бібліотека та, можливо, користувальницький інтерфейс. Якщо ви будете простою, ваш код буде підтримуватися в довгостроковій перспективі. Не всі плагіни підтримуються та підтримуються, насправді більшість - ні. Якщо ви можете імітувати функціональність за допомогою основних елементів, я настійно рекомендую.

Плагіни легко вставити у свій код, заощаджуючи час, але коли вам знадобиться щось додаткове, погана ідея їх змінювати, оскільки ви втрачаєте можливі оновлення. Час, який ви заощадите на старті, згодом втратите на зміну застарілих плагінів.

Виберіть плагіни, якими ви користуєтесь розумно. Окрім бібліотеки та інтерфейсу користувача, я постійно використовую $ .cookie , $ .form , $ .validate та thickbox . В іншому я здебільшого розробляю власні додатки.

Питання: Використання циклів замість селекторів.

Якщо ви виявите, що ви шукаєте метод jQuery '.each' для перебору елементів DOM, запитайте себе, чи можна використовувати селектор для отримання елементів замість цього.

Більше інформації про селектори jQuery:
http://docs.jquery.com/Selectors

Підводний камінь: НЕ використовуючи такий інструмент, як Firebug

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

Більше інформації про Firebug: http://getfirebug.com/

Інші чудові ідеї є в цьому епізоді «Поліморфного подкасту»: (секрети jQuery з Дейвом Уордом) http://polymorphicpodcast.com/shows/jquery/

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

$( "#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.
   })
});

Уникайте пошуку декількох DOM кілька разів. Це те, що дійсно може затримати ваш сценарій.

Погано:

$(".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();

Завжди кешуйте $ (це) на значущій змінній, особливо в .each ()

Подобається це

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

Схожий на те, що сказав Repo Man, але не зовсім.

Коли я розробляю форми ASP.NET, я часто це роблю

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

забувши знак #. Правильна форма є

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

Події

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

не клонує жодної з подій - вам доведеться їх повторно пов’язати.

Згідно з коментарями JP, t - clone () відновлює події, якщо ви передаєте true.

Уникайте багаторазового створення одних і тих же об’єктів jQuery

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

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

Я це говорю і для JavaScript, але jQuery, JavaScript ніколи не повинен замінювати CSS.

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

Робіть занадто багато маніпуляцій з 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. Додавання вузлів до цього розгортаючого дива не спричиняє уповільнення, і в кінці ми додаємо $ обгортку до $ 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);

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

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

Крім того, якщо ви використовуєте jQuery всередині SharePoint, ви повинні зателефонувати на jQuery.noConflict ().

Передача ідентифікаторів замість об’єктів jQuery у функції:

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

myFunc("someId");

Проходження загорнутого набору набагато гнучкіше:

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

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

Надмірне використання ланцюга.

Дивіться це:

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

Пояснення

Використовуйте струнний акумулятор

Використовуючи оператор +, нова пам'ять створюється в пам'яті і присвоюється їй об'єднане значення. Тільки після цього результат присвоюється змінній. Щоб уникнути проміжної змінної для результату конкатенації, ви можете безпосередньо призначити результат за допомогою оператора + =. Повільний:

a += 'x' + 'y';

Швидше:

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

Примітивні операції можуть бути швидшими, ніж виклики функцій

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

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

Швидше:

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

Докладніше читайте на веб-сторінці "Найкращі практики роботи з JavaScript"

Якщо ви хочете, щоб користувачі бачили суті html у своєму браузері, використовуйте "html" замість "text", щоб вставити рядок Unicode, наприклад:

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

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

Зазвичай робота з 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(). Насправді це не велика справа, але слід пам’ятати про цей факт.

Якщо ви плануєте Ajax у великій кількості даних, наприклад, 1500 рядків таблиці з 20 стовпцями, тоді навіть не думайте використовувати jQuery для вставки цих даних у свій HTML. Використовуйте звичайний JavaScript. jQuery буде занадто повільним на повільних машинах.

Крім того, половина часу jQuery буде робити те, що призведе до того, що це буде повільніше, як, наприклад, намагатись проаналізувати теги скриптів у вхідному HTML-коді та мати справу з примхами браузера. Якщо ви хочете швидкої швидкості вставки, дотримуйтесь простого JavaScript.

Використання jQuery в невеликому проекті, який можна виконати лише декількома рядками звичайного JavaScript.

Не розуміючи прив'язки подій. 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.