模块:一个js文件就是一个模块,模块内部的成员都是相互独立,该文件内部的所有变量,外部无法获取。
模块化有两个核心:导出和导入
ES6 模块是编译时加载(静态加载),在编译时就能确定模块的依赖关系,以及输入和输出的变量。
export
export
用于导出,可以输出变量、函数或类(class)
// 输出单个变量
export const title = '大数据可视化平台';
// 输出一组变量(推荐用法)
const author = 'Jack';
const year = 1958;
export {author,year}
//输出函数或类
function foo(content){
...
}
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
}
export{Person}
//输出函数重命名
export { foo as newFoo }
import
import
用于导入模块,是编译阶段执行的(代码运行之前)
import
命令具有提升效果,会提升到整个模块的头部,首先执行。
foo(); //不报错
import { title, author,year,foo } from '@/utils/index'
import可以使用as
关键字重命名。
import { v1 as v2 } from '@/utils/index'
模块的整体导入:用星号(*)指定一个对象,所有输出值都加载在这个对象上面。
import * as moduleObject from '@/utils/index'
export default(默认导出)
一个模块只能有一个默认输出,因此export default
命令只能使用一次。
export default function foo() {
console.log('foo');
}
export default可以和多个export共同使用(不推荐)
const author = 'Jack';
const year = 1958;
export default {author,year}
默认导入
import
语句不需要使用大括号,接收名称可以是任意名称
import 接收名称 from '模块路径'
import foo from '@/utils/index'
引申:CommonJS
CommonJS 模块是运行时加载,规定每个模块内部,module变量(对象)代表当前模块。module变量的exports属性(即module.exports)是对外的接口。
Node 采用 CommonJS 模块规范,是服务器端一个具有代表性的实现
export或者module.exports导出
module.exports = {
test(a, b){
return a + b
},
test1(c, d){
return c * d
}
}
//不推荐使用
exports = function(x) {console.log(x)};
require 导入模块
require命令用于加载文件,后缀名默认为.js
let { test, test1 } require('module')
let example = require('./example.js');
注:如果是可以使用ES6的语法环境下,也可以使用import导入