在ES6之前,我们浏览器端的模块化开发几乎都是基于require.js和sea.js,两者分别基于amd和cmd规范产生的库。现在ES6也有自己的模块化语法,分别是用export输出模块,import导入模块。
export输出
代码语言:javascript复制//a.js
//输出单个变量
export var a='A';
//输出多个变量
var b='b';
var c='c';
var d='d';
export{b,c,d};
//重命名输出
export{b as b1,c as c1,d as d1}
//输出单个函数
export function fn() {
this.name="jack ma";
console.log('fn');
}
function fn1(){
}
function fn2(){
}
function fn3(){
}
//输出多个函数
export {fn1,fn2,fn3}
//输出class
export class modules{
constructor(){
}
}
import导入
代码语言:javascript复制//导入全部变量
import * as alls from './a.js';
console.log(alls);
//导入指定的变量
import{a,b,c} from './a.js'
console.log(a,b,c)
//导入指定的变量并重命名
import{a as a1,b as b1,c as c1} from './a.js'
console.log(a1,b1,c1)
import导入的模块都是引用
我们知道js中,值类型都是复制原始值重新开辟一块内存空间,只有引用类型才是引用地址。
代码引用:https://exploringjs.com/es6/ch_modules.html#_imports-are-read-only-views-on-exports
代码语言:javascript复制export let counter = 3;
export function incCounter() {
counter ;
}
export function setCounter(value) {
counter = value;
}
//main.js
import { counter, incCounter ,setCounter} from './lib';
// The imported value `counter` is live
console.log(counter); // 3
incCounter();
console.log(counter); // 4
setCounter(0);
console.log(counter); // 0
可以看见,当变量counter改变时,导入的模块也会跟着改变,所以导入的值类型的模块肯定也是采用的引用模式。