ES6知识点整理之模块化的应用详解
本文实例讲述了ES6知识点整理之模块化的应用。分享给大家供大家参考，具体如下：
目前浏览器还不能完全支持模块化，需要引入很多编译环境，下面在nodejs中来模拟ES6中的模块化
nodejs中针对模块化演示的配置
- 环境的安装：$npminstall--savebabel-clibabel-preset-node6
- 运行：$./node_modules/.bin/babel-node.js--presetsnode6./your_script.js
- 添加.babelrc文件,编辑如下
{
"presets":[
"node6"
]
}
添加了这个文件，无需在运行时添加–presets参数
- 参考链接：https://stackoverflow.com/questions/33604470/unexpected-token-import-in-nodejs5-and-babel
导出变量的三种模式
test1模块：
//写法1
exportvara="Iama";
//写法2
varb="Iamb";
export{b};
//写法3
varc="Iamc";
export{casd}//将c重名为d,外部也同样需要importd
index模块：
import{a,b,d}from'./test1';
console.log(a);//Iama
console.log(b);//Iamb
console.log(d);//Iamc
异步导出模块的测试
test2模块：
//异步写法
varm="Iamm";
export{m};
setTimeout(()=>{
m="Iammm";
},1000);
index模块
import{m}from'./test2';
console.log(m);//Iamm
setTimeout(()=>{
console.log(m);//Iammm
},1500);
多模块分别导出
test3模块
varA=1111,
B=2222,
C=3333;
varM='M';
exportdefaultM;
export{AasA1,BasB1,CasC1};
index模块：
importM,{A1,B1,C1}from'./multi';
console.log(A1);//1111
console.log(B1);//2222
console.log(C1);//3333
console.log(M);//M
对象的导出
User模块：
exportclassUser{
constructor(name){
this.name=name;
}
getuname(){
returnthis.name;
}
setuname(name){
this.name=name;
}
}
index模块：
import{User}from'./User';
varuser=newUser('Joh');
console.log(user.uname);//Joh
user.uname='Lily';
console.log(user.uname);//Lily
导出函数模块
func模块
exportfunctionLog(str){
console.log(str);
}
index模块
Log("Iamlog");//Iamlog
重命名默认模块
rename模块：
exportdefault"rename";
index模块：
import{defaultasnr}from'./rename';
console.log(nr);//rename
默认模块和其他模块一起导出的方式
combine模块：
exportvara=1; exportdefault111;
方式1：
index模块：
import{defaultascom,aascomA}from'./com';
console.log(com);//111
console.log(comA);//1
方式2：
index模块：
importt,{aascomA}from'./com';
console.log(t);//111备注这里t可以以任何名称命名
console.log(comA);//1
其他注意事项
- 定义export时必须在顶层定义，其他地方是不能定义的，如函数内部
- default后面不能带var导出，如：exportdefaultvarname=‘Joh';这样是不对的
- 不要import*导出全部模块，这样非常不好，不利于优化
- {}导入的不是默认模块，默认模块不需要带{}
- 通过default导出的不会再次被修改，如果default导出的是一个数字变量，即使在其他地方修改了，它也不会被修改，保持原值不变
- http://es6.ruanyifeng.com/#docs/module这里有其他一些注意事项的总结
更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。