ES6 import和export的基本语法
在ES6之前，我们浏览器端的模块化开发几乎都是基于require.js和sea.js，两者分别基于amd和cmd规范产生的库。现在ES6也有自己的模块化语法，分别是用export输出模块，import导入模块。
export输出
//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导入
//导入全部变量
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
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改变时，导入的模块也会跟着改变，所以导入的值类型的模块肯定也是采用的引用模式。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020年12月13日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录