![Vue.js 3.0从入门到精通(视频教学版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/154/44510154/b_44510154.jpg)
上QQ阅读APP看书,第一时间看更新
3.11 Modules(模块)
众所周知,在ES6版之前JavaScript并不支持本地的模块,于是人们想出了AMD、RequireJS、CommonJS及其他解决方法。如今ES6中可以用模块import和export操作了。在ES5中,可以在<script>中直接写可以运行的代码(简称IIFE)或一些库,如AMD。然而在ES6中,可以用export导入类。下面举个例子,在ES5中,module.js有port变量和getAccounts()方法:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P48_164892.jpg?sign=1739226160-pcAHQNli4JfvbYaErm6luStyYLBryQ4i-0-10ea295496c640a31f8f3b3a54a28bac)
但在ES6中,将用export和import进行一个模块的引入和抛出。例如,以下是使用ES6写的module.js文件库:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P48_164893.jpg?sign=1739226160-nmsMndz9LqlCaWFBaK0YaSuaPX56jf2o-0-dee80c10a9fe21bcc15ea2bf61f4d6cb)
如果用ES6将上述的module.js导入到文件main.js中,那么就变得非常简单了,只需使用import{name}from my-module语法即可,例如:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P48_164894.jpg?sign=1739226160-NXcxoAK61ngPXiIrREZR2KFd3d4Srvhx-0-ec23df7b951e442d74351e2b134c196e)
或者可以在main.js中导入整个模块,并命名为:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P48_164895.jpg?sign=1739226160-4ezt7gD3uqv6drxX1gqZ2wZiLYPhpviB-0-28be93df5b2ae13041b66113204ea9e9)