ловушки jQuery для предотвращения [закрытый]

Не понимает привязку событий. 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.

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

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

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

См. Это:

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

Объяснение

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

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

myFunc("someId");

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

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

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

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

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

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

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

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

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

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

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

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

Events

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

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

Согласно комментарию JP t - clone () выполняет повторную привязку событий, если вы передаете значение true.

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

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

Избегайте поиска по всей 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();

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

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

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

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

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

Ловушка: НЕ использование такого инструмента, как Firebug

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

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

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

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

Не злоупотребляйте надстройками.

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

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

Выбирайте подключаемые модули, которые вы используете, с умом. Помимо библиотеки и пользовательского интерфейса, я постоянно использую $. Cookie , $ .form , $. Validate и расширенный ящик . В остальном я в основном разрабатываю собственные плагины.

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

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

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

var myString = '&'+'nbsp;&'+'nbsp;&tab;©';
myString.replace(/&\w+?;/g, function( e ) {
    switch(e) {
        case ' ': 
            return ' ';
        case '&tab;': 
            return '\t';
        case '©': 
            return String.fromCharCode(169);
        default: 
            return e;
    }
});

Тем не менее, я настоятельно призываю вас рассмотреть вашу ситуацию. Если вы получаете & nbsp; и & копировать; и другие объекты HTML в текстовых значениях, вы действительно хотите их заменить? Стоит ли конвертировать их потом?

Просто запомните.

Ура!

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

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

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

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

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

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

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

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

Разберитесь, как использовать контекст. Обычно селектор 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);

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

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

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

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

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

Подобно тому, что сказал Repo Man, но не совсем.

При разработке Winforms ASP.NET я часто

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

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

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

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

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

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

my two cents)

Usually, working with jquery means you don't have to worry about DOM elements actual all the time. You can write something like this - $('div.mine').addClass('someClass').bind('click', function(){alert('lalala')}) - and this code will execute without throwing any errors.

In some cases this is useful, in some cases - not at all, but it is a fact that jquery tends to be, well, empty-matches-friendly. Yet, replaceWith will throw an error if one tries to use it with an element which doesn't belong to the document. I find it rather counter-intuitive.

Another pitfall is, in my opinion, the order of nodes returned by prevAll() method - $('