Mark Lucas
0 
2940
457
JQuery, вероятно, является важным навыком для современного веб-разработчика. Какой язык программирования выучить - веб-программирование Какой язык программирования выучить - веб-программирование Сегодня мы рассмотрим различные языки веб-программирования, которые обеспечивают работу Интернета. Это четвертая часть в серии программ для начинающих. В первой части мы изучили основы… и в этом коротком мини-сериале я надеюсь дать вам знания, чтобы начать использовать их в своих собственных веб-проектах. В первой части нашего учебника по jQuery Учебник по jQuery - Начало работы: основы и селекторы Учебник по jQuery - Начало работы: основы и селекторы На прошлой неделе я рассказал о том, насколько важен jQuery для любого современного веб-разработчика и почему он потрясающий. На этой неделе, я думаю, пришло время запачкать руки кодом и узнать, как ... мы рассмотрели некоторые основы языка и как использовать селекторы; во второй части мы перешли к методам манипулирования DOM. Введение в jQuery (часть 2): методы и функции. Введение в jQuery (часть 2): методы и функции. Это часть продолжающегося новичка в серии веб-программирования jQuery. , В первой части были рассмотрены основы jQuery, как включить его в ваш проект, и селекторы. Во второй части мы продолжим с… .
В третьей части мы рассмотрим проблему задержки jQuery до загрузки страницы, а затем я попытаюсь объяснить, что такое анонимные функции и зачем вам о них знать..
Задержка загрузки: как и почему?
Если вы пробовали какой-то код из частей 1 и 2, возможно, вы столкнулись с некоторыми ошибками, странным поведением или просто неработающими вещами. Самая распространенная ошибка, с которой я столкнулся при изучении jQuery, заключалась в том, что элементы DOM не были найдены - хотя я мог ясно видеть их в источнике страницы, jQuery продолжал говорить мне, что просто не может их найти! Это почему?
Ну, это все связано с порядком, в котором вещи загружаются браузером. Проще всего, если в браузере запущен скрипт jQuery до искомый элемент DOM фактически создан, скрипт сначала загрузится, но ничего не сделает, потому что не может найти элемент, затем элемент DOM загрузится позже. Это меньше проблем, если вы разместите все свои скрипты рядом с нижним колонтитулом, но это все еще может произойти.
Решение состоит в том, чтобы обернуть ваши сценарии в то, что называется документ готово событие. Это заставляет вложенный код ждать, пока DOM не будет полностью загружен (пока готовы). Используя это просто:
$ (document) .ready (function () // ваш код для задержки идет сюда);Есть еще более короткий способ сделать это, изложенный в документации по jQuery, но я настоятельно рекомендую использовать этот способ для удобства чтения кода..
Это событие, готовое для документов, является еще одним хорошим примером анонимная функция, так что давайте попробуем понять, что это значит.
Анонимные функции
Если, как и я, у вас есть некоторый опыт программирования на начальном уровне, идея анонимные функции - который является основным для jQuery и Javascript - может быть немного смущает. С одной стороны, это делает ошибки из-за несоответствующих скобок довольно распространенным, поэтому я собираюсь объяснить это сейчас. Если вы хотите получить подробное объяснение того, почему анонимные функции лучше, чем обычные именованные функции, на более техническом уровне, я бы посоветовал прочитать это довольно сложное сообщение в блоге [Больше не доступно].
До сих пор вы, вероятно, только сталкивались именованные функции. Это функции, которые были объявлены с именем и, следовательно, могут вызываться где угодно, сколько угодно раз. Рассмотрим этот тривиальный пример, который будет записывать сообщение на консоль при загрузке страницы..
function doStuffOnPageLoad () console.log ("делать вещи!"); $ (document) .ready (doStuffOnPageLoad);Это полезно, если ваша функция предназначена для повторного использования, но в этом случае она немного запутанная, поскольку мы действительно хотим, чтобы она запускалась только один раз при загрузке страницы. Вместо этого мы не пытаемся определить отдельную функцию, а просто объявляем ее встроенной в качестве параметра по мере необходимости. Поэтому предыдущий пример лучше переписать так:
$ (document) .ready (function () console.log ("делать вещи"););Вы можете не видеть многих преимуществ этого в данный момент - в данном случае это лишь незначительно меньше кода - но по мере того, как ваши скрипты будут усложняться, вы по достоинству оцените необходимость не прыгать, пытаясь найти определения функций. К сожалению, для начинающих это немного усложняет задачу - просто посмотрите на все эти скобки - поэтому обязательно проверьте следующие моменты, если вы получаете ошибки:
- Правильное количество соответствующих фигурных скобок - помогает отступ в вашем коде.
- Вьющиеся против круглых скобок.
- Закрытие оператора точкой с запятой - но не нужно после закрывающей фигурной скобки.
Использование редактора кода, такого как Sublime Text 2 Попробуйте Sublime Text 2 Для кроссплатформенного редактирования кода. Попробуйте Sublime Text 2 Для кроссплатформенного кода. Sublime Text 2 - кроссплатформенный редактор кода, о котором я только недавно слышал. и я должен сказать, что я действительно впечатлен, несмотря на бета-лейбл. Вы можете загрузить полное приложение, не платя ни копейки… это действительно может помочь, поскольку оно выделяет соответствующие скобки и автоматически делает отступ для вас. Специальный редактор кода очень важен.
Вот и все для этого урока, но вы должны привыкнуть включать некоторые базовые манипуляции с DOM в событие готовности документа, прежде чем двигаться дальше, и начать редактирование файлов в редакторе кода, если вы этого еще не сделали. В следующий раз мы рассмотрим события и то, как они используются для добавления интерактивности на страницу - например, заставить jQuery что-то делать при нажатии кнопки. Вопросы или комментарии всегда приветствуются ниже.