![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=1739666256-ZWIG8k7knNlHQiqkoVudN6V9UZYIxf2j-0-d61a3e2a94b0ffb8c22cd48e3bbc59b8)
但在ES6中,将用export和import进行一个模块的引入和抛出。例如,以下是使用ES6写的module.js文件库:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P48_164893.jpg?sign=1739666256-mZLaZUhcHtlJuWZvlZU8TnKdqfuJoaTg-0-51bbfc999f4f1bf63023d84efd750a29)
如果用ES6将上述的module.js导入到文件main.js中,那么就变得非常简单了,只需使用import{name}from my-module语法即可,例如:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P48_164894.jpg?sign=1739666256-ALCJrdGrqq4Q3RNK3CwYj6Xf1RC8DC67-0-236754693960a67acad6db023211ade4)
或者可以在main.js中导入整个模块,并命名为:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P48_164895.jpg?sign=1739666256-hRTi7AzMtpYOYfY7pIcdmS7gzJVGfJbW-0-4cd35cfc6df74aebff212bccbf6c8023)