Почему jQuery не определен?

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

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

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

Как ни печально изучать что-то новое, преодолевать контрольно-пропускной пункт, а затем повторять его чуть дальше, серебряная полоса состоит в том, что есть вероятность, что ваши проблемы будут решены кем-то другим.

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

И это именно то, что мы собираемся осветить в этом уроке. В частности, мы будем говорить о проблеме, когда вы получите сообщение об ошибке:

Uncaught ReferenceError: jQuery is undefined

Понимание проблемы

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

Если вы знакомы с JavaScript, то вы знаете, насколько undefined может быть undefined то есть речь идет о глобальном объекте или примитивном значении? Это выходит за рамки этого поста (не каламбур!), Но даже если вы не знакомы ни с одним из определений, это не значит, что вы не способны диагностировать проблему.

Настройте Песочницу

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

Начните с создания следующего HTML-файла и сохранения его где-нибудь на локальном компьютере, где вы сможете легко загрузить его в веб-браузере.

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

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

Далее, давайте создадим исходный файл JavaScript, который мы сможем использовать для воссоздания вышеуказанной ошибки и написания некоторого тестового кода для решения проблемы. Мы назовем это main.js

После этого включите исходный файл в ваш HTML-документ так, чтобы конечный файл выглядел так:

Теперь у вас должна быть возможность загрузить страницу в браузере и увидеть что-то почти такое же, как изображение консоли, показанное выше.

Убедитесь, что ваш JavaScript загружен

Прежде чем идти дальше, давайте продолжим и убедимся, что файл JavaScript загружен правильно. Для этого мы настроим простое предупреждение, чтобы сообщение отображалось всякий раз, когда страница загружается в браузере.

Чтобы увидеть этот экран, внесите следующие изменения в свой исходный файл JavaScript:

Затем убедитесь, что вы переупорядочили файлы JavaScript из:

Для того, чтобы:

Мы поговорим об этом немного позже.

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

Воспроизведение проблемы

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

1. jQuery загружается после вашего кода

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

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

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

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

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

2. Конфликтующий плагин или файл

При работе с jQuery иногда разработчикам нравится изменять функцию $ чтобы она не конфликтовала с чем-то другим, что использует их исходный код.

В частности, jQuery — это имя функции в исходном коде jQuery. Библиотека использует $ как синоним или ярлык, так как он, вероятно, будет использоваться так часто. Это делает код легче набирать и легче читать.

Нет конфликтов

Но это не единственный код JavaScript, который использует эту функцию, и иногда разработчикам нужно будет использовать другую функцию или передать $ другому кусочку исходного кода. Для этого они могут использовать jQuery.noConflict() .

Прямо из API :

Многие библиотеки JavaScript используют $ как имя функции или переменной, так же как и jQuery. В случае jQuery $ — это просто псевдоним для jQuery , поэтому все функции доступны без использования $ .

Если вам нужно использовать другую библиотеку JavaScript вместе с jQuery, верните управление $ back другой библиотеке с помощью вызова $.noConflict() . Старые ссылки на $ сохраняются во время инициализации jQuery; noConflict() просто восстанавливает их.

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

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

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

Правильное определение объема $

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

Звучит сложно? Не беспокойся Это не плохо. Давайте изменим наш исходный файл JavaScript, чтобы он содержал следующее:

Хорошо, вот что происходит:

1. Мы объявляем анонимную функцию, которая принимает один аргумент (в нашем случае, jQuery ).
2. Функция будет передана и на нее будет ссылаться $ и она будет видна только в контексте нашей анонимной функции.

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

Не каждый делает это таким образом, но это очень распространенный, очень безопасный способ справиться с этим, чтобы вы могли избежать всего undefined сообщения об ошибке.

3. Есть ли еще?

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

Более того, изменение jQuery для выполнения того, что вы хотите, может привести к тому, что он сломает что-то другое (что, очевидно, никогда не бывает хорошим)

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

Вывод

Как указано выше, существует множество разных вещей, которые могут вызвать сообщение jQuery is undefined в вашей консоли. Мы попытались рассмотреть несколько наиболее распространенных проблем в приведенных выше примерах.

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

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

Кроме того, если у вас есть другие вопросы, не стесняйтесь оставлять их в комментариях ниже, и я постараюсь ответить на них в меру своих возможностей.