Должны ли мы использовать $(document).ready() внутри функции самовызова (IIFE) для привязки событий к элементам HTML

Есть две реализации, между которыми я запутался: -

 - **FIRST**
// A self invoking function
selfFunction = (function(){

     $(document).ready(function(){        
          applyBindings();
      });

     applyBindings = function(){           
        $("#btnSubmit").on("click",function(){//Do Something});
        .....
        .....
        .....
        //More Bindings
     };
})();


- **SECOND**
 // A self invoking function
 selfFunction = (function(){

      applyBindings();      

      applyBindings = function(){           
        $("#btnSubmit").on("click",function(){//Do Something});
        .....
        .....
        .....
        //More Bindings
      };
})();

Единственное отличие состоит в том, что в ПЕРВОМ случае я привязываю события, используя $(document).ready(). Где, как и во ВТОРОМ, я вызываю функцию внутри функции самовызова.

Оба выполняют свою работу, но я хочу знать, какой из них следует соблюдать и почему??


javascript html closures document-ready iife
person Nishaant Sharma    schedule 24.08.2017    source источник
comment
Самовызывающиеся функции здесь неуместны. Смысл их использования состоит в том, чтобы создать среду с ограниченной областью действия, чтобы вы могли создать кучу переменных с помощью var, чтобы не загрязнять глобальную область видимости. Вы не используете var, поэтому все ваши переменные в любом случае становятся глобальными.   -  person Quentin    schedule 24.08.2017
comment
Второй пример не сработает. Вы вызываете applyBindings перед тем, как присвоить ему значение. Это должно вызвать ошибку, потому что undefined не объявлено в то время, когда вы его вызываете.   -  person Quentin    schedule 24.08.2017
comment
@nishaant-шарма. Не могли бы вы уточнить, что будет представлять собой ответ на ваш вопрос? Насколько я могу судить, я ответил на него. Возможно, у вас уже был другой (своего рода) ответ? Просто любопытно.   -  person jonahe    schedule 25.08.2017

Ответы (1)


arrow_upward
1
arrow_downward

Разница в том, что использование $(document).ready(callback) будет работать, даже если ваш файл js был загружен (что привело к выполнению IIFE) до того, как элементы, к которым вы применяете привязки, были отрисованы. (Может быть из-за какой-то сложной структуры страницы, медленной загрузки картинок или чего-то подобного).

Как следует из названия, $(document).ready(callback) гарантирует, что ваша функция не будет запущена, пока документ не будет... готов. Таким образом, вы можете быть уверены, что, например, элемент с идентификатором btnSubmit существует. (Предположим, что это часть исходного HTML, т. е. не динамически создается в другом месте кода).

Чтобы было ясно, это

$("#btnSubmit")

та часть, где он может сломаться. Потому что, если кнопки еще нет, то не имеет значения, что щелчок точно не произойдет до того, как кнопка появится. Прослушиватель событий, указанный в остальной части кода, следующего за $("#btnSubmit") (т. е. .on("click", callback)), не будет применяться к кнопке, поскольку кнопки (пока) нет.

Таким образом, версия $(document).ready(callback) безопаснее в большинстве случаев.

person jonahe    schedule 24.08.2017
comment
я использую делегирование событий для привязки событий, так что проблема существования идентификатора не будет проблемой. - person Nishaant Sharma; 24.08.2017
comment
Я понимаю, но в более общем случае я все еще подозреваю, что мой ответ заключается в том, почему обычно можно увидеть (и предпочесть) реализацию $(document).ready(callback) (даже если она избыточна в вашем конкретном случае). - person jonahe; 24.08.2017
comment
Теперь я думаю, что, возможно, делегирование события (если вы имеете в виду, что обратный вызов не вызывается до тех пор, пока не произойдет событие щелчка), вас не спасет. Я обновил свой ответ. - person jonahe; 24.08.2017