- Vue.js 3.0从入门到精通(视频教学版)
- 李小威编著
- 229字
- 2022-07-27 18:37:40
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=1739004669-QUoweXqNT0g9vrcSwT7e2XMRS90zJnDG-0-d69789fd93af6c998439715cd3f5a1b2)
但在ES6中,将用export和import进行一个模块的引入和抛出。例如,以下是使用ES6写的module.js文件库:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P48_164893.jpg?sign=1739004669-wb91T0oxf9YlqS0OlBgbgMTZBSnTs9HD-0-2888979d65cf93da9e73f4bd5d79fd5e)
如果用ES6将上述的module.js导入到文件main.js中,那么就变得非常简单了,只需使用import{name}from my-module语法即可,例如:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P48_164894.jpg?sign=1739004669-axLCj2jVTbAbkwzej5sCuIFydb73hJIL-0-3b87b13e3c85ada994e62383a4afa98d)
或者可以在main.js中导入整个模块,并命名为:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P48_164895.jpg?sign=1739004669-rcmwP5xtpp2JC4w0fqA8IVyWFWMpz7Rd-0-2d2ba4207ff725eb0a71cb0980a10045)