ES6模块

模块的优点

在模块顶部创建的变量不会自动被添加到全局共享作用域。

导出

导出方式一

export const PI = 3.14;

export const obj = {
    name: 'lee',
    age: 18
}

export function sum (a, b) {
    return a+b;
}

导出方式二

const obj = {
    name: 'lee',
    age: 18
}

const PI = 3.14;

function sum (a, b) {
    return a+b;
}

export {obj, PI, sum}

导入

分别导入

import {obj, PI, sum} from './file.js'
console.log(sum(1, 2)); // 3

导入整个模块

import * as file from './file.js'
console.log(file.sum(1, 2)); // 3

重命名

导出重命名

function sum (a, b) {
    return a+b;
}

export {sum as add}

import {add} from './file.js'

导入重命名

function sum (a, b) {
    return a+b;
}

export {sum}

import {sum as add} from './file.js'

默认值

导出默认值

导出默认值方式一

function sum (a, b) {
    return a+b;
}

export default sum;

导出默认值方式二

function sum (a, b) {
    return a+b;
}

export {sum as default}

导入默认值

import sum from './file.js'

导出默认和非默认

export const PI = 3.14;
export default function sum (a, b) {
    return a+b;
}

默认必须排在非默认之前

import sum, {PI} from './file.js'

与require的区别

require

Require是CommonJS的语法，CommonJS的模块是对象，输入时必须查找对象属性。

// CommonJS模块
let { stat, exists, readFile } = require('fs');

// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

1、整体加载fs模块（即加载fs所有方法），生成一个对象"_fs"，然后再从这个对象上读取三个方法，是赋值过程并且是运行时才执行，也就是异步加载。只有运行时才能得到这个对象，不能在编译时做到静态化。
2、可以理解为一个全局方法，因为它是一个方法所以意味着可以在任何地方执行。

import

ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。相较而言，性能更优。

import { stat, exists, readFile } from 'fs';

1、从fs加载“stat, exists, readFile” 三个方法，其他方法不加载。是解构过程并且是编译时执行。
2、必须写在文件的顶部。

网站导航

网站导航