小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
export与import是ES6实现的模块解决方案。
一个模块就是一个独立的文件。当我们想读取模块内部的内容时,就可以使用export命令将其输出。对应的,使用export输出后,我们得通过import去读取输出的内容
export命令
export可以输出变量、函数或类(class)
写法一:(单个输出)
export var name = "最爱撸猫猫虫";
export function getAge(x) {
var nowYear = new Date();
return nowYear.getFullYear() - x;
}
写法二:(合并输出,优先考虑)
var name = "最爱撸猫猫虫";
function getAge(x) {
var nowYear = new Date();
return nowYear.getFullYear() - x;
}
//export {name, getAge};
//对函数重命名
export {name, getAge as age};
注意点:
1)export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系
//错误写法之变量:
export 1;
//错误写法之变量:
var a = 1;
export a;
//----分割线--------
//正确写法之变量:
export var a = 1;
//正确写法之变量:
var a = 1;
export {a};
//----分割线--------
//错误写法之函数:
function f() {}
export f;
//----分割线--------
//正确写法之函数:
export function f(){};
//正确写法之函数:
function f(){}
export {f}
2)export可以出现在模块的全局作用域内,不能处于块级作用域中,会报错的。
import命令
使用export命令输出内容后,其他 JS 文件就可以通过import命令读取这些内容了。
import {name, age} from "./index.js"
console.log(name) //最爱撸猫猫虫
console.log(age(2003)) //18
//----分割线-------------
//重命名
import {name as n, age} from "./index.js"
console.log(n) //最爱撸猫猫虫
console.log(age(2003)) //18
注意点:
1)如果对读取的变量作修改操作,会报错,因为这个变量是一个只读的接口;但是如果a是一个对象,改写a的属性是允许的。
2)import后面的from指定模块文件的位置,可以是相对路径,也可以是绝对路径。如果不带路径,只是一个模块名,那么必须有配置文件,告诉js引擎该模块的位置。
3)如果多次重复执行一句import语句,那么只会执行一次,而不会执行多次。