[JavaScript知识库]模块化开发的学习

模块化是一种项目的构架模式， 这种构架模式让JS代码重用性变得非常高，让项目构架的一些复杂问题全部得以解决。 例如，多个script标签不会再出现了，我们只要用一个script标签进行引入就可以了。

为了减少系统耦合度，提高内聚，减少资源依赖
便于维护，功能复用性更强
解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题

如何模块化

• 封装之后的入口和出口
• 获取模块

模块化的规范 - 引入模块和定义模块的方式

• AMD：第三方规范
  • 依赖前置的加载方式
  • 规范化文件是：require.js
  • 定义
  • 引入
• CMD：第三方规范，已经被抛弃了
  • 按需加载的方式
  • 规范化文件是：sea.js
• CommonJs：后端的模块化规范：node官方的模块化规范
  • 依赖前置的加载方式
  • 引入：const 模块对象 = require(“模块名”)
  • 定义：
• ES6：ECMAScript的官方推出的模块化规范
  • 依赖前置的加载方式
  • 定义
  • 引入

require.js的使用(AMD第三方规范)

• 基本语法

  • require(参数1,参数2)

    • 参数1：数组，数组内放置要引入的模块的路径
    • 参数2：回调函数，表示所有的模块引入完成后，才会执行的功能
      • 回调函数的形参和引入的模块一一对应，表示引入模块的出口
    • 引入模块，可以在一个文件内出现多次，因为可能会存在，引入不同批次的模块，实现不同的功能

  • define(参数1,参数2)

    • 参数1：数组，数组内放置定义本模块时，要依赖的其他模块的路径，可选
    • 参数2：回调函数，表示要定义的模块的功能，会在所有的模块引入完成后，才会执行
      • 回调函数的形参和引入的依赖模块一一对应，表示引入模块的出口
    • 定义模块一般为一个独立的js文件，一个js文件内，只有一个define(参数1,参数2)函数

• 简单使用

  • 在小模块中只定义功能，不执行，暴露到外部，在外部执行（jq必须加载完毕）

• 高级使用

  • main文件的概念
    • 如果使用独立的script标签的src引入main文件，此时main文件中的小模块的路径起始点，以当前html文件开始
    • 如果使用引入了require.js的script标签的data-main属性，引入main文件，此时main文件中的小模块的路径起始点，以main文件开始
  • 路径的配置
    • 提前配置路径的起始点
    • 设置基路径
    • 给小模块起别名

// 可以提前配置路径的起始点
require.config({
    // 设置基路径
    baseUrl:"./modules",
    // 给小模块起别名
    paths:{
        rc: "randomColor",
        jq: "https://lib.baomitu.com/jquery/3.6.0/jquery"
    }
})

require(["rc","jq"], function(rc){
    console.log(rc);
    console.log($);
})

• 模块之间的引入和执行顺序
  • 引入：不分顺序
  • 执行：异步执行
  • 所有的回调函数，是同步执行
  • 在主模块的回调函数中执行小模块的功能，在小模块的功能中可以使用其他模块的任意全局变量

require.config({
    baseUrl:"./modules",
    paths:{
        abc: "jq_test",
        jq: "https://lib.baomitu.com/jquery/3.6.0/jquery"
    }
})

// require中的回调函数里的_是占位符,为了使用回调函数后面的参数,因为参数是一一对应的,依赖前置
require(["jq","abc"], function(_, abc){
    console.log("小模块全部加载完毕");

    // 在主模块的回调函数中执行小模块的功能，在小模块的功能中可以使用其他模块的任意全局变量
    abc();

    console.log($);
})

总结

• 功能单独写到js文件中，使用define包装
• 使用require函数引入使用define包装之后的js文件