Проблемы доступности и организации кода в JavaScript с помощью jquery
-
22-07-2019 - |
Вопрос
У меня проблемы с порядком кода в программе.прямо сейчас у меня есть кое-какие дела document.ready(function() { } );
и некоторые вещи за его пределами.Всякий раз, когда я что-то перемещаю (чтобы организовать или улучшить свой код), я в конечном итоге что-то ломаю, предполагаю, из-за порядка объявлений или уровней доступа (т.что-то за пределами document.ready(function {});
не может получить доступ к чему-то внутри него.
Кто-нибудь знает, где что-то должно быть расположено с точки зрения JavaScript?
Должно ли все быть внутри document.ready(function() {});
?
Есть ли причина иметь что-то за пределами document.ready(function() {});
?
Код внутри document.ready(function() {});
недоступен по внешнему коду?
Решение
1. Должно ли все быть в пределах document.ready (function () {});?
Нет, я думаю, что функция document.ready должна быть только для инициализации, назначения обработчиков событий и т. д.
2. Есть ли причина иметь что-нибудь за пределами document.ready (function () {});?
Повторное использование кода и лучшая организация кода.
3. Код внутри document.ready (function () {}); недоступен внешним кодом?
Да, переменные и объекты, созданные в документе. уже недоступны из внешней области.
Другие советы
Должно ли все быть внутри document.ready(function() {});?
Да и нет.В крупномасштабных приложениях JavaScript я инициализирую свои основные контроллеры в глобальной области действия с помощью этого обработчика событий.Однако есть код, которому не нужно ждать готовности DOM, а именно: код, который не зависит от DOM.Я думаю, это довольно просто.Например, я объявляю классы объектов конфигурации, функции и т. д. вне этого обработчика событий.
Есть ли причина иметь что-то за пределами document.ready(function() {});?
Конечно, по причине, упомянутой выше.В основном код, который не требует взаимодействия с DOM, не должен ждать загрузки DOM, особенно если он может выполняться асинхронно с загрузкой DOM (например:определения функций, объекты конфигурации и т. д.).
Кроме того, отсутствие включения всего вашего кода в один обработчик событий делает все более организованным, позволяет вам модульизировать код, использовать правильные шаблоны проектирования и т. д.
Это код внутри document.ready(function() {});недоступен по внешнему коду?
Опять же, да и нет.Если вы объявите его локальным с помощью var
тогда да, он недоступен из внешней области, поскольку является локальным для обработчика событий;в противном случае он находится в глобальной области и доступен из внешней области.Вот пример (размещен здесь: http://jsbin.com/uriqe)
JavaScript
var foo = function() {
alert(global);
return false;
}
$(document).ready(function() {
global = "you can see me!?";
alert("global is initiated");
});
HTML
<body>
<p><a href="#" onclick="foo()">click me</a></p>
</body>
onclick
вместо ненавязчивого прикрепления событий метода в $(document).ready()
используется намеренно, чтобы избежать каких-либо вопросов/споров по поводу foo
имея доступ к global
через свойство замыкания.
Редактировать: Я думал, что ясно выразился в предыдущем предложении, но onclick
используется намеренно, чтобы избежать путаницы между глобальной областью действия и свойством замыкания, но Я не призываю использовать onlick
. Конечно, это плохая практика, и вам не следует ее использовать.