Подтвердить что ты не робот

Как вы эффективно выполняете jQuery-код?

Я только немного играл с jQuery - некоторое время использовал YUI, и, хотя я очень ценю то, что может предложить библиотека jQuery, я нахожу, что это очень больно Код jQuery в отладчике, и мне интересно, есть ли какие-либо трюки, кроме очевидных?

Возьмем простую функцию:

function findFirstShortChild(parent) {
    var result = null;
    $("#" + parent + " li").each(function() {
        if ($(this).css("height") <= 10) {
            result = this;
            return(false);    // break out of each() function
        }
    });
    return(result);
}

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

  • Вы не можете проходить по строкам, иначе вы получите целую кучу функций jQuery.
  • Вы не можете попасть во внутреннюю часть каждого цикла, не пройдя много вещей jQuery или не установив точку останова и не попав в точку останова.
  • Вы не можете видеть, что такое промежуточные значения, такие как $(это), или почему оно может получить фиктивное значение для высоты, не пройдя через километры внешнего кода jQuery.
  • Вы не можете вырваться из каждого цикла, как в обычном цикле (с перерывом или возвратом), потому что это не фактический цикл. Петля внутри функции .each(). То, что выглядит как цикл здесь, это всего лишь внутренности вызова функции.
  • Что делать, если я хочу знать, почему я получаю значение фиктивного значения в цикле. Есть ли способ понять это, не пройдя много кода jQuery?

Итак, что мне здесь не хватает? Не намного ли удобнее переходить через этот код? Я пропустил некоторые магические методы, встроенные в структуру jQuery, чтобы помочь в этом? Или это цена, которую вы платите за использование этой библиотеки стилей, которые вам нужно полностью изменить, как вы отлаживаете проблемы.

Это то, что вам нужно сделать?

  • Назначьте промежуточные значения локальным переменным в области проблем, чтобы вы могли более легко их проверить, не выполняя функции jQuery.
  • Перемещение от точки останова до точки останова, а не переключение между строками в строке.
  • Узнайте, как входить в jQuery-вызовы и через них (эффективно) отвечать на некоторые вопросы.

Как вы все это делаете? Что мне не хватает?

Я должен упомянуть, что я использую Firebug в FF5 и встроенный отладчик в Chrome (Chrome чаще, чем Firebug). И, да, я использую отладочную (неминифицированную) версию jQuery при отладке. Итак, это не вопрос о том, какой отладчик вы используете, но как вы используете отладчик для эффективного перехода через код jQuery.

4b9b3361

ОТВЕТЫ

Ответ 1

Инструменты

Я использую Firebug для отладки кода jQuery с некоторыми расширениями для отладки jQuery:

FireQuery - это расширение Firefox, интегрированное с Firebug

  • Выражения jQuery разумно представлены в Firebug Console и DOM-инспекторе
  • прикрепленные данные jQuery являются гражданами первого класса.Элементы
  • в коллекциях jQuery выделяются при наведении указателя мыши
  • jQuerify: позволяет вам вводить jQuery на любую веб-страницу.
  • jQuery Lint: позволяет вам автоматически вводить jQuery Lint на страницу по мере ее загрузки (отлично подходит для проверки ad-hoc-кода)

Firefinder - это дополнение к Firebug, чтобы помочь найти элементы HTML сопоставление выбранных селекторов (ов) CSS или выражения XPath. Вы также можете автоматически выбирать элементы при наведении курсора или через контекстное меню.

Пример

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

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

  • Вы не можете видеть, что такое промежуточное значение, например $(this), или почему оно может получить фиктивное значение для высоты без преодолевая мили иностранного кода jQuery.

Посмотрите http://msdn.microsoft.com/en-us/scriptjunkie/ee819093. Здесь объясняется, как вы можете смотреть внутри this например (раздел "Сценарий 2" ). В этой статье приведены многочисленные советы по отладке кода, который использует jQuery.

  • Вы не можете вырваться из каждого цикла, как в обычном цикле (с перерывом или возвратом), потому что это не фактический цикл. Петля находится внутри функции .each(). То, что похоже на цикл здесь, просто внутренности вызова функции.

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

  • Что делать, если я хочу знать, почему я получаю значение фиктивного значения в цикле. Есть ли способ понять это, не пройдя через много кода jQuery?

Возможно, у вас будет больше информации после просмотра this, как описано выше. Но иногда нужно заглядывать в код jQuery, но я этого не делаю очень часто. Конечно, в jQuery тоже может быть ошибка.:-D

Заключение

Да, отладка jQuery немного отличается. Но я думаю, что после небольшой фазы ознакомления вы измените стиль отладки jQuery. И переход от точки останова к точке останова ничем не отличается от времени, которое было сохранено при использовании jQuery.

.

Ответ 2

Назовите меня старомодным, но я склонен сильно полагаться на console.log('your choice of variable');, и он хорошо меня обслуживал большую часть времени.

Ответ 3

Мне всегда нравился Firebug для работы с JQuery. Но, как правило, для более глубокой отладки, да, вам нужно попасть в JQuery. Однако JQuery имеет конструкцию разработки.

Ответ 4

Я согласен с использованием Firebug - где я могу, я делаю свою отладку JS в Firefox, потому что Firebug так хорош.

В частности, я стараюсь использовать средство просмотра, чтобы определить, что сделанные мной запросы возвращают правильные результаты. Вы также можете использовать это, чтобы идентифицировать $(это) или что-то еще, что вам нужно идентифицировать, хотя по умолчанию отображается "this".

Другая вещь, которую я часто делаю, - это разделить мой JQ-код на гораздо более строгие, чем я в противном случае, чтобы определить, где я. Я думаю, что часто сокращают JQ, когда я знаю, что звонки работают.

Используя их, отладка JQ в порядке. Тем не менее, я бы согласился, что было бы проще, если бы библиотека JQ не прошла. Однако то же самое относится и к некоторым частям моего кода конца. Это жизнь.