javaScript 基础知识汇总 (十五)
1、模块简介
什么是模块:
模块就是一个文件,一个脚本,通过关键字export 和 import 交换模块之间的功能。
export 关键字表示在当前模块之外可以访问的变量和功能。
import 关键字允许从其他模块中导入一些诸如函数之类的功能。
使用示例:
文件 say.js
export function sayHi(user)
return `Hello ,${user}!`;
}
文件index.html
<!doctype html>
<script type="module">
import {sayHi} from './say.js';
document.body.innerHTML = sayHi('John");
</script>
核心模块功能
1)始终使用 use strict
2)模块级作用域
每个模块都有自己的作用域
3)模块代码仅在第一次导入时解析
顶级 “this" 是未定义的(undefined)
在模块中的this与模块中的区别是 普通脚本中的this 是window 而模块中的this则是undefined
<script>
alert(this);//window
</script>
<script type = "moudle">
alert(this);//undefined
</script>
模块脚本是延迟解析的
- 外部模块脚本
<script type="module" src="...">
不会阻塞 HTML 的解析,它们与其他资源并行加载。 - 直到 HTML 文档完全解析渲染后(即使模块脚本比 HTML 先加载完成),模块脚本才会开始运行。
- 执行脚本的相对顺序:在前面的先执行。
不允许裸模块
import
{
sayHi}
from
'sayHi'
;
// Error,“裸”模块
// 模块必须提供路径,例如 './sayHi.js'
2、模块的导入导出
声明前导出
// 导出数组 export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; // 导出 const 声明的变量 export const MODULES_BECAME_STANDARD_YEAR = 2015; // 导出类 export class User { constructor(name) { this.name = name; } }
声明后导出
1 function sayHi(User){ 2 alert(`Hello,${User}!`); 3 } 4 fucntion sayBye(user) 5 alert(`bye,${user}!`); 6 } 7 export{sayHi,sayBye};
指明导入的内容
1 // 📁 main.js 2 import {sayHi, sayBye} from './say.js'; 3 4 sayHi('John'); // Hello, John! 5 sayBye('John'); // Bye, John!
全部导入
1 // 📁 main.js 2 import * as say from './say.js'; 3 4 say.sayHi('John'); 5 say.sayBye('John');
导入和导出通过 as给对象起别名
1 // 📁 main.js 2 import {sayHi as hi, sayBye as bye} from './say.js'; 3 4 hi('John'); // Hello, John! 5 bye('John'); // Bye, John! 6 7 // 📁 say.js 8 ... 9 export {sayHi as hi, sayBye as bye}; 10 11 // 📁 main.js 12 import * as say from './say.js'; 13 14 say.hi('John'); // Hello, John! 15 say.bye('John'); // Bye, John!
3、动态导入
import() 函数
1 say.js 2 3 export function hi() { 4 alert(`Hello`); 5 } 6 7 export function bye() { 8 alert(`Bye`); 9 } 10 11 export default function() { 12 alert("Module loaded (export default)!"); 13 } 14 15 index.html 16 17 <!doctype html> 18 <script> 19 async function load() { 20 let say = await import('./say.js'); 21 say.hi(); // Hello! 22 say.bye(); // Bye! 23 say.default(); // Module loaded (export default)! 24 } 25 </script> 26 <button onclick="load()">Click me</button>