在其他编程语言中,我们可以通过划分模块,来组织庞大复杂的项目,而JS一开始并没有模块的概念,因为一开始JS的脚本就很简单。
后来随着JS的发展,前端要开发的项目越来越复杂,也越来越大型,因此需要更好的代码组织方式,于是JS也引入了模块功能,比如AMD,UMD,CommonJS等等不同的模块加载方式。
而在ES6规范中,也引入了官方的模块加载方式,也就是我们下面要讨论的知识。
在JS中,一个文件或者脚本就是一个模块,模块可以声明哪些变量或函数供外部使用,也可以引入其他模块的变量与函数为自己所用,在模块中,使用export
标记了可以从当前模块外部访问的变量和函数,使用import
从其他模块导入所需要的功能,如:
hello.js
//声明当前模块可以被其他模块使用的变量
export function sayHello() {
alert('Hello');
}
main.js
//导入其他模块的变量
import {sayHello} from './hello.js';
alert(sayHello);
sayHello();
在支持ES6规范的浏览器中,可以使用用<script type="module"></script>
标签可以声明模块或者导入其他模块,如:
<!doctype html>
<script type="module">
import {sayHi} from './say.js';
document.body.innerHTML = sayHi('John');
</script>
提示:目前前端项目开发中,很少使用上面这种在浏览器中使用模块的方式(不排除有少数),我们一般是创建一个工程项目,再通过webpack这类的构建工具解析各个模块的导出与依赖,最终打包上线的。
模块的代码始终默认使用现代模式use strict
,例如对一个未声明的变量赋值或者重复声明变量都将产生错误。
<script type="module">
test = 5; // 未声明就使用,报错
let a = 1;
let a = 2;//重复声明,报错
</script>
上面的示例中,如果把type=module
去掉,变成非模块代码,则可以正常运行。
如果同一个模块被导入多次,那么它的代码只在第一次导入时便解析运行,比如下面的示例中,只会弹窗一次:
hello.js
alert(1);
index.html
<script type="module" src="./hello.js"></script>
<script type="module" src="./hello.js"></script>
在JS模块中,this
关键字的值undefined
,非模块脚本的顶级 this
是全局对象,比如浏览器的window
。
非模块代码
<script>
alert(this)
</script>
输出Object
模块代码
<script type="module">
alert(this)//undefined
</script>
输出undefined
export命令用于模块内部导出可供外部使用的变量,导出的方式有:
可以在变量或函数声明加上export命令,便可以直接导出该变量或函数,如:
export function sayHello(){
return "Hello";
}
export let a = 1;
也可以在声明之后,再使用export命令进行导出,不过这时候,导出的变量需要用花括号{}
包括起来,如:
//声明
function sayHello(){
return "Hello";
}
//导出
export {sayHello};//正确
//export sayHello;错误
也可以同时导出多个变量,如:
function sayHello(){
return "Hello";
}
const username='test';
export {username,sayHello}
如果直接使用export导出,则使用者必须知道模块导出的变量名称,否则就无法加载,因为使用者需要先了解你的模块代码,但如果想让使用者直接使用而不用了解你的代码,则可以使用export default来指定模块的默认输出。
hello.js
export default function(){
return "hello"
}
在导出的时候,可以使用关键字as给导出的变量重新命名,如:
function sayHello(){
return "Hello";
}
export {sayHello as sayHi}
import命令用于在当前模块中导出其他模块的可用变量与函数。
如果要导入一个模块的全部变量与函数,可以使用*
导出全部,但这种不按需导入的方式,可以会导入很多你不需要的东西,因此一般不推荐使用:
import * from './hello.js'
另外,可以使用as关键字给整体导出起一个别名,如:
import * as say from './hello.js';
say.hello();
如果我们只需要导入其他模块的部分功能,则可以使用花括号{}
来指定要导出的变量与函数,如:
import {sayHi,sayHello} from './hello.js';
在导入的时候,也可以使用关键字as
给导入的变量与函数起个别名,如:
import {sayHi as hi, sayBye as bye} from './hello.js';
https://www.leftso.com/article/2408050948472249.html