模块化开发

本文详细介绍了ES Modules的基本特性和最佳实践,包括CommonJs规范的对比。重点讲解了ES Modules的导出(export)和导入(import)机制,强调了export的普通和default两种情况,以及import的注意事项和动态导入。此外,还探讨了ES Modules在浏览器和Node.js环境中的应用及兼容性解决方案。
摘要由CSDN通过智能技术生成

CommomJs 规范

  1. 一个文件就是一个模
  2. 每个模块都有单独的作用域
  3. 通过module.exports导出成员
  4. 通过require函数载入模块

注意点: CommonJ是以同步模式加载模块

模块化标准规范最佳实践

  1. 在浏览器端中使用ES Modules(很多浏览器都支持)
  2. 在Node中使用CommonJs(因为是Node内置模块系统)

ES Modules基本特性

  • 因为现在浏览器基本都支持ES Modules规范,所以我们只需要通过给script标签添加 type=module 的属性,就可以以 ES Module 的标准执行其中的 JS 代码

在这里插入图片描述
相比普通的script标签中的js,有几个新特性

  1. ES Modules 自动采取严格模式,忽略 “use strict”
    严格模式下this为undefined
    在这里插入图片描述
  2. 每个 ES Modules都是运行在单独的私有作用域中
    在这里插入图片描述
  3. ES Modules 是通过 CORS 的方式请求外部JS模块的,也就意味着我们的JS模块不在同源地址下,就需要请求的服务端地址它在响应的响应头中必须提供有效的CORS头
  4. ES Modules 的script标签会延迟执行脚本
    在这里插入图片描述
    在这里插入图片描述
    小结: ES Modules
  • 自动采取严格模式,忽略"use strict"
  • 每个ESM模块都是单独的私有作用域
  • ESM是通过CORS去请求外部JS模块的
  • ESM的script标签会延迟执行脚本

ES Modules导出 export (分普通和default两种情况)

  • export–在模块内对外暴露接口

  • import–在模块内导入其他模块所提供的的接口

  • ES Modules中每一个模块都是运行在私有作用域中,模块内所有的成员都没有办法直接在外部被访问到,如果需要对外提供某些成员,就需要用export关键词去修饰下这个变量或者函数的声明,在var 前面添加export关键词

expor

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值