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