Могу ли я использовать более одного раза $ (документ) .ready () из jquery на одной HTML-странице? - PullRequest
Новая
       6

Могу ли я использовать более одного раза $ (документ) .ready () из jquery на одной HTML-странице?

6 голосов
/ 18 августа 2011

у меня есть одна HTML-страница с именем "text.html" 

<html>
    <body>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="js/Photos.js"></script>
        <script type="text/javascript" src="js/Animations.js"></script>
    </body>
</html>

И Photos.js, и Animations.js начинаются с "$ (document) .ready ()", как это 

//Javascript File Photos.js
$(document).ready(function() {
    //My code here ....
});

//Javascript File Animations.js
$(document).ready(function() {
    //My code here ....
});

Имеет ли значение, если я использую несколько $ (документ) .ready (function () {на одной HTML-странице ??

Спасибо, заранее

Ответы [ 5 ]

6 голосов
/ 18 августа 2011

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

Также рассмотрите возможность использования короткой руки $(function() { ... });

2 голосов
/ 22 августа 2011

Имеет ли значение, если я использую несколько $ (document) .ready (function () {на одной html-странице ??

Да, это важно.

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

Для написанного кода и плагинов вы всегда должны пытаться использовать только один $(document).ready() или $(window).load(),но вы найдете много плагинов, начинающихся с этого вызова, как вы указали.

Edit

Если вы действительно не можете устоять перед использованием $ (document) .ready () несколько раз, по крайней мере, попытайтесь сохранить ссылку на документ в переменной при первом использовании, поэтому вам не нужно каждый раз проверять объект документа, например: 

// store the jQuery document object to a variable
var $document = $(document);

$document.ready( //... );

По крайней мере, вы сохраните некоторые вызовы функций.

2 голосов
/ 18 августа 2011

Нет, это не имеет значения.

Однако все может содержаться в одном и том же.

EDIT:

См. Мой ответ в этой теме для подробного объяснения вашего комментария:

Будет ли проблема при связывании файлов javascript в теле, а не в заголовке?

1 голос
/ 22 августа 2011

Имеет ли значение, если я использую несколько $ (document) .ready (function () {на одной html-странице ??

Нет, это не имеет значения, и в некоторых (читай: во многих) случаях это правильный путь. Однако, как всегда, я хотел бы привести несколько (полезных) указателей:

Как вы упомянули в комментарии, технически добавление вызова файла до </body> действительно означает, что вам в принципе не нужно использовать $(document).ready(). Лично я стараюсь избегать как можно больше, поскольку jQuery не так строг, как один JS (это означает, что большинство скриптов работают без $(document).ready()).

[РЕДАКТИРОВАТЬ: Эта часть моего ответа не является точной, пожалуйста, см. Комментарии ниже] Кроме того, не имеет смысла добавлять JQuery внутри в нижний колонтитул, или даже в <body>. Технически это не является неправильным, но если вы имеете дело с cms-подобным программным обеспечением или некоторыми шаблонными функциями, то вы хотите, чтобы на всех страницах был включен jQuery. ИЛИ вы можете просто назвать это моим старым школьным знанием.

Поскольку вы хотите вызывать Photos.js и Animations.js в нижнем колонтитуле, я предполагаю, что они не являются правильными плагинами. Если вы хотите сделать свой код более узким, то скомпонуйте их в правильный плагин. Затем вы можете добавить плагины в заголовок и иметь один файл нижнего колонтитула, в котором вы назначаете плагины для элементов (читай: активируйте их.) Вот краткое руководство о том, как создавать свои собственные плагины.

Кроме того, если у вас есть несколько файлов JS, они должны быть включены на страницу. Тогда вы можете сделать свой код более аккуратным, используя $.getScript(). Сначала вы должны добавить jQuery, как всегда, но вызывать другие файлы можно в одном теге <script>. Выглядит аккуратнее и, кажется, немного быстрее (по крайней мере, в вашей голове). Я приведу небольшой пример: 

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <!-- Content camps here -->
        <script type="text/javascript">
            $.getScript('js/Photos.js');
            $.getScript('js/Animations.js');
        </script>
    </body>
</html>
1 голос
/ 18 августа 2011

Ни в малейшей степени. Они оба собираются запустить одно и то же событие. Все в порядке. :)

...