7 полезных советов для улучшения jQuery кода

  1. Используйте $(document).ready() или выполняйте ваши скрипты после закрытия body.

  1. Сохраняйте данные в свойство data блока, с помощью DOM. Пример:

    1
    $('selector').data('albumName1', ‘The Best of Phil Collins’);

    Потом вы сможете получить доступ к данным следующим образом:

    1
    $('selector').data('albumName1');
  2. Используйте встроенные в jQuery операции для работы с селекторами и поиском элемента, в целом. Например, код, для того чтобы найти поля с именем ‘email’:

    1
    input[name='eMail']
  3. Если вы много работаете с DOM, используйте live().

    1
    2
    3
      $("div.fork").live("click", function(){
          $(this).after("<p>Another paragraph!</p>");
        });
  4. Используйте jQuery плагин для форм, чтобы ассинхронно отправлять файлы $(form).ajaxSubmit();

  5. Не используйте один селектор снова и снова. Так делать нельзя:

    1
    2
    3
    $(‘div.hi’).css(‘color’, ‘#ffffff’);
    $(‘div.hi’).text(‘hello world’);
    $('div.hi’).addClass(‘amazingclass’);

    Правильный способ:

    1
    2
    3
    4
    var $q = $(‘div.hi’);
    $q.css(‘color’, ‘#ffffff’);
    $q.text(‘hello world’);
    $q.addClass(‘amazingclass’);
  6. Используйте классы у элементов для установки флага или сортировки. Например, hovered, selected, active

Метки: , ,
Связанные записи:
Свои выделяемые шрифты
  • Опубликовано: Сентябрь 28th, 2009
  • Категория:/ JavaScript /
Rss Commenti

3 Ответов

  1. 1) Сбилась нумерация:
    «
    1. Используйте $(document).ready()…
    1. Сохраняйте данные в свойство…
    »
    2) Не очень понял 2-ой пункт, какие именно данные вы имели ввиду, можно пример по нагляднее.

    А в целом, кратко и по делу, спасибо.

    P.S. Если рядом в коде надо изменить свойства у одного селектора, то еще лучше — применить цепочку вызовов которыми так прекрасен jQuery.

    1
    $(‘div.hi’).css(‘color’, ‘#ffffff’).text(‘hello world’).addClass(‘amazingclass’)
    #1 Денис

  2. Денис, спасибо, все исправил!
    Во втором пункте имеется ввиду сохранение (и извлеченные) данных в свойство «data» объекта.

    #2 admin

  3. В 6 пункте лучше еще лучше писать цепочкой
    $q.css(‘color’, ‘#ffffff’).text(‘hello world’).addClass(‘amazingclass’);

    #3 dec5e

Оставить комментарий





О проекте

Publications feed