526互联

import, export，export default，exports - 导入导出方法总结

发布时间 2023-10-12 15:47:19作者: 浅巷深念

1.Export

  1. 注意：在一个模块中，export 可以向外暴露多个
  2. 注意；使用export导出的成员，必须严格按照导出时候的名称，不能自定义，来使用 {} 按需接收
  3. 注意；使用export导出的成员，如果要换个名称，可以使用 as 起别名

模块是独立的文件，该文件内部的所有的变量外部都无法获取。如果希望获取某个变量，必须通过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 streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

Attention:

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

// 写法一
export var m = 1;

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

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


// 报错
export 1;

// 报错
var m = 1;
export m;

报错的写法原因是：没有提供对外的接口，第一种直接输出1，第二种虽然有变量m，但还是直接输出1，导致无法解构。

同样的，function和class的输出，也必须遵守这样的写法。

// 报错
function f() {}
export f;

// 正确
export function f() {};

// 正确
function f() {}
export {f};

And：export语句输出的接口，都是和其对应的值是动态绑定的关系，即通过该接口取到的都是模块内部实时的值。

位置：export模块可以位于模块中的任何位置，但是必须是在模块顶层，如果在其他作用域内，会报错。

function foo() {
  export default 'bar' // SyntaxError
}
foo()

2.Import命令

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

// main.js
import {firstName, lastName, year} from './profile';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

import命令接受一对大括号，里面指定要从其他模块导入的变量名，必须与被导入模块（profile.js）对外接口的名称相同。

如果想重新给导入的变量一个名字，可以用as关键字，

import { lastName as surname } from './profile';

import后的from 可以指定需要导入模块的路径名，可以是绝对路径，也可以是相对路径， .js路径可以省略，如果只有模块名，不带有路径，需要有配置文件指定。

注意，import命令具有提升效果，会提升到整个模块的头部，首先执行。（是在编译阶段执行的）

因为import是静态执行的，不能使用表达式和变量，即在运行时才能拿到结果的语法结构（e.g. if...else...）

3.module的整体加载

除了指定加载某个输出值，还可以用（*）指定一个对象，所有的变量都会加载在这个对象上。

// 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));

注意，模块整体加载所在的那个对象（上例是circle），应该是可以静态分析的，所以不允许运行时改变。

import * as circle from './circle';

// 下面两行都是不允许的
circle.foo = 'hello';
circle.area = function () {};

4.export default

特点：

  1. export.default向外暴露的成员，可以使用任意变量来接收
  2. 在一个模块中，export default只允许向外暴露一次
  3. 在一个模块中，可以同时使用export default 和export 向外暴露成员

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

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

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

// import-default.js
import customName from './export-default';
customName(); // 'foo'

导出多个

//导出
let a = 100;
let b = {};
let c = ()=>{}

export default {
  a,b,c
}

//导入
import module from './file';
console.log( module.a, module.b, module.c );

export和export.default混合导出

//导出
const author = "不要秃头啊";

export const age = "18";
export default author;

//导入 default参数名要一致 并且要在大扣号前面
import author, { age } from "./name";
//或者 可以对默认参数重命名
//import { default as author, age} from "./name";
console.log(author, "author");
console.log(age, "age");

 

export default也可以用于非匿名函数前。

下面比较一下默认输出和正常输出。

// 第一组
export default function crc32() { // 输出
  // ...
}

import crc32 from 'crc32'; // 输入

// 第二组
export function crc32() { // 输出
  // ...
};

import {crc32} from 'crc32'; // 输入

可以看出，使用export default时，import语句不用使用大括号。

 

 

 

*******import和export命令只能在模块的顶层，不能在代码块之中。否则会语法报错。

这样的设计，可以提高编译器效率，但是没有办法实现运行时加载。

因为require是运行时加载，所以import命令没有办法代替require的动态加载功能。

所以引入了import()函数。完成动态加载。

import(specifier)

specifier用来指定所要加载的模块的位置。import能接受什么参数，import()可以接受同样的参数。

import()返回一个Promise对象。

const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

5.import()函数适用场合

 1）按需加载：

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

above： import模块在事件监听函数中，只有用户点击了按钮，才会加载这个模块。

 2）条件加载：

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

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

6.module.exports的使用

  1. exports 是 module.exports 的一个引用，即 exports = module.exports
  2. module.exports 和 exports 不要同时使用，指向会有问题
//导出
module.exports = { checkIDCIP };

//导入
const { checkIDCIP } = require('./utils'); //或者 import { checkIDCIP } from './utils';

exports的使用

// person.js --- 导出
var name = 'Tom';
var age = 18;

exports.getName = function() {
    return name;
}

exports.getAge = function() {
    return age;
}

// main.js --- 导入
var person = require('./person'); //或 import person from './person'

console.log(person.getName()); // 'Tom'
console.log(person.getAge());  // 18

CommonJS和ES6 Module的区别总结

一、区别：

  1. CommonJS 模块是运行时加载，ES6 模块是在静态编译期间就确定模块的依赖。

  2. 两者的模块导入导出语法不同，CommonJS是module.exports，exports导出，require导入；ES6则是export导出，import导入。

  3. ES6在编译期间会将所有import提升到顶部，CommonJS不会提升require。

  4. CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段。

  5. CommonJS导出的是一个值拷贝，会对加载结果进行缓存，一旦内部再修改这个值，则不会同步到外部。ES6 Module是对模块的引⽤,即ES6 Module只存只读，不能改变其值，具体点就是指针指向不能变，类似const 。

  6. import的接⼝是read-only（只读状态），不能修改其变量值。 即不能修改其变量的指针指向，但可以改变变量内部指针指向。可以对commonJS对重新赋值（改变指针指向），但是对ES6 Module赋值会编译报错。

  7. 两者的循环导入的实现原理不同，CommonJS是当模块遇到循环加载时，返回的是当前已经执行的部分的值，而不是代码全部执行后的值，两者可能会有差异。所以，输入变量的时候，必须非常小心。ES6 模块是动态引用，如果使用import从一个模块加载变量（即import foo from 'foo'），那些变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。

  8. CommonJS中顶层的this指向这个模块本身，而ES6中顶层this指向undefined。

二、共同点：

1.CommonJS和ES6 Module都可以对引⼊的对象进⾏赋值，即对对象内部属性的值进⾏改变

文章内容转载，参考链接：

export，export default，exports - 导入导出方法总结

JS ES6中export和import详解