JS的调用方式与执行顺序

使用方式

HTML页面中的任意位置加上<script type="module"></script>标签即可。

type="module"  //必须要加，这可以严格限制变量的作用域，

把每个变量严格限制在它应有的作用域内。

常见使用方式有以下几种：

• 直接在<script type="module"></script>标签内写JS代码。
• 直接引入文件：<script type="module" src="/static/js/index.js"></script>。
• 将所需的代码通过import关键字引入到当前作用域。

例如：
/static/js/index.js文件中的内容为：

let name = "acwing";

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

export {
    
    name,
    print
}

<script type="module"></script>中的内容为：

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

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

---

执行顺序

1. 类似于HTML与CSS，按从上到下的顺序执行；
2. 事件驱动执行；

---

HTML, CSS, JavaScript三者之间的关系

1. CSS控制HTML
2. JavaScript控制HTML与CSS
3. 为了方便开发与维护，尽量按照上述顺序写代码。例如：不要在HTML中调用JavaScript中的函数。

---