目前,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'
苟有恒 , 何必三更眠五更起