说到模块的加载,可能大家用过RequireJS或SeaJS。而在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’;