Мой index.html включает в себя два кода javascript, которые plugin.js и main.js (основные включают после плагина),
Я хочу сделать plugin.js плагином для повторного использования, например, проверить, есть ли в файле index.html какие-либо элементы с атрибутом класса click-me, если в index.html есть элементы такого типа, тогда установить каждый этот вид элементов в EventListener.

Я хочу, чтобы моя window.onload функция ВСЕГДА в main.js, а не plugin.js, но в этом случае я не могу получить объект DOM по className в plugin.js, я также не хочу вызвать любую функцию plugin.js в main.js.

У кого-нибудь есть идеи?

0
FlyC 7 Дек 2016 в 13:13

3 ответа

Лучший ответ

Ну, вы должны правильно использовать onload в качестве прослушивателя событий:

window.addEventListener("load", function() {

});

Это может быть добавлено столько раз, сколько вы хотите, как в main.js, так и в plugin.js.

Кроме того, лучше использовать DOMContentLoaded, поскольку это не ждет загрузки изображений. Это действительно важно, если вы полагаетесь на window.onload, только одно ожидающее изображение может сделать вашу страницу бесполезной в течение первых 10 секунд посещения. Используется так:

  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });

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

Ну и последнее - не связывайте свои сценарии перед телом, если в этом нет необходимости. Они блокируют разбор страницы.

1
Tomáš Zato - Reinstate Monica 7 Дек 2016 в 11:11

Вы можете просто включить сценарии после тела.

<body>
</body>
<!-- add your scripts here -->

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

Другая возможность - использовать defer

<script type="text/javascript" src="plugin.js" defer></script>
<script type="text/javascript" src="main.js" defer></script>

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

Более подробный ответ здесь

2
Community 23 Май 2017 в 12:01

Почему бы вам просто не проверить, есть ли у элемента clicked класс click-me из корня? Это заставляет вас объявлять только одного слушателя на теле.

function listener(event) {
    if(event.target.classList.contains("click-me")) {
        // Do something
    }
}
document.body.addEventListener("click", listener, true);
-1
Kulvar 7 Дек 2016 в 10:42