js 的调用方式与执行顺序

使用方式

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

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

• 直接在<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 中的函数。