ES6模块的导入、导出

sherlockkid7
305 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

模块：一个js文件就是一个模块，模块内部的成员都是相互独立，该文件内部的所有变量，外部无法获取。

模块化有两个核心：导出和导入

ES6 模块是编译时加载（静态加载），在编译时就能确定模块的依赖关系，以及输入和输出的变量。成为浏览器和服务器通用的模块解决方案。 模块功能主要由两个命令构成：export和import。

export

export用于导出，可以输出变量、函数或类（class）

// 输出单个变量
export const title = '大数据可视化平台';

// 输出一组变量（推荐用法）
const author = 'Jack';
const year = 1958;
export {author,year}

//输出函数或类
function foo(content){
    ...
}
class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
}
export{Person}
//输出函数重命名  
export { foo as newFoo }

import

import用于导入模块，是编译阶段执行的（代码运行之前）

import命令具有提升效果，会提升到整个模块的头部，首先执行。

foo(); //不报错
import { title, author，year，foo } from '@/utils/index'

import可以使用as关键字重命名。

import { v1 as v2 } from '@/utils/index'

模块的整体导入：用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

import * as moduleObject from '@/utils/index'

export default（默认导出）

一个模块只能有一个默认输出，因此export default命令只能使用一次。

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

export default可以和多个export共同使用（不推荐）

const author = 'Jack';
const year = 1958;
export author
export default year

默认导入

import语句不需要使用大括号，接收名称可以是任意名称。 [ import 接收名称 from '模块路径' ]

import foo from '@/utils/index'

简单小结：

1.export与export default均可用于导出常量、函数、文件、模块等

2.在一个文件或模块中，export、import可以有多个，export default仅有一个

3.通过export方式导出，在导入时要加{ }，export default则不需要，并可以起任意名称

引申：CommonJS

CommonJS 模块是运行时加载，规定每个模块内部，module变量（对象）代表当前模块。module变量的exports属性（即module.exports）是对外的接口。

Node 采用 CommonJS 模块规范，是服务器端一个具有代表性的实现

export或者module.exports导出

module.exports = {
	test(a, b){
		return a + b
	},
	test1(c, d){
		return c * d
	}
}
//不推荐使用  exports 只是 module.exports的引用
exports = function(x) {console.log(x)};

require 导入模块

require命令用于加载文件，后缀名默认为.js

let { test, test1 } require('module')

let example = require('./example.js');

注：如果是可以使用ES6的语法环境下，也可以使用import导入

avatar
文章
阅读
粉丝