没有模块化开发的时候

  • 问题：
    1. 没有办法维护
    2. 全局变量污染
    3. 依赖关系不清
    4. 必须按顺序引入文件

IIFE 伪模块化标准(2003~2011)

  • Immediaitely Invoked Function Expression
  • 自执行函数(function () {})()
  • 解决问题:
    1. 依赖不清
      • 直接在自执行函数的参数位置，能看到依赖了哪些模块
    2. 变量全局污染
      • 你后面的代码该用什么变量用什么
  • 问题:
    1. 文件顺序不能动
    2. 只能知道我依赖的几个模块，但是模块在哪个文件中不好说

CommonJS 模块化标准

  • 2009 年，nodejs 出现了
  • 使用JS去做服务端语言
  • 伴生的是 CommonJS 模块化标准
  • 缺点:只能在后端JS里面用

AMD 模块化标准 - 依赖前置

  • Async Module Definition

  • 2011出现的，社区里面发起的

  • 因为非官方，没有关键字，大家书写了一套叫做 require.js 的第三方文件

  • 来实现模块化标准

  • 把每一个js文件独立出来了

  • 使用了导入导出的语法来实现模块化

  • 在JS文件里面引入另一个JS文件

  • 页面只需要引入最后的整合文件就可以了

  • 语法：

    • 定义模块(调用define 的方法)

      1. 独立模块定义

        • 每一个模块文件开始执行define()
        • 我不依赖其他文件，我就是一个单纯的模块
        • 向外暴露的内容，直接return 出去就好了

      2. 依赖其他模块的模块(我也是一个模块文件，但是我依赖的以他模块的内容)

        • 使用define() 定义
        • 语法: define([ 依赖文件1,依赖文件2, ... ], function (模块A,模块B) {})

    • 导入其他模块

      • 使用这个方法require()
      • 语法: require([ 依赖文件1,依赖文件2, ... ], function (模块1, 模块2){})

  • 解决问题:

    1. 依赖很清晰

      • 因为只有一个文件，那么所有的东西都在一个文件里面出现

    2. 变量全局污染

      • 没有全局污染，都在私有作用域

  • 问题:

    • 依赖前置
      • 不管多少行以后使用的东西，都会在打开页面的时候就加再进来
      • 缺点：首屏加载时间长
      • 优点：后期操作流畅

CMD 通用模块定义 - 即时依赖

  • Common Module Defineion

  • 2011左右，社区里面出现的一个标准

  • 淘宝”玉伯”，开发一了个CMD的模块化标准

  • 依赖于一个叫做sea.js的文件来实现的模块化标准

  • 使用:文件需要引入一个sea.js的文件

    1. 独立模块定义
      • define( function ( require, exports, module) { })
        • require() 用来导入其他文件的
        • module.exports是为了本文件导出内容的
        • exports是module. exports的别名
        • var exports = module。exports
    2. 依赖其他模块的模块
      • 你需要依赖其他文件模块
        • 在define( function ( require, exports, module) {
        • 在你需要的位置使用require() 方法来导入
        • var modA = require( ‘地址’)
    3. 资源整合
      • 使用seajs.use()
      • 语法: seajs.use([‘你要 依赖的模块’]，function (模块A) {})

  • 解决问题

    • 依赖前置
    • 按需加载，在你需要的时候，在加载
    • 也留下了依赖前置的接口

  • 问题:

    • 即时依赖
      • 首屏加载快
      • 操作不够流畅

ES6 Module - 依赖前置

  • 2015年发布，ES6 语法里面自带了一个模块化标准
  • 各大浏览器厂商并不买账
  • 2016年开始，Vue出现了，人家出现了一个脚手架(开发的大框架直接给你搭建好)
  • 搭建这个架子的时候，内置了ES6模块化标准
  • 2018 年，各大浏览器厂商开始原生支持ES6模块化标准
  • 2018 年中，Chrome 率先原生支持ES6模块化
  • 变成了JS的语法，和关键字，不需要任何第三方文件的引入
    • 特点:页面必须在服务器上打开
      • live server 插件
      • 如果你想使用模块化语法，script 标签要加一个属性type=” module”

语法

  1. 每一个文件都可以作为独立模块，页都可以作为整合文件
  2. 导出语法
    1. export default 导出的内容
    2. export var num = 200
  3. 导入语法
    1. 接收export default 导出
      • import 变量 from'哪一个JS文件'
    2. 接收export导出的那个
      • import {接收变量} from' 哪-一个JS文件'

ES2020 发布新标准

  • 多了一个按需加载的模块化
  • 语法: import(你要加载的文件).then(function(res){})