欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6中export和import详解(export定义了模块的对外接口后,其他JS文件就可以通过import来加载这个模块)

程序员文章站 2022-03-29 20:19:04
1.Export模块是独立的文件,该文件内部的所有的变量外部都无法获取。如果希望获取某个变量,必须通过export输出如:// profile.jsexport var firstName = "Michael";export var lastName = "Jackson";export var year = 1958;或者用更好的方式:用大括号指定要输出的一组变量如:// profile.jsvar firstName = "Michael";var lastName...

1.Export

模块是独立的文件,该文件内部的所有的变量外部都无法获取。如果希望获取某个变量,必须通过export输出

如:// profile.js

export var firstName = "Michael";
export var lastName = "Jackson";
export var year = 1958;

或者用更好的方式:用大括号指定要输出的一组变量

如:// profile.js

var firstName = "Michael";
var lastName = "Jackson";
var year = 1958;

export {firstName,lastName,year};

除了输出变量,还可以输出函数或者类(class)

export function multiply(x,y) {
    return x * y;
}

同样的道理,可以批量输出,也可以用as重命名

function v1(){......}

function v2(){......}

export {
   v1 as fn1,
   v2 as fn2
}

export命令规定的是对外接口,必须与模块内部变量建立一一对应的关系

// 写法一
export var m =1;

//写法二
var m = 1;
export {m};

//写法三
var n = 1;
export {n as m};

 Import命令

export定义了模块的对外接口后,其他JS文件就可以通过import来加载这个模块

// circle.js 输出两个函数

export function area(radius) {
    return Math.PI * radius * radius
}


export function circumference(radius) {
  return 2*Math.PI * radius;
}



// main.js加载模块   逐一加载的写法

import { area, circumference} from './circle';

console.log('圆面积:'+area(4));
console.log('圆周长:'+circumference(14));


//整体加载的写法如下:
import * as circle from './circle';

console.log('圆面积:'+circle.area(4));
console.log('圆周长:'+circle.circumference(14));

注意:不允许运行时改变!!!!!

4.export default

在上面的例子中,使用import导入时,都需要知道模块中所要加载的变量名或函数名,用户可能不想阅读源码,只想直接调用接口,就可以用export default命令,为模块指定输出

//  命名为export-default.js

export default function () {
  console.log('foo');
}

其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。

// 命名为 import-default.js

import customName from './export-default';

customName();

对了,如果是默认输出的,default,然后import的时候就不需要{}花括号

如果是按需引入,就需要花括号哦{}

也可以按条件加载呢:

import()可以放在if......else语句中,实现条件加载。

if (condition) {
  import('moduleA').then(......);
} else {
   import('moduleB').then(......);
}


 

本文地址:https://blog.csdn.net/qq_32963841/article/details/107354595

相关标签: ES6