模块化开发与规范化标准

模块化开发

模块化概述

模块化开发时当下最重要的前端开发范式
模块化只是思想

内容概要

模块化演变过程

模块化规范

常用的模块化打包工具

基于模块化工具构建现代web应用

打包工具的优化技巧

模块化的演变进程

Stage1-文件划分方式

缺点：污染全局作用域；命名冲突问题；无法管理模块依赖关系；
早期模块化完全依靠约定

Stage2-命名空间方式

解决了命名冲突的问题，但是模块内部变量没有实现私有化；

Stage3-IIFE

Immediately Invoked Function Expression，意为立即调用的函数表达式；

以上三种阶段是在没有工具和规范的情况下，对模块化的落地方式

模块化规范的出现

CommonJS规范

nodejs中所有的模块必须遵循CommonJS规范
- 一个文件就是一个模块
- 每个模块都有单独作用域
- 通过module.exports导出成员
- 通过require函数载入模块
CommonJS是以同步模式加载模块

AMD(Asynchronous Module Definition)

例如：Require.js
目前大部分第三方库都支持AMD规范
- AMD使用起来相对复杂
- 模块JS文件请求频繁

Sea.js+CMD(Common Module Definition)

模块化规范标准

模块化最佳实现方式

nodejs环境：CommonJS
浏览器环境：ES Modules

CommonJS in Node.js

ES Modules in Broswer

ECMAScript2015（ES6）中提出的一种新的模块化的规范

ES Modules特性

基本特性

<body>
  <!--通过给Script添加type = module 的属性，就可以以ES Module的标准执行其中的JS代码了-->
  <script type="module">
    console.log('this is module') 
  </script>
  <!-- 1.ESM 自动采用严格模式，忽略 'use strict' -->
  <script  type="module">
    console.log(this)
  </script>

  <!-- 2. 每个ES module都是运行在单独的作用域中 -->
  <script type="module">
    var foo = 100
    console.log(foo)
  </script>
  <script type="module">
    console.log(foo)
  </script>

  <!-- 3.ESM 是通过CORS的方式请求外部js模块的 -->
  <script type="module" src="https://s1.pstatp.com/cdn/expire-1-M/jquery/3.5.1/jquery.min.js"></script>

  <!-- 4. ESM 的script标签会延迟执行脚本,等同于defer属性 -->
  <script defer src="./demo.js"></script>
  <p>需要显示的内容</p>
</body>