es6 模块化
什么是模块化
模块化就是把代码进行拆分,方便重复利用。类似java中的导包:要使用一个包,必须先导包。
而JS中没有包的概念,换来的是 模块。
模块功能主要由两个命令构成:export
和import
。
export
命令用于规定模块的对外接口。import
命令用于导入其他模块提供的功能。
export
比如我定义一个js文件:hello.js,里面有一个对象:
const util = { sum(a,b){ return a + b; } }
我可以使用export将这个对象导出:
const util = { sum(a,b){ return a + b; } } export util;
当然,也可以简写为:
export const util = { sum(a,b){ return a + b; } }
export
不仅可以导出对象,一切JS变量都可以导出。比如:基本类型变量、函数、数组、对象。
当要导出多个值时,还可以简写。比如我有一个文件:user.js:
var name = "jack" var age = 21 export {name,age}
省略名称
上面的导出代码中,都明确指定了导出的变量名,这样其它人在导入使用时就必须准确写出变量名,否则就会出错。
因此js提供了default
关键字,可以对导出的变量名进行省略
例如:
// 无需声明对象的名字 export default { sum(a,b){ return a + b; } }
这样,当使用者导入时,可以任意起名字
import
使用export
命令定义了模块的对外接口以后,其他 JS 文件就可以通过import
命令加载这个模块。
例如我要使用上面导出的util:
// 导入util import util from 'hello.js' // 调用util中的属性 util.sum(1,2)
要批量导入前面导出的name和age:
import {name, age} from 'user.js' console.log(name + " , 今年"+ age +"岁了")
但是上面的代码暂时无法测试,因为浏览器目前还不支持ES6 的导入和导出功能。除非借助于工具,把ES6 的语法进行编译降级到ES5,比如Babel-cli
工具
我们暂时不做测试,大家了解即可。