这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战

模块

ES2015的标准增加了：Modules即模块，这篇文章我们就来了解一下什么是模块。

由于有时需要运行大量 Javascript 脚本的复杂程序，而且里面的部分程序还有可能用在其他地方，我们就可以将 JavaScript 程序拆分为可按需导入的单独模块。一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取。

如何使用

ES6以前使用JavaScript 模块我们会依赖require方法，但现在我们可以依赖于import和 export。比如我们有个slifree.js模块，那么我们就看看它是怎么被使用的。

export用来导出模块文件变量，export可以输出变量或者函数，slifree.js里面我们可以这样写：

第一种方式

export const name = '也笑'

export function total(x,y){
    return x+y
}

第二种方式

const name = '也笑'
function total(x,y){
    return x+y
}
export {name,total}

第三种方式

const name = '也笑'
function total(x,y){
    return x+y
}
export {
    name as zhName,
    total as sum
}

我们可以使用as关键字，给变量或者函数重命名。我们需要注意的是：如果我们用第一种方式要加上变量或者函数的声明，如果用第二种方式我们一定要用{}包裹。

export default也是用来导出模块文件变量，但是它与export不同的地方是：每个模块只允许有一个默认导出，也就是说一个文件只能允许出现一次export default，使用方式与export类似，比如：

export default function total(x,y){
    return x+y
}

或

export default '也笑'

import用来导入模块文件变量，它需要根据模块导出文件的方式而使用。

export

需使用{}，来导入需要的变量或函数，如下：

import { name, total } from 'slifree.js'

此时我们也可以给引入的变量重命名，也是使用as关键字，如下：

import { name as zhName, total as sum } from 'slifree.js'

我们也可以整体导入，如下：

import * as slifree from 'slifree.js'

export default

不要使用{}，如下：

import total from 'slifree.js'

export 和 export default

slifree.js如果是混合写法，如下：

export const name = '也笑'
export const name1 = '也笑1'

export default function sum(x,y){
    return x+y
}

那么我们就可以这样导入。

import sum,{name} from 'slifree.js'

在项目中，我们会根据需要来使用export 和 export default，这种情况我们要注意对应import的使用方式。

利于as关键字可以防止项目中变量冲突。

如果你想了解ES的其他特性，请移步到 ES2015+碎片化学习，每天都在向前走一步，这是所有文章的目录入口。