05 ES6模块化规范基础详解

ES6模块规范

1.1 ES6规范说明

历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require、Python 的import,甚至就连 CSS 都有@import,但是 JavaScript 任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。

自从ES6的推出,ES6定义了自己的模块化规范,使用exportimport导出导入实现模块化管理

1.2 基本语法

模块功能主要由两个命令构成:exportimportexport命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能

1.21暴露模块

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。下面是一个 JS 文件,里面使用export命令输出变量

export:它是用来定义模块的,可以导出对象、函数、类、字符串等等

(1)单独导出数据

export var name = 'guo';
export function foo(x, y){}

(2)或者直接导出一个对象(推荐使用)

// person.js 
const name = 'guo';
const age = '18';
const addr = '过青年';

export { name, age, addr };

(3)使用as重命名,并且可以利用它将数据暴露多次

// person.js 
const name = 'guo';
const age = '18';
export {
	name as firstName,
	age as oneAge,
    age as twoAge
}

(4)使用export default导出数据;export default其实是导出一个叫做default的变量,所以其后面不能跟变量声明语句;

默认暴露只能暴露一次,暴露多次,后面的默认暴露覆盖前面的默认暴露

// guo.js
// export default var name = 'guo'   错误
export default name = 'guo';
1.22引入模块

1)一般用法

import { name, age } from './person.js';

(2)As用法

import { name as personName } from './person.js';

import命令具有提升效果,会提升到整个模块的头部,首先执行;如下也不会报错:

getName();

import { getName } from 'person_module';

(3)整体模块加载 *

//person.js
export name = 'xixi';
export age = 23;

//逐一加载
import { age, name } from './person.js';

//整体加载
import * as person from './person.js';
console.log(person.name);
console.log(person.age);

(4)加载export default 导出的数据,不需要加{}

import guo from './person.js';

总结

  • 使用exportexport default向外暴露数据,使用import获取数据
  • 使用as重命名,使用*符号整体加载
  • import命令具有提升效果,会提升到整个模块的头部
  • export default以最后一次暴露为准,且暴露的数据加载时,不需要加入{ }号
posted @ 2020-07-21 20:49  过青年  阅读(35)  评论(0编辑  收藏