ES6：模块化的基本语法

目前，vue和react 框架都是使用es 6 的模块化语法.

今天就来介绍下:

ES6：模块化的基本语法

0 1

默认导出 与 默认导入

1. 默认导出： export default { 默认导出的成员名称}

注意：每个模块只能使用一次export default，否则会报错。

示例：假设某文件中 data.js

let a = 2;

let b = 3;

function show() { }

默认导出a和b以及方法show：

export default {a,b,show}

2. 默认导入：

import 接收名称(自定义的名称) from '模块标识符(文件的路径)'

示例：import initData from '/common/data.js'

0 2

按需导出

1. 按需导出：export 需要导出的成员

注意：每个模块可以使用多次按需导出

示例：假设某文件中 data.js

export let a = 10

export let b = 'aaa'

export function say = function() { }

2. 按需导入

示例1：

import { a,b,say } from './common/data.js'

//{ }中的名称必须和按需导出的名称一样

示例2：

import * as initData from './common/data.js'

// * 表示所有，as 指取别名

0 3

直接导入并直接执行该模块的代码

有时候只是想执行某模块的代码，并不需要其中向外暴露的成员，此时可以直接导入并执行模块代码。

1. 不需要任何的导出

2. 直接导入文件(相当于执行模块代码)

import ' 模块标识符(模块的路径)'

示例：

import './index.js'

苟有恒 , 何必三更眠五更起