写在前面

笔记内容大多出自于拉勾教育大前端高薪训练营的教程，因此也许会和其他文章雷同较多，请担待。

ES Module

基本特性

• 使用type="module"就可以使用ES Module的标准执行其中的JS代码了
• 自动采用严格模式，忽略use strict
• 每个模块都是一个单独作用域
• 访问的地址必须是配置了CORS
• 会自动延迟执行脚本，当页面渲染完才会去执行脚本，这样就不会阻塞页面的加载了

<!-- 使用type="module"就可以使用ES Module的标准执行其中的JS代码了 --------- start -->
<script type="module">
console.log('module_1') // module_1
</script>
<!-- 使用type="module"就可以使用ES Module的标准执行其中的JS代码了 --------- end -->
<!-- 自动采用严格模式，忽略use strict --------- start -->
<script type="module">
console.log('module_2', this) // module_2 undefined
</script>
<!-- 自动采用严格模式，忽略use strict --------- end -->
<!-- 每个模块都是一个单独作用域 --------- start -->
<script type="module">
var a = 100
console.log('module_3', a) // module_3 100
</script>
<script type="module">
console.log('module_4', a) // module_4 a is not defined
</script>
<!-- 每个模块都是一个单独作用域 --------- end -->
<!-- 访问的地址必须是配置了CORS --------- start -->
<script type="module" src="https://libs.baidu.com/jequry@3.4.1/dist/jequry.min.js">
console.log('module_5') // module_5 跨域报错
</script>
<script type="module" src="https://unpkg.com/jequry@3.4.1/dist/jequry.min.js">
console.log('module_6') // module_6 请求正常
</script>
<!-- 访问的地址必须是配置了CORS --------- end -->
<!-- 会自动延迟执行脚本，当页面渲染完才会去执行脚本 --------- start -->
<script type="module">
console.log('module_7') // 渲染中不出现log，渲染完后 -> module_7
</script>
<!-- 会自动延迟执行脚本，当页面渲染完才会去执行脚本 --------- end -->

导出导入

• export {} 和 import {} 有点像对象字面量，但是完全不同，这是固定语法，如果想到处对象，需要用 export default {}
• 导出的是引用，而不是拷贝了一份，比如模块中修改了变量的值，那引用的地方该变量也会变
• 导入的成员是只读的，无论导出的是不是const定义的

// 导出
export const name = 'aeorus'
const lastName = 'Yin'
const firstName = 'YiWen'
export {
lastName as ln // 使用as别名导出
}
// 导入
import {
name,
firstName as fn, // 使用as别名导入
ln
} from './module'
console.log(name, fn, ln) // aeorus YiWen Yin

最后

以上就是留胡子火为你收集整理的前端知识点——ES Module写在前面ES Module的全部内容，希望文章能够帮你解决前端知识点——ES Module写在前面ES Module所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。