4.import命令
使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块
上面代码的import命令,用于加载profile.js文件,并从中输入变量。import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同
如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名
注意import命令具有提升效果,会提升到整个模块的头部首先执行
上面的代码不会报错,因为import的执行早于foo的调用。这种行为的本质是,import命令是编译阶段执行的,在代码运行之前
由于import是静态执行,所以不能使用表达式和变量,这些只有在运行时才能得到结果的语法结构
上面三种写法都会报错,因为它们用到了表达式、变量和if结构。在静态分析阶段,这些语法因为都没有执行,所以是没法得到值的
如果多次重复执行同一句import语句,那么只会执行一次,而不会执行多次
5.模块的整体加载
除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面
现在,加载这个模块
上面写法是逐一指定要加载的方法,整体加载的写法如下
6.export default 命令
从前面的例子可以看出,使用import命令的时候,用户需要知道所要加载的变量名或函数名,才能按照export对应输出的名称去加载,否则无法加载。但是,用户肯定希望快速上手,未必愿意阅读文档,去了解模块有哪些属性和方法
为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出
其他模块加载该模块时,import命令可以为该匿名函数指定任意名字
上面代码的import命令,可以用任意名称指向export-default.js输出的方法,这时就不需要知道原模块输出的函数名。需要注意的是,这时import命令后面,不使用大括号
export default命令用在非匿名函数前,也是可以的
注意:上面代码的两组写法,第一组是使用export default时,对应的import语句不需要使用大括号;第二组是不使用export default时,对应的import语句需要使用大括号
export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此export default命令只能使用一次。所以,import命令后面才不用加大括号,因为只可能对应一个方法
本质上,export default就是输出一个叫做default的变量或方法,系统允许你为它取任意名字或者给他赋予任意的值
这里实际的意思就将add变量赋值给了default变量作为输出
正是因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句
上面代码中,export default a的含义是将变量a的值赋给变量default。所以,最后一种写法会报错
因为export default本质是将该命令后面的值,赋给default变量以后再输出,所以直接将一个值写在export default之后也是可以的