模块化类型

  • 浏览器环境：ES Modules（export/import）
  • NodeJs环境：Commonjs（module.exports/require）

ES Modules导出的并非一个对象，而是变量的引用

  1. const name = 'xiaoming';
  2. const age = 18;
  3. const sex = 'man';
  4. // 导出
  5. export { name, age };
  6. // 别名导出
  7. // export { name as YourName, age as YourAge };
  8. // 默认导出
  9. // export default sex;
  10. ---------------------
  11. // 导入
  12. import { name, age } from '...';
  13. // 导入别名
  14. import { YourName, YourAge } from '...';
  15. // 导入默认
  16. import sex from '...';

导入并直接导出默认对象

  1. export { default as XXX } from '...';
  2. -------------------------------------- // 相当于
  3. import XXX from '...';
  4. export { XXX }

ES Modules基本特性

  • 自动采用严格模式，忽略‘use strict’

    1. <script type="module">
    2.   console.log(this) // 由于ES Modules默认采用严格模式，严格模式下没有this，this打印undefined
    3. </script>

  • 每个ES Modules模块都是单独的私有作用域

    1. <script type="module">
    2.   const name = 'xiaoming'
    3. </script>
    4. <script type="module">
    5.   console.log(name) // not defined
    6. </script>

  • ES Modules是通过CORS去请求外部JS模块，src地址需支持跨域

    1. <script type="module" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"> // 跨域报错
    2. </script>

  • ES Modules的script标签会延迟执行脚本

    1. <script type="module">
    2.   alert('dmeo')
    3. </script>
    4. <p>页面内容</p> // 先显示页面内容，然后才会执行ES Modules中脚本

    ES Modules in Nodejs 与Commonjs

  • ES Modules中可以导入Commonjs模块

  • Commonjs中不能导入ES Modules模块
  • Commonjs始终只会导出一个默认成员(对象) ```javascript module.exports = { foo: () => {} } // 相当于 exports.foo = () => {}

const mod = require(‘…’); console.log(mod) // {foo: () => {}} ```

  • 注意import不是解构对象