module
ES6之前javascript没有模块体系,无法将一个大型的项目拆分成互相依赖的小文件,再用简单的方式进行简单的拼接。
社区制定了模块化开发的规范,最主要的两种模块化解决的方案:Commonjs,AMD两种。
- commonjs用于服务器端
- AMD用于浏览器端\
ES6的模块完全可以取代commonjs和AMD两种规范。
模块功能主要有两个命令构成:export和import。
在user.js内:
export let firstName = 'san';
export let lastName = 'zhang';
export let year = 2000;
上述代码可以写成:
let firstName = 'san;
let lastName = 'zhang';
let year = 2000;
export {firstName,lastName,year} //这种写法可以一眼看出抛出的模块
//在index.js里引入模块 import {firstName,lastName,year}
//整体引用:import * as info from '文件路径'
//起别名
//在抛出模块起别名
export {firstName as f,lastName as l,year as y}
在index.js里引入模块 import {f,l,y}
//在引入模块内起别名
export {firstName,lastName,year}
import {firstName as f,lastName as l,year as y}
export default 默认抛出,一个模块只能有一个默认抛出,所以在引用时,可以不用写大括号
export default function(str){
return str.split('').reverse().join('')
}
import reverse from '文件路径'
页面即有默认抛出还有其它抛出,引用时,可以直接使用:
import reverse,* as info from '文件路径'
export 注:
export 1; //报错
let m = 1;
export m;//报错
报错的原因:没有提供对外的接口,都抛出的是1,没办法解构
export default注:
export default 1; //不会报错
let m = 1;
export default m; //不会报错
export default命令的本质是将后面的值,赋给default变量,所以可以直接将一个值写在export
default之后。在引用时,系统允许你为它取任意名字。
ES6是静态加载的,requirejs和commonjs是在运行时加载。
1)//报错:因为用到了表达式
import {'f' + 'oo'} from 'my_module'
2)报错:因为用到了变量
let module = 'my_module';
import {foo} from module;
3)报错:因为用到了条件语句
if(x===1){
import {foo} from 'module1'
}else{
import {foo} from 'module2'
}
注:1>import命令具有提升的效果,会提升到整个模块的头部,首先执行。