How are external scripts/modules within a DOM loaded?-CodePudding

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/chessboard-1.0.0.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="module" src="js/gitchess/chess.js"></script>
    <script type="text/javascript" src="js/chessboard-1.0.0.js"></script>
    <script type="module" src="js/frontend.js"></script>
    <title>CHESS</title>
</head>

Since objects inside chess.js aren't accessible unless they are import 'ed, are they loaded into a separate file? For that matter, how are module scripts loaded into DOM as opposed to regular scripts?

CodePudding user response：

See the below guide: Modules in HTML/JS Also, this repository contains a very basic example of how to use modules: Github Basic Module Usage

CodePudding user response：

If you mean how scripts are loaded behind the scenes there are 3 ways that I put this image which explains ideally based on the different script loadings: https://i.stack.imgur.com/ULvu1.png

As you can see, the script that has 'defer' is parsed simultaneously but will be executed after the HTML is parsed completely. The order in which you write the scripts becomes essential if you need some data to be available sooner.

<script type="module" src="js/gitchess/chess.js" defer></script>

The async attribute, by the way, pauses the HTML parsing process and starts executing the script files. The order is not essential though.

<script type="module" src="js/gitchess/chess.js" async></script>

I hope I have understood your question as it should.