JavaScript-模块化开发（一）基础知识

最新推荐文章于 2024-04-11 18:26:18 发布

w_向北

最新推荐文章于 2024-04-11 18:26:18 发布

阅读量380

点赞数

分类专栏： JavaScript-模块化开发文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_40754757/article/details/127204792

版权

JavaScript-模块化开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

标签使用

在html文件中导入模块，需要定义属性 type="module"

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

模块路径

在浏览器中引用模块必须添加路径如 ./ 但是在打包工具如 webpack 中则不需要
测试的 test.js 的模块内容如下

export let test = {
	name:'xb';
};

下面没指定路径将发生错误

<script type="module">
  import { test } from "test.js";
</script>

正确使用需要添加上路径

<script type="module">
  import { test } from "./test.js";
</script>

延迟解析

模块总是会在所有 html 解析后才执行，下面的模块代码可以看到后加载的 button 按钮元素。

建议为用户提供加载动画提示，当模块运行时再去掉动画

<body>
  <script type="module">
    console.log(document.querySelector("button")); //Button
  </script>
  <script>
    console.log(document.querySelector("button")); //undefined
  </script>
  <button>xb</button>
</body>

严格模式

模块默认运行在严格模式下，以下代码没有使用声明语句将会报错

<script type="module">
	xb = "xb"; // Error
</script>

下面的 this 也会是 undefined

<script>
  console.log(this); //Window
</script>
<script type="module">
  console.log(this); //undefiend
</script>

作用域

模块都有独立的顶级作用域下面的模块不能互相访问

<script type="module">
  let xb = "xb";
</script>

<script type="module">
  alert(xb); // Error
</script>

单独文件作用域也是独立的，下面的 1.1.js 和 1.2.js 不能相互访问

<script type="module" src="1.1.js"></script>
<script type="module" src="1.2.js"></script>

# 1.1.js
let xb = "xb";

# 1.2.js
console.log(xb)

预解析

模块在导入时只执行一次解析之后的导入不会再执行模块代码而使用第一次解析的结果并共享数据

可以在首次导入时完成一些初始化工作
如果模块内有后台请求也只执行一次

引入多次 test.js 脚本时只执行一次

<script type="module" src="test.js"></script>
<script type="module" src="test.js"></script>

#test.js内容如下
console.log("xb");

下面在导入多次 test.js 时只解析一次

<script type="module">
  import "./test.js";
  import "./test.js";
</script>

# test.js内容如下
console.log("xb");

w_向北

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-模块化开发（一）基础知识

javascript开发模块化编程基础知识
复制链接

扫一扫

专栏目录