模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。
#### export
- 输出的一组变量优先选用: `export { firstName, lastName, year };`,因为这样就可以在脚本尾部,一眼看清楚输出了哪些变量。
- 通常情况下,export输出的变量就是本来的名字,但是可以使用as关键字重命名:`export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};`
- export命令可以出现在模块的任何位置,只要处于模块顶层就可以;如果处于块级作用域内,就会报错,import命令也是如此;这是因为处于条件代码块之中,就没法做静态优化了,违背了ES6模块的设计初衷。
#### import
- import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。
- 如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名:`import { lastName as surname } from './test';`
- import命令具有提升效果,会提升到整个模块的头部,首先执行,和变量提升类似
- 除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面;但是模块整体加载所在的那个对象不允许运行时改变
~~~
import * as circle from './circle';
console.log('圆面积:' + circle.area(4));
console.log('圆周长:' + circle.circumference(14));
~~~
#### export default
- 利用`export default` 为模块指定默认输出,其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。
- 注意花括号的使用:使用export default时,对应的import语句**不需要使用大括号**;不使用export default时,对应的import语句需要**使用大括号**。
- export default命令用于指定模块的默认输出,显然,一个模块只能有一个默认输出,因此export default命令只能使用一次,所以,import命令后面才不用加大括号,因为只可能对应一个方法。
- 正是因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句。
~~~
// 正确
export var a = 1;
// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;
~~~
#### 最后
有一个提案,建议引入import()函数,完成动态加载。
- 1.Mock.js
- 2.conic-gradient 圆锥渐变
- 3.ES6 Module学习笔记
- 4.ES6函数扩展学习笔记
- 5.导入topojson模块的坑
- 6.git 内部分享
- 7.npm install --save
- 8.nvm和nrm
- 9.删除node_modules文件夹
- 10.es6 symbol
- 11.Set和Map数据结构
- 12.chrome控制台的$0
- 13.d3-ordinal
- 14.Object.assign() 和lodash的merge()
- 15.echarts x轴坐标文字显示不全
- 16.echarts地图配置项--中文
- 17.webpack自动浏览器打开插件
- 18.D3线条和面积动画--未采用
- 19.投影滤镜
- 20.文本挡住触发事件
- 21图表用法
- 22.大胆的表现自己把
- 23.裁剪clip-path
- 24svg线条动画的反向和时间误差
- 25.visibility和display的区别
- 26.SVG滤镜
- 27windo命令行的坑
- 28.textContent与innerText的不同
- 29.CSS3炫酷文本
- 30.更改webpack配置文件路径
- 31.大胖给我做的css codereivew
- 32.定义接口不要限定死
- 33.不使用浮动,用inline-block平分出现换行问题
- 34.输入框的校验
- 35.handlbars的registerHelper
- 36.animation-fill-mode
- 37.svg嵌套HTML,实现文本换行
- 38.SVN出现黄色感叹号
- 39.typeof与instanceof
- 40.SVG里面谨慎设置font-family
- 41.新脚手架里的相对路径问题