#jquery
#jquery
Вопрос:
Вроде как новичок в jQuery и ищу помощь о том, как сохранить весь мой скрипт в одном внешнем файле и не вкладывать все это в document.ready();. Я надеюсь иметь возможность вызывать определенные функции только с определенных страниц, а остальные обрабатывать с помощью ready();. Я также не уверен на 100%, что лучше всего вызывать функцию со страницы:/ Спасибо.
Комментарии:
1. Я не уверен, что вы имеете в виду. Когда DOM будет готов, вы сможете делать все, что угодно. И?
Ответ №1:
Нет ничего плохого в наличии нескольких document.readys
Мне нравится добавлять уникальный идентификатор к каждой странице и заставлять javascript проверять, существует ли идентификатор перед выполнением. Вы можете создать простую функцию-оболочку, которая выполняет проверку И ожидает document.ready:
var pageReady = function (id, callback) {
$(function () {
if ($(id).length) {
callback();
}
});
};
Затем, аналогично document.ready, вы можете иметь:
pageReady("#home-page", function () {
// Code will only run for home page here
});
pageReady("#search-page", function () {
// Code will only run for search page here
});
Просто не забудьте добавить идентификаторы…
<body id="home-page">
Комментарии:
1. Этот подход, похоже, работает для моего приложения. Похоже, я могу сохранить все свои функции вложенными в document.ready(); и использовать переменную pageReady для вызова функций, которые необходимы на этих страницах.
2. @geraddavivs, просто будьте осторожны с размещением всей вашей функции в document.ready, если вас беспокоит производительность artzstudio.com/2009/04/jquery-performance-rules
3. Это полезно (и работает), если вы не хотите иметь JS в представлении (только в site.js для сокращения). Но один вопрос: основная функция вызывается при каждой загрузке страницы (также для всех других страниц)… Как насчет производительности ..?
Ответ №2:
При желании вы можете сохранить все свои скрипты в одном файле. Вы можете использовать свои обычные функции JS в файле, а не внутри функции document.ready(), если вам не нужно манипулировать DOM или взаимодействовать с ним. Затем вы можете поместить все свои JS для управления DOM и взаимодействия внутри функции document.ready(). Вы также можете поместить JS в функцию $(window).load() для запуска кода после загрузки всех ресурсов на странице, включая изображения.
Пример:
$(window).load(function() {
// code that will run once all resources and the DOM are loaded into the browser
console.log("window loaded");
});
runOnScriptLoad();
function runOnScriptLoad() {
// code that will run as soon as the JS file loads
console.log("script loaded");
}
$(document).ready(function () {
// code that will run once the entire DOM is loaded into the browser
console.log("DOM ready");
});
$(window).load(function() {
// code that will run once all resources and the DOM are loaded into the browser
console.log("window loaded");
});
Страница примера: => http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-dom-ready.html
При загрузке страницы откройте консоль firebug, и вы увидите порядок, в котором выполняется каждая из них.
Комментарии:
1. @Alex почему? Это полезно только в определенных ситуациях, поскольку выполняется медленнее, чем document ready.
2. @box9 для этих конкретных ситуаций. И разница в скорости не огромная .
3. @box9 @Alex, разница полностью зависит от размера ресурсов и скорости интернет-соединения, по которому эти ресурсы извлекаются. Я не помню, в чем была ситуация, но был один раз, когда мне пришлось использовать $(window).load(), и это спасло меня. Кроме этого, у меня никогда не было необходимости в этом, но я подумал, что было бы неплохо поделиться.
4. @Alex @Mike Grace Мне никогда не приходилось использовать .load(), поэтому мне просто любопытно узнать, какие практические сценарии требуют этого.
5. Есть действительно хороший аргумент в пользу использования . загрузка при artzstudio.com/2009/04/jquery-performance-rules в # 9
Ответ №3:
Вы можете использовать несколько готовых dom-файлов.
Один из моих любимых способов определить, следует ли мне запускать какой-либо код на странице, — это присвоить телу уникальный класс, а затем использовать это…
if ($('body').hasClass('contact')) {
// Validate form, etc
}
Ответ №4:
Хотя JavaScript предоставляет событие load для выполнения кода при рендеринге страницы, это событие не запускается до тех пор, пока все ресурсы, такие как изображения, не будут полностью получены. В большинстве случаев скрипт можно запустить, как только иерархия DOM будет полностью построена. Обработчик, переданный в .ready(), гарантированно будет выполнен после того, как DOM будет готов, поэтому обычно это лучшее место для подключения всех других обработчиков событий и запуска другого кода jQuery. При использовании скриптов, которые полагаются на значение свойств стиля CSS, важно ссылаться на внешние таблицы стилей или внедрять элементы стиля, прежде чем ссылаться на скрипты.
Ответ №5:
В вашем внешнем файле вы можете иметь $(document).ready(function () { //code here; }); Альтернативно, вы можете иметь все свои функции во внешнем файле, а затем просто на вашей странице иметь
$(document).ready(function () { myfunction(); });