ES6知识点整理之模块化的应用详解

本文实例讲述了ES6知识点整理之模块化的应用。分享给大家供大家参考,具体如下:

　　

目前浏览器还不能完全支持模块化,需要引入很多编译环境,下面在nodejs中来模拟ES6中的模块化

　　 　　

　　

　　<李>环境的安装:$ <代码> npm安装,节省babel-cli babel-preset-node6 　　<李>运行:$ <代码>。/node_modules。bin/babel-node。js -预设node6。/your_script.js 　　<李>添加。babelrc文件,编辑如下李 　　

　　 　　 　　｛ 　　“预设”:( 　　“node6” 　　] 　　} 　　 　　之前 　　 　　

添加了这个文件,无需在运行时添加预设参数

　　

　　<李>参考链接:https://stackoverflow.com/questions/33604470/unexpected-token-import-in-nodejs5-and-babel 　　

　　

　　

test1模块:

　　 　　//写法1 　　出口var="我";//写法2 　　var b=b“我”; 　　出口{b};//写法3 　　var c=c“我”; 　　出口{c, d}//将c重名为d,外部也同样需要进口d 　　 　　之前 　　 　　

指数模块:

　　 　　 　　进口{a, b, d}”。/test1 '; 　　console.log(一个);//我是一个 　　console.log (b);//我是b 　　console.log (d);//我是c 　　 　　之前 　　 　　

　　

test2模块:

　　 　　//异步写法 　　var m=拔襪”; 　　出口{m}; 　　setTimeout(()=祝辞{ 　　m=拔襪m”; 　　}，1000）; 　　 　　之前 　　 　　

指数模块 　　 　　 　　进口{m}”。/test2 '; 　　console.log (m);//我m 　　setTimeout(()=祝辞{ 　　console.log (m);//我是毫米 　　},1500); 　　 　　之前 　　 　　

　　

test3模块 　　 　　 　　var=1111, 　　B=2222, 　　C=3333; 　　var M=癕”; 　　出口默认M; 　　B出口{A1, B1, C C1}; 　　 　　之前 　　 　　

指数模块:

　　 　　 　　进口M, {A1, B1, C1}”。/多'; 　　console.log (A1);//1111 　　console.log (B1);//2222 　　console.log (C1);//3333 　　console.log (M);//米 　　 　　之前 　　 　　

　　

用户模块:

　　 　　 　　出口类用户{ 　　构造函数(名字){ 　　this.name=名称; 　　} 　　得到uname () { 　　返回this.name; 　　} 　　设置uname(名字){ 　　this.name=名称; 　　} 　　} 　　 　　之前 　　 　　

指数模块:

　　 　　 　　进口{User}”。/用户”; 　　var=新用户(“(”); 　　console.log (user.uname);//( 　　用户。uname=袄蚶颉? 　　console.log (user.uname);//莉莉 　　 　　之前 　　 　　

　　

func模块 　　 　　 　　导出函数日志(str) { 　　console.log (str); 　　} 　　 　　之前 　　 　　

指数模块 　　 　　 　　日志(“我日志”);//我的日志 　　 　　之前 　　 　　

　　

rename模块:

　　 　　 　　出口默认“重命名”; 　　 　　之前 　　 　　

指数模块:

　　 　　 　　进口{默认为nr}”。/重命名”; 　　console.log (nr);//重命名 　　 　　之前 　　 　　

　　

结合模块:

　　 　　 　　出口var=1; 　　出口默认111; 　　 　　之前 　　 　　

方式1:

　　

指数模块:

　　 　　 　　进口{违约作为com,昏迷}”。/com”; 　　console.log (com);//111 　　console.log(昏迷);//1 　　 　　之前 　　 　　

方式2:

　　

指数模块:

　　 　　 　　进口t,{因为昏迷}”。/com”; 　　console.log (t);//111备注这里t可以以任何名称命名 　　console.log(昏迷);//1 　　 　　之前 　　 　　

　　

　　<李>定义出口时必须在顶层定义,其他地方是不能定义的,如函数内部李 　　<李>违约后面不能带var导出,如:<代码>出口默认var=扒恰泵?这样是不对的李 　　<李>不要进口* <代码> 导出全部模块,这样非常不好,不利于优化李 　　<李> <代码>{}导入的不是默认模块,默认模块不需要带<代码>{} 　　<李>通过违约导出的不会再次被修改,如果默认导出的是一个数字变量,即使在其他地方修改了,它也不会被修改,保持原值不变李

ES6知识点整理之模块化的应用详解