文章目录
一. export命令
1. 如何定义模块
一个模块就是一个独立的js文件
导出模块
export 东西
1.1 export输出变量的写法:
// wu.js
export let firstName = 'wuwei';
export let lastName = 'haha';
export let year = 2019;
还可以
let firstName = 'wuwei';
let lastName = 'haha';
let year = 2019;
export {firstName, lastName, year};
//跟上面写法等价,推荐这种写法。
1.2 export`命令输出函数或类(class)。
export function multiply(x, y) {
return x * y;
};
1.3 as关键字重命名
通常情况下,export
输出的变量就是本来的名字,但是可以使用as
关键字重命名。
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
1.4 特别注意
需要特别注意的是,export
命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
// 报错
export 1;
// 报错
var m = 1;
export m;
//正确写法
// 写法一
export var m = 1;
// 写法二
var m = 1;
export {m};
// 写法三
var n = 1;
export {n as m};
同样的,function
的输出,也必须遵守这样的写法。
// 报错
function f() {}
export f;
// 正确
export function f() {};
// 正确
function f() {}
export {f};
2. 如何使用模块
使用export
命令定义了模块的对外接口以后,其他 JS 文件就可以通过import
命令加载这个模块。
引入模块
import 模块路径
<script type="module">
import "./modules/1.js"; // 这种写法只是相当于引入一个文件
import {a} from "./modules/1.js" // 导入模块中导出的a
</script>
import {firstName, lastName, year} from './profile.js';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
上面代码的import
命令,用于加载profile.js
文件,并从中输入变量。import
命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js
)对外接口的名称相同。
2.1 as关键字改变量名
import { lastName as surname } from './profile';
import
后面的from
指定模块文件的位置,可以是相对路径,也可以是绝对路径,.js
后缀可以省略。
2.2 import 提升
注意,import
命令具有提升效果,会提升到整个模块的头部,首先执行。
foo();
import { foo } from 'my_module';
//import的执行早于foo的调用。这种行为的本质是,import命令是编译阶段执行的,在代码运行之前。
2.3 import不能使用表达式
由于import
是静态执行,所以不能使用表达式和变量,这些只有在运行时才能得到结果的语法结构。
// 报错
import { 'f' + 'oo' } from 'my_module';
// 报错
let module = 'my_module';
import { foo } from module;
// 报错
if (x === 1) {
import { foo } from 'module1';
} else {
import { foo } from 'module2';
}
import { foo } from 'my_module';
import { bar } from 'my_module';
// 等同于
import { foo, bar } from 'my_module';
2.4 模块化整体加载
除了指定加载某个输出值,还可以使用整体加载,即用星号(*
)指定一个对象,所有输出值都加载在这个对象上面。
注意,模块整体加载所在的那个对象,不允许运行时改变。下面的写法都是不允许的。
import 特点
-
可以是相对路径也可以是绝对路径
import “./modules/1.js”;
-
import模块只会导入一次,无论你引入多少次
-
import “./modules/1.js”; 如果这么用,就相当于引入了一个js文件
-
导入模块中的一个变量或常量
import {a,b,c} from "./modules/1.js"
-
导入时可以取别名使用
import {a as aa,b as bb,c as cc} from "./modules/1.js"
-
导入这个模块导出的对象
import * as obj from './modules/1.js'; // 这个时候你就以使用obj这个Module对象了 console.log(obj.a);
-
import 的导入语句会进行提升,提升到最顶部,首先执行
console.log(a + b); // 能正常获取到a,b的值 import {a,b} from './1.js'
-
导出去的模块内容,如果里面发生有定时器发生导出内容的改变,外边导入的也会发生改变,不像Comment会缓存
import() 动态引入
默认的import语法不能写在if之类的判断里的,因为是静态引入,先引入在使用
// 这种写法是错的
let a = 12;
if(a == 12){
import {a} from './1.js'
}else{
import {a} from './2.js'
}
import()是动态引入 类似于node里面的require
// import() 引入返回一个promise对象
import('./1.js').then(res => {
console.log(res);
})
优点:
- 按需加载
- 可以写在if里面,判断加载
- 路径都可以是动态的
导出 export
-
可以单独导出变量或常量
export let a = 15;
-
可以导出一个对象
export { a, b, c } // 但是不能这么写 这么写会报错 export { a:a, b:b, c:c }
-
可以给导出的变量或常量取别名,一旦取了别名,导出这个模块要用别名导入
export { a as aa, b as bb, c as cc } // 导入模块 import {aa,bb,cc} from "./modules/1.js" // 导入时去别名 import {aa as a,bb as b,cc as c} from "./modules/1.js"
特殊形式
发现导入都是需要花括号的,如果希望导入不用花括号,那就需要改变导出方式
// 导出时使用export default
let a;
export default a = 10;
// 导入时可以不用花括号
import a from './modules/1.js'
export 导出的内容,导入时都需要花括号,
export default 导出的 内容,导入时不需要花括号
例子:
// 这里是1.js
let a = 20;
let b = 30;
export {
a, b
}
// 这里是2.js
import { a, b } from './1.js';
console.log(`a的值是:${a}, b的值是:${b}`);
const sum = () => {
console.log(`我是a,b的和:${a + b}`);
return a + b;
}
const show = () => {
console.log('show 执行了')
return 1;
}
function Person(name, age) {
this.name = name;
this.age = age;
this.showName = function () {
return `我的名字是${this.name}`;
}
}
export {
sum,
show,
a,
b
}
export default { Person }
// 这里是HTML导入
import mod, { sum, show, a, b } from "./2.js"
console.log(mod);
let p = new mod.Person("wuwei", 18);
console.log(p);
console.log(p.showName());
show();
sum();
console.log(a, b);