jQuery - лучшие практики:
- Для подключения:
1. Всегда оставлять возможность загрузки локальной копии:
window.jQuery || document.write(путь к CDN)
2. В пути к CDN опускать протокол:
//...путь
- Для переменных:
1. Желательно сохранять jQuery-объекты в переменные, таким образом кэшируя их.
2. Созданные для этого переменные желательно именовать с префиксом $: const $selectors = $(...)
- Для селекторов:
1. Предпочтительно использовать ID-селекторы.
2. Для поиска дочерних вложенных элементов предпочтительнее метод .find(), чем указание вложенности в селекторе:
$("#products").find("div.id");
3. Вообще конкретизировать область поиска селекторов:
$('.class', '#class-container');
4. Не смешивать ID с другими селекторами (теряется оптимизация поиска).
- Обработка DOM:
1. Если элемент нужно обработать, его нужно извлечь из DOM с сохранением информации о нем. Для этого используется .detach():
let $myList = $("...").detach();
//... действия по обработке $myList
$myList.appendTo("#list-container");
2. Если элемента может не быть на странице, нужно выполнять проверку его присутствия, прежде чем запускать логику взаимодействия.
#JS #jQuery #best_practices
- Для подключения:
1. Всегда оставлять возможность загрузки локальной копии:
window.jQuery || document.write(путь к CDN)
2. В пути к CDN опускать протокол:
//...путь
- Для переменных:
1. Желательно сохранять jQuery-объекты в переменные, таким образом кэшируя их.
2. Созданные для этого переменные желательно именовать с префиксом $: const $selectors = $(...)
- Для селекторов:
1. Предпочтительно использовать ID-селекторы.
2. Для поиска дочерних вложенных элементов предпочтительнее метод .find(), чем указание вложенности в селекторе:
$("#products").find("div.id");
3. Вообще конкретизировать область поиска селекторов:
$('.class', '#class-container');
4. Не смешивать ID с другими селекторами (теряется оптимизация поиска).
- Обработка DOM:
1. Если элемент нужно обработать, его нужно извлечь из DOM с сохранением информации о нем. Для этого используется .detach():
let $myList = $("...").detach();
//... действия по обработке $myList
$myList.appendTo("#list-container");
2. Если элемента может не быть на странице, нужно выполнять проверку его присутствия, прежде чем запускать логику взаимодействия.
#JS #jQuery #best_practices