说到模块的加载,可能大家用过RequireJSSeaJS。而在ES6当中也为我们提供了相应的解决方案。

定义并导出一个模块

首先,我们新建一个 myModule.js 文件:

export default function(text){
     console.log(`this is a module and Welcome to ${text}`);
}

可以看到,在这个文件当中,我们使用了关键字 export,并且还有一个 default,default的意思就是说,在这个文件当中,我们默认导出这个函数模块。

引入模块

然后,我们在 app.js 当中引入该模块:

import testModule from “./myModule”

testModule(“DigCSS.com”);

定义并导出多个模块

我们再新建一个文件 calc.js

export function add(a,b){
     return a + b;
}
export function subtract(a,b){
     return a - b;
}

导入多个模块

现在,在 app.js 当中,我们可以这样导入多个模块:

import { add ,subtract } from ‘./calc’;

const sum = add(2,4);
const sub = subtract(6,3);
console.log(sum);
console.log(sub);

注意,上面的 import 用到了ES6当中的解构赋值,不清楚解构赋值的请看《ES6当中的解构赋值》

使用 * 导入全部模块

import * as calcFn from ‘./calc’;
const sum = calcFn.add(2,4);
const sub = calcFn.subtract(6,3);

如果这个时候 calc.js 文件当中有一个 default

export function add(a,b){
     return a + b;
}
export function subtract(a,b){
     return a - b;
}
//default module
export default function (a,b){
     return a / b;
}

那么,在导入的时候可以这样:

import divide,{ add ,subtract } from ‘./calc’;