6 模块化开发
ES5中不存在模块化,ES6自带模块化
6.1 使用模块化原因
没有模块化出现的问题
- 在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的。那个时候的代码是怎么写的呢?直接将代码写在
<script>
标签中即可 - 随着ajax异步请求的出现,慢慢形成了前后端的分离
- 客户端需要完成的事情越来越多,代码量也是与日俱增。
- 为了应对代码量的剧增,我们通常会将代码组织在多个js文件中,进行维护。
- 但是这种维护方式,依然不能避免一些灾难性的问题。
- 比如全局变量同名问题:看右边的例子
- 另外,这种代码的编写方式对js文件的依赖顺序几乎是强制性的
- 但是当js文件过多,比如有几十个的时候,弄清楚它们的顺序是一件比较同时的事情。而且即使你弄清楚顺序了,也不能避免上面出现的这种尴尬问题的发生。
- 在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的。那个时候的代码是怎么写的呢?直接将代码写在
解决方案:匿名函数
- 使用匿名函数解决重名问题,每个js文件中的内容放在匿名函数内部
;(function(){})()
- 使用匿名函数解决重名问题,每个js文件中的内容放在匿名函数内部
6.2 使用模块作为出口
解决的问题:在全局中可以访问到模块化文件中的局部变量
模块化基本的封装:
- 给对象添加各种需要暴露到外面的属性和方法(不需要暴露的直接定义即可)。最后将这个对象返回,并且在外面使用时接收
- 在外部通过返回的对象调用局部的属性和方法来达到访问文件局部变量的目的
6.3 常见的模块化规范
- 常见的模块化规范:CommonJS、AMD、CMD,也有ES6的Modules
6.3.1 CommonJs(动态加载)
动态加载:在导入就会执行
nodejs中使用CommonJS模块化,开发中大多数采用CommonJS模块化规范
模块化有两个核心:导出和导入
- 需要在node环境中使用,需要node环境进行解析
6.3.2 ES6的Modules(静态加载)
静态加载:属于页面加载
学习ES6中的module在vscode中,需要安装live Server插件,否则会有跨域问题,详细的安装安装完成之后重新启动vscode软件
- settings中的配置信息如下
1
2
3
4
5
6
7
8"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.donotVerifyTags": true,
"liveServer.settings.root": "/",
"liveServer.settings.CustomBrowser": "chrome",
"liveServer.settings.host": "127.0.0.1",
"liveServer.settings.port": 5500,
"liveServer.settings.NoBrowser": true,
"liveServer.settings.AdvanceCustomBrowserCmdLine": "",开启live Server的方式
- 右键点击html文件run live Serer
- 编辑器右下角的Go alive,再次地单击就会关闭
可是实现html页面的实时刷新
-
- 在html中引入js文件并添加
type=module
的属性 - 在js文件中通过export导出文件
- 在js文件中通过import引入文件
- 在html中引入js文件并添加
export局部导出
- 导出方式:
- 单独导出:
- 一次性导出:
export {color,name,magicNumbe}
export default
:导出未命名的功能,每个js模块文件中只能含有一个export default,在接收的文件中可以自己命名- export default在同一个模块中,不允许同时存在多个
1 | // 导出数据:单独导出 |
import外部导入
使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块
使用步骤:
- 首先,我们需要在HTML代码中引入两个**js**文件,并且类型需要设置为module
- import指令用于导入模块中的内容,比如main.js的代码
如果我们希望某个模块中所有的信息都导入,一个个导入显然有些麻烦
通过
*
可以导入模块中所有的export变量*但是通常情况下我们需要给起一个别名
as
,方便后续的使用1
2
3import * as 别名 from 'xx.js'
使用的时候通过
别名.属性名称使用变量
接收export default的未定义功能
1
2
3
4
5
6
7
8
9
10import 自定义名称 from 'xx.js'
通过自定义的名称调用export default中导出的数据
// 导出未定义功能
export default function (param) {
console.log(param)
}
// 接收自定义名称数据
import myFun from './a.js'
myFun('hello')
本文作者:
SparkParis
本文链接: https://sparkparis.github.io/2020/05/09/Vue%E7%AC%94%E8%AE%B03/
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!
本文链接: https://sparkparis.github.io/2020/05/09/Vue%E7%AC%94%E8%AE%B03/
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!