Модуль JavaScript-модуля document.ready не работает

Question

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

1. Когда сценарий загружается в тег тела (после элемента footer), он работает и добавляет класс в нижний колонтитул.

2. Когда сценарий загружается в тег заголовка (перед элементом нижнего колонтитула), он не работает, даже если инициатор не должен вызываться, пока документ не будет готов.

Я предполагаю, что document.ready работает не так, как ожидалось, и поэтому он не находит элемент нижнего колонтитула, поскольку он не существует.

Это искажало меня целую вечность, и я не могу найти решение, может кто-то пролить свет на эту проблему?

Пример: https://jsfiddle.net/5x5skoq3/

var App = (function ($) { 
    "use strict"; 

    // private alias to settings 
    var s; 

    return { 
     settings: { 
      footer: $("footer") 
     }, 

     init: function() { 
      s = this.settings; 

      this.footer(); 
     }, 

     footer: function(){ 
      s.footer.addClass("active"); 
     } 
    }; 
})(jQuery); 


jQuery(document).ready(function() { 

    App.init(); 

}); 

Спасибо

Answer 1

Это не проблема, что init называется слишком рано, а то, что settings: { footer: $("footer") } оценивается слишком рано. Вы уже ссылаетесь на элемент здесь, когда модуль загружен, а не когда он инициализирован.

К счастью, это легко исправить:

var App = (function($) { 
    "use strict"; 

    var footer; 

    return { 
     settings: { 
      footerSelector: "footer" 
     }, 
     init: function() { 
      footer = $(this.settings.footerSelector); 
      this.footer(); 
     }, 
     footer: function() { 
      footer.addClass("active"); 
     } 
    }; 
})(jQuery); 

Answer 2

В этом случае App является самостоятельной функцией вызова. Функция выполняет создание возвращаемого объекта и всех его свойств. В то время, когда функция self вызывает, footer: $("footer") называется возвратом объекта jQuery с length: 0, указывающим, что селектор не возвратил согласованные элементы или наборы элементов. Я обновил ваш jsfiddle, чтобы узнать количество совпадений, которое было найдено по вашему звонку, до init.

Вы можете исправить это различными способами. То, как я бы, вероятно, исправить это было бы преобразовать settings в конструктор объекта:

var App = (function ($) { 
 
    "use strict"; 
 

 
    // private alias to settings 
 
    var s; 
 

 
    return { 
 
     settings: function() { 
 
      this.footer = $('footer'); 
 
     }, 
 

 
     init: function() { 
 
      s = new this.settings(); 
 

 
      this.footer(); 
 
     }, 
 

 
     footer: function(){ 
 
      s.footer.addClass("active"); 
 
     } 
 
    }; 
 
})(jQuery); 
 

 

 
jQuery(document).ready(function() { 
 

 
    App.init(); 
 

 
});

footer.active { 
 
    background-color: red; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    Header content 
 
</header> 
 

 
<footer> 
 
    Footer content 
 
</footer>

Используя этот метод, вы по-прежнему держать логику из функции init, но поддерживать согласованность с вашим исходный пример, где settings возвращает объект.