Calling mode and execution sequence of JS

Usage mode

HTML Add... Anywhere on the page <script type="module"></script> Labels can be .

type="module"  // Must add , This can strictly limit the scope of variables ,

Strictly limit each variable to its proper scope .

There are several common ways to use ：

• Directly in <script type="module"></script> The label says JS Code .
• Import files directly ：<script type="module" src="/static/js/index.js"></script>.
• Pass the required code through import Keyword is introduced into the current scope .

for example ：
/static/js/index.js The contents of the file are ：

let name = "acwing";

function print() {
    
    console.log("Hello World!");
}

export {
    
    name,
    print
}

<script type="module"></script> is ：

<script type="module">
    import {
     name, print } from "/static/js/index.js";

    console.log(name);
    print();
</script>

Execution order

1. Be similar to HTML And CSS, Press From top to bottom Sequential execution ;
2. Event driven execution ;

HTML, CSS, JavaScript The relationship between the three

1. CSS control HTML
2. JavaScript control HTML And CSS
3. In order to facilitate development and maintenance , Try to write code in the above order . for example ： Not in HTML Call in JavaScript The function in .