多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
大家知道js创造者速成的一门语言,在设计之初,一直没有模块的概念。 这就导致了项目上了规模就会变得难以维护,在ES6面世之前,社区制定了 一些模块加载方案,主要有commonjs 和 amd 两种。 ### 在浏览器中使用ES6模块 在浏览器中是可以直接使用es6的模块的,当然,如果你不考虑兼容到话。 ![](https://img.kancloud.cn/24/d2/24d278c8366f19812399e4c344e8b76f_262x24.png) 它与我们以前的引用有何不同呢? 1、它的type的 module,表明了他是一个模块。 2、在es5的时候,我们引用js的作用域要么是 全局作用域 要么是函数作用域,我们用module引用的变量有一个新的作用域,叫**模块作用域** 3、自动使用js的严格模式 ###模块的导入导出 **模块的导出有三种方式:** 1、声明时进行导出 ![](https://img.kancloud.cn/94/12/94123499c560ff45ee03995321550a77_526x143.png) 2、先声明在导出 ![](https://img.kancloud.cn/7c/a5/7ca577ba0ef4a40b10531379907a1be1_393x116.png) 3、默认导出 ![](https://img.kancloud.cn/d2/24/d224c915c3a575b12e782c155d5d1dcc_282x58.png) **模块的导入:** 1、导如默认 ![](https://img.kancloud.cn/78/79/78791a1863785f63913ea70de163dc61_307x38.png) 2、按需导入 ![](https://img.kancloud.cn/7e/08/7e08b46ab0e69b148b177e4f3128f08e_339x35.png) 这时可以使用重名名 使用as语法。 ![](images/screenshot_1564913102783.png) 上面都是我们常用的导入方式,还有一个不常用的异步导入 ![](https://img.kancloud.cn/6e/e2/6ee2a0a37f5523c67e2e59e8303a3935_333x51.png) 此时将import作为一个函数用,接受一个字符串参数(模块地址),返回一个promise ![](https://img.kancloud.cn/f3/cc/f3cca5cbf7e506883aa969a79d1ed679_413x136.png)