Javascript在使用import 与export 区别及使用

一、import与export的用法

1、import的几种用法

import defautName from 'modules.js';
import { export } from 'modules.js';
import { export as ex1 } from 'modules.js';
import { export1, export2 } from 'modules.js';
import { export1 as ex1, export2 as ex2 } from 'modules.js';
import defautName,{export} from 'modules.js';
import * as moduleName from 'modules.js';
import defautName, * as moduleName from 'modules.js';
import 'modules';

　解释说明：

import 后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。

如果只是模块名，不带有路径，那么必须有配置文件，告诉Javascript引擎模块的位置。

上面的as关键字，相当于import进来的值的别名。

import * from 'xx' 将导入整个模块的内容，而import defaultName 和 import { export1,export2 } 将导入export的某个值或对象。

最后一张方式import ‘module’ 将运行模块中的全局代码，而不导入任何值。

2、export的几种用法

export { name1, name2,..., nameN };
export { variable1 as name1, variable2 as name2,..., nameN };
export let name1, name2,..., nameN;
export let let name1 =..., name2 =...,..., nameN;
export function FunctionName() { };
export class ClassName { }
export default expression;
export default function () { };
export default function name() { };
export { name1 as default };
export * from ...;
export { name1, name2 } from ...;

　　解释说明

module.js

const ex1 = 'xxx';
const fun = function () { };
export { ex1, fun as demofun };
export let ex2 = 'demo';
export function multi(x, y) {
    return x * y;
}

对应的import 写法：import { ex1, demoFun, ex2, multiply } from 'module.js';

默认导出，export 命名导出需要export 名字和import名字严格一致。而export default命令，为模块指定默认输出，在import 的时候可以随意命名名字。一个模块只能有一个默认输出，也就是说 export default 一个模块只能用一次。用法:

export default function add(x, y) { return x + y };
import anyName from 'a.js';
let name = 'b.js';
export default name;
import anyName from 'b.js';
export default class { }
import anyClass from 'c.js';
export default 1;
import value from 'd.js';

二、区别：

import 和js的发展历史息息相关，历史上 js没有模块(module)体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。也就是我们常见的 require 方法。比如 `let { stat, exists, readFile } = require('fs');ES6 在语言标准的层面上，实现了模块功能。ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

转发链接

Javascript在使用import 与export 区别及使用

猜你喜欢