模块化开发
CommomJs 规范
- 一个文件就是一个模
- 每个模块都有单独的作用域
- 通过module.exports导出成员
- 通过require函数载入模块
注意点: CommonJ是以同步模式加载模块
模块化标准规范最佳实践
- 在浏览器端中使用ES Modules(很多浏览器都支持)
- 在Node中使用CommonJs(因为是Node内置模块系统)
ES Modules基本特性
- 因为现在浏览器基本都支持ES Modules规范,所以我们只需要通过给script标签添加 type=module 的属性,就可以以 ES Module 的标准执行其中的 JS 代码
相比普通的script标签中的js,有几个新特性
- ES Modules 自动采取严格模式,忽略 “use strict”
严格模式下this为undefined
- 每个 ES Modules都是运行在单独的私有作用域中
- ES Modules 是通过 CORS 的方式请求外部JS模块的,也就意味着我们的JS模块不在同源地址下,就需要请求的服务端地址它在响应的响应头中必须提供有效的CORS头
- ES Modules 的script标签会延迟执行脚本
小结: ES Modules
- 自动采取严格模式,忽略"use strict"
- 每个ESM模块都是单独的私有作用域
- ESM是通过CORS去请求外部JS模块的
- ESM的script标签会延迟执行脚本
ES Modules导出 export (分普通和default两种情况)
-
export–在模块内对外暴露接口
-
import–在模块内导入其他模块所提供的的接口
-
ES Modules中每一个模块都是运行在私有作用域中,模块内所有的成员都没有办法直接在外部被访问到,如果需要对外提供某些成员,就需要用export关键词去修饰下这个变量或者函数的声明,在var 前面添加export关键词