4

When I learnt JavaScript a few years back, jQuery was still considered good standard practice, and it was recommended that the main application code be called from the $document.ready() event handler, so as to ensure the DOM was safe to use.

Fast forward a few years since the last time I worked on JavaScript, and the consensus nowadays seems to be to avoid jQuery. Also, since scripts are usually loaded at the very end of the HTML document, it seems that $document.ready() might not be needed any longer.

In question $(document).ready equivalent without jQuery I see several modern alternatives for this piece of code. However, it is still not clear to me whether including any one of these is considered standard practice or recommended, in general.

So my question is about current practice: should I always include such code as the entry point of a Vanilla JS application, or, on the contrary, is it considered now safe to start loading the JS app without any wrappers?

finitud
  • 610
  • 1
  • 6
  • 14
  • 4
    Does this answer your question? [$(document).ready equivalent without jQuery](https://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery) – Balastrong Oct 17 '21 at 09:50
  • 1
    If by JS app you're referring to a single page application, then `$document.ready()` is useless beyond the first "page" anyway. – volt Oct 17 '21 at 09:59
  • @Balastrong it only partly answers the question. I'm also interested in knowing whether including that code is standard practice nowadays. I should perhaps reword the question a little bit to emphasize this. – finitud Oct 17 '21 at 10:04
  • 1
    @volt not specifically referring to a single page app, but in general. – finitud Oct 17 '21 at 10:10
  • The question has been closed *after* my edit to clarify that I'm asking about best practice, not specific code. And it's been closed because it's a "duplicate" of a question that does NOT ask about best practice, just specific code. Could this be reviewed, please? – finitud Oct 17 '21 at 10:19
  • 1
    [Best practice for including scripts, defer or execute on DOMContentLoaded event?](https://stackoverflow.com/questions/61052552/best-practice-for-including-scripts-defer-or-execute-on-domcontentloaded-event) is open but hasn't attracted many answers. Opinion-based and there is no real standard or best practice here. – MikeM Oct 17 '21 at 10:23

1 Answers1

3

An equivalent is DOMContentLoaded event

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

Source : https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
});

To address the last part of your question, I'd say "Yes !" ^^

You can define your custom functions outside of this "main function" scope, but wait for the event to be completed before doing anything with the DOM.

Philippe
  • 1,134
  • 12
  • 22
  • What does "Yes" mean in this context? The question at the bottom has two possible answers. Do you mean "Yes use JQuery" or "Yes it is safe to use vanilla Javascript"? – Connor Oct 04 '22 at 11:35
  • 1
    Hi @Connor ! Indeed, you're right ;) "Yes" targets "should I always include such code as the entry point of a Vanilla JS application". That's why I introduced `DOMContentLoaded` for regular javascript. – Philippe Oct 04 '22 at 16:13
  • What if we're not limited to a vanilla JS application, which is the better option? The eventListener or JQuery? – Connor Oct 04 '22 at 16:51
  • 1
    @Connor, in that case you have to choose ^^ In my humble opinion, the better is to do without any additional programming libraries as often as possible :) – Philippe Oct 04 '22 at 17:04
  • @Philippe DOMContentLoaded isn't actually equivalent to JQuery.ready. JQuery will fire ready() even if you register the callback after the page has loaded to ensure if actually fires. Conversely, if you add a listener to DOMContentLoaded after that event has fired, nothing will happen. – Scribblemacher Feb 27 '23 at 19:01
  • @Connor under the hood, JQuery using the `DOMContentLoaded` event, but with a few additional checks to ensure that the callback will still fire even if the page has already loaded. – Scribblemacher Feb 27 '23 at 19:02