ES6 import和export的基本语法

小明爱学习

发布于 2020-12-15 11:50:01

6760

发布于 2020-12-15 11:50:01

文章被收录于专栏：smh的技术文章

在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 删除

ecmascript