Jquery migrate

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

Консоль должна быть открыта. Закрытая консоль, конечно же, не ошибка в коде, однако, ошибочный подход во время отладки сценария. Именно консоль поможет быстро сориентироваться в том, где и какая допущена ошибка, а также следить за ходом выполнения сценария. Во всех современных браузерах — этот инструмент присутствует по умолчанию. Например, в FireFox консоль можно вызвать с помощью сочетания клавиш Ctrl + Shift + K или «Меню» > «Разработка» > «Веб-консоль«. В Chrome вызывается сочетанием клавиш Ctrl + Shift + J или «Меню» > «Дополнительные инструменты» > «Консоль JavaScript«. В Opera — сочетание клавиш аналогичны Chrome, вызов из меню — «Инструменты разработчика» > «Веб-инспектор» («Инструменты разработчика» предварительно включить в пункте «Другие инструменты»). Кроме того, существуют инструменты/аддоны, как, например, замечательный FireBug под FireFox или Web Developer для Chrome и этот же инструмент для FireFox

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

  1. Оставляем одну новую библиотеку и сразу после неё подключаем плагин jQuery Migrate, который, в большинстве случаев, помогает решить вопрос совместимости.
  2. Без каких-либо дополнений, сами заменяем в плагине удаленные методы на их современные аналоги. Обычно, это такие устаревшие или удаленные методы, как live(), $.browser и т.д.
  3. И конечно же, можно найти современный аналог плагина, который вам понравился. Не зацикливайтесь на одном.

Ну, и примерный порядок подключения:

<script src="/js/jquery-1.11.1.min.js"></script><!-- библиотека jQuery -->  <script src="/js/jquery-migrate-1.2.1.min.js"></script><!-- если требуется -->  <script src="/js/jquery-ui.min.js"></script><!-- если используете jQuery UI -->  <script src="/js/my_scripts.js"></script><!-- ваши коды -->

Код не обернут в конструкцию DOM-Ready. Одна из наиболее популярных ошибок. Если ваш скрипт расположен/подключен в теге <head>, то его нужно обязательно заключить в такой код:

$(document).ready(function(){   // тут весь ваш код  });  // или сокращенная запись  $(function(){   // тут весь ваш код  });

Это так называемый «обработчик готовности дерева DOM«. Попробую «на пальца» и простым языком объяснить, что это и зачем нужно. Браузер загружает страницу, начиная с первого на ней элемента и движется вниз. Всё, что подключено в теге <head>: CSS, JS и т.д., загрузится и начнёт выполняться раньше, чем дело дойдёт до элементов, которые находятся в <body>. Поэтому, при обращении к элементу из JS-кода, его еще попросту нет на странице. А обёртка, которую я показал выше, откладывает выполнение сценария до тех пор, пока вся структура страницы не будет загружена браузером полностью. Как вариант, который совсем не лишён логики и даже рекомендуется тем же Google, весь свой код можно расположить в конце страницы, перед закрывающим тегом </body>. Так же, хоть и не совсем по теме этого пункта, рекомендуется в некоторых случаях использовать атрибут async для тега <script>.

Не используется делегированная обработка событий для динамических элементов. Этот случай знаком многим, кто использует технологию Ajax. Пунктом выше, мы затронули тему DOM и доступностью элементов при загрузке страницы, но что делать, если элементы добавляются динамически и с ними нужно работать так же, как и со статичными? Вот тут на помощь приходит делегированная обработка событий. Синтаксис:

$('static_parent').on('event', 'dinamic_child', handler);
  • static_parent — статичный родительский элемент
  • event — событие
  • dinamic_child — динамический дочерний элемент
  • handler — функция-обработчик

К примеру, в каком-то блоке с классом «my_block», есть несколько ссылок с классом «my_link», при клике на которые, выполнялось какое-то действие. Все они изначально присутствовали при загрузке страницы. Теперь мы добавили еще несколько ссылок с таким же классом, но без делегированной обработки, они будут просто проигнорированы и нужное действие уже не выполнится. Для того, чтоб событие обрабатывалось и на старых, и на новых ссылках, нам нужно записать так:

$('.my_block').on('click', '.my_link', function(){   // действия при клике  });

! При чём, объект $(this) внутри обработчика — это именно ссылка «.my_link», на которой событие было вызвано, а не родительский элемент «.my_block», как это бы было при обычной записи, а не делегированной. Старайтесь находить ближайший родительский статичный элемент, что ускорит работу кода. Хотя, в качестве такого, можно выбрать и body, и даже document.

Неправильно подобранный селектор. Вообще, эта тема гораздо обширнее, чем звучит, но тут разберём самые основные промахи, которые допускают новички. Селектор, говоря образно, это признак элемента, по которому мы к этому элементу обращаемся или применяем какой-либо из методов. Селекторами в jQuery (и не только), может быть как имя тега, класс элемента (атрибут «class»), его идентификатор (атрибут «id»), так и любые другие атрибуты или же их комбинации. Тем, кто знаком с CSS, можно расслабится, т.к. селекторы jQuery строятся по такому же принципу, как и в CSS, а вот остальным придётся познакомиться с CSS поближе. Парочка примеров:

$('div'); // выберет все элементы "div"  $('#my_element'); // выберет единственный (*см. ниже) элемент с атрибутом id равным "my_element"  $('.my_element'); // выберет все элементы на странице с классом "my_element"  $('.my_element.other_class'); // выберет элементы на странице с классом "my_element", у которых так же есть класс "other_class"  $('#my_element .my_element'); // выберет все дочерние элементы с классом "my_element" у родительского с id = "my_element"  $('[name=my_name]'); // выберет элементы, у которых атрибут name равен my_name  $('[name=^my_name]'); // выберет элементы, у которых значение атрибута name начинается на "my_name"  $(':checkbox'); // выберет все элементы input с типом "checkbox"  // и так далее ...

Теперь о главной и критической ошибке всех новичков, связанной с селекторами… Возьмите себе за правило, повесьте в рамочке на самом видном месте, повторяйте как мантру перед сном: «В пределах одной страницы — не может быть два и более элементов с одинаковыми атрибутами ID«! Это правило не имеет никаких «а вдруг …» или «а если …«. Поэтому, если вы очень удивлены тому, что на одном элементе событие срабатывает, а на втором таком же нет, то в первую очередь проверьте, а не попадают ли они под правило выше.


В этой статье точку не поставишь, поэтому следите за её обновлениями и не делайте ошибок или учитесь их исправлять 😉

incode.pro

Что такое jquery-migrate?

Файл jquery-migrate.min.js в былые времена служил для того, чтобы поддерживать совместимость одновременно используемых на сайте разных версий JavaScript-библиотеки JQuery.

Исходный код страницы сайта

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

Как удалить jquery-migrate?

Наиболее простым и быстрым способом, на наш взгляд, будет использование премиум-плагин Clearfy Pro, который, имея множество других полезных для оптимизации Вашего сайта функций, сумеет в два клика очистить раздел <head> от загрузки бесполезной библиотеки jquery-migrate.min.js. Для этого нужно:

  • в админ-панели перейти Clearfy Pro;
  • на вкладке Код активировать опцию Удалить jquery-migrate.min.js.

Отключение jquery-migrate в плагине Clearfy Pro

Рассмотрим также несколько других, менее удобных, способов.

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

Способ 1. Плагин Remove jQuery Migrate

Этот способ подразумевает использование плагина Remove jQuery Migrate. Так, для решения задачи плагин следует установить и активировать. Он не требует каких-либо настроек со стороны пользователя.

Способ 2. Плагин Disable jQuery Migrate

Плагин Disable jQuery Migrate, как и предыдущий, тоже призван выполнять только одну функцию — отключать библиотеку jquery-migrate.min.js. Для этого необходимо его просто установить и активировать.

wpschool.ru

Other reasons to remove jQuery Migrate:

  • It’s better to keep your code, themes, and plugins updated than it is to patch in support of an extra file. Keeping your site updated also prevents it from Security attacks.
  • If you are running plugins that use older jQuery code, it’s probably better to update them or switch to an alternative kept updated.

How to remove jQuery migrate from WordPress?

Removing jQuery migrate from WordPress is quite easy. You just need to add following lines of code to your theme’s function.php file.

//Remove JQuery migrate  function remove_jquery_migrate( $scripts ) {  if ( ! is_admin() && isset( $scripts->registered['jquery'] ) ) {  $script = $scripts->registered['jquery'];    if ( $script->deps ) { // Check whether the script has any dependencies  $script->deps = array_diff( $script->deps, array( 'jquery-migrate' ) );  }  }  }    add_action( 'wp_default_scripts', 'remove_jquery_migrate' );

Another easiest way to disable it by adding plugin named Remove jQuery Migrate.

Remove jQuery Migrate:

This plugin removes the jQuery Migrate script from the front end of your site.

  • Go to Dashboard >> Plugins >> Add New.
  • Search for Remove jQuery Migrate
  • Click Install Now
  • Activate the plugin

And, that’s it. The plugin will do rest of your work.

This is a foremost used plugin that most of the developers suggest. There are also other plugins available that you can prefer.

www.infophilic.com

Я использую jquery 2.0, но хотел бы также использовать плагин миграции jQuery, чтобы мой сайт работал в старых браузерах. Тем не менее, я не увенчался успехом, чтобы заставить его работать. У меня есть следующее в разделе заголовка в моем html.

<head>  <meta http-equiv="X-UA-Compatible" content="IE=8" />  <script src="/Scripts/jquery-2.0.3.js"></script>  <script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>  <script src="/Scripts/jquery.validate.min.js"></script>  <script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> </head> 

Метатег совместимости, поэтому я могу проверить это на своем компьютере (который имеет IE 11). У меня нет компьютера с более старым IE. Во всяком случае, это дает мне ошибки javascript, такие как:

0x800a01b6 — Ошибка выполнения JavaScript: объект не поддерживает свойство или метод ‘addEventListener’

В руководстве по миграции jQuery (https://github.com/jquery/jquery-migrate/), похоже, просто говорится о включении плагина переноса после включения jQuery. Что я делаю неправильно?

ИЗМЕНИТЬ

Я обнаружил, что мой локальный файл jquery.js должен быть поврежден или, возможно, пакет nuget, из которого я его получил, имеет плохую версию. Поскольку эта ошибка исчезает, когда я включаю jquery непосредственно из code.jquery.com.

<head>  <meta http-equiv="X-UA-Compatible" content="IE=8" />  <script src="http://code.jquery.com/jquery-2.1.0.js"></script>  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> </head> 

Однако мои скрипты дают ошибку. Вот пример script

function HighlightSelectedRow(tr) {  $("#TableSummary tr").removeClass("HighlightedRow");  tr.className += " HighlightedRow"; } 

Он дает следующую ошибку:

0x800a138f - JavaScript runtime error: The value of the property '$' is null or undefined, not a Function object 

Спасибо

qaru.site

I’m using jquery 2.0 but would like to also use the jQuery migrate plugin so my website will work on older browsers. However, I’ve been unsuccessful at getting it to work. I have the following in the header section in my html.

<head>  <meta http-equiv="X-UA-Compatible" content="IE=8" />  <script src="/Scripts/jquery-2.0.3.js"></script>  <script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>  <script src="/Scripts/jquery.validate.min.js"></script>  <script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> </head> 

The compatibility meta tag is so I can test this on my computer (which has IE 11). I don’t have a computer with an older IE. Anyway, this is giving me javascript errors such as:

0x800a01b6 — JavaScript runtime error: Object doesn’t support property or method ‘addEventListener’

The jQuery migrate guide (https://github.com/jquery/jquery-migrate/) seems to just say to include the migrate plugin after including jQuery. What am I doing wrong?

EDIT

I found my local jquery.js file must be corrupt or maybe the nuget package I got it from has a bad version of it. Since that error goes away when I include jquery directly from code.jquery.com.

<head>  <meta http-equiv="X-UA-Compatible" content="IE=8" />  <script src="http://code.jquery.com/jquery-2.1.0.js"></script>  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> </head> 

However, my scripts give an error. Here’s an example script

function HighlightSelectedRow(tr) {  $("#TableSummary tr").removeClass("HighlightedRow");  tr.className += " HighlightedRow"; } 

It gives the following error

0x800a138f - JavaScript runtime error: The value of the property '$' is null or undefined, not a Function object 

Thanks

stackoverflow.com

You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.