ES6 import和export的基本语法

2020-12-15 11:50:01 浏览数 (1)

在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改变时,导入的模块也会跟着改变,所以导入的值类型的模块肯定也是采用的引用模式。

0 人点赞