RequireJS 基本语法

0x01 概述

• RequireJS 官网：https://requirejs.org/
• RequreJS 是一个 JavaScript 文件和模块加载器
• 特点：遵循 AMD 规范、模块化开发
• 特殊要求：
  • 每个 HTML 文件与其 JavaScript 入口文件一一对应，且多个 JavaScript 入口文件名称不能重复
    • 多个 HTML 不能使用同一个 JavaScript 入口文件
  • 所有需要导入的 JavaScript 文件都要在 JavaScript 入口文件中导入

0x02 基本语法

（0）导入 RequireJS

在 HTML 文件中使用以下语句导入 RequireJS：

  <script src="https://requirejs.org/docs/release/2.3.7/minified/require.js" async="true" defer data-main="js/main"></script>

• async="true" defer：异步加载需要引入的 JS 文件

• data-main="js/main"：设置入口文件

  上述入口文件路径为 ./js/main.js

（1）导入其他自定义 JS 文件

1. 在 js 目录创建 module 目录，其中创建 calc.js

   define(function () {
     function addHandler(a, b) {
       return a + b;
     }
   
     return {
       add: addHandler,
     };
   });
   

   • define：AMD 规范，定义模块
   • return：以对象的方式导出

2. 在 main.js 中引入 calc.js

   require(["module/calc"], function (calc) {
     var result = calc.add(1, 2);
     console.log(result);
   });
   

   • require(modulePathArray, callback)：AMD 规范，导入模块
     • modulePathArray：以数组的形式，通过路径导入模块
     • callback：使用模块提供的方法，参数为模块的实例对象

3. 此时控制台输出 3

（2）配置路径

• 通过配置路径，可以简化导入模块时重复写入的路径

• 修改 main.js

  require.config({
    paths: {
      calc: "module/calc",
    },
  });
  
  require(["calc"], function (calc) {
    var result = calc.add(1, 2);
    console.log(result);
  });
  

（3）多模块

1. 在 module 中新建 show.js

   define(function () {
     function clog(msg) {
       console.log(msg);
     }
   
     return {
       show: clog,
     };
   });
   

2. 在 main.js 中同时导入 calc.js 和 show.js

   require.config({
     paths: {
       calc: "module/calc",
       show: "module/show",
     },
   });
   
   require(["calc", "show"], function (calc, show) {
     var result = calc.add(1, 2);
     show.clog(result);
   });
   

3. 此时控制台输出 3

（4）模块中导入其他模块

1. 修改 calc.js，在 calc.js 中导入 show.js

   define(["show"], function (show) {
     function addHandler(a, b) {
       show.clog(a + b);
     }
   
     return {
       add: addHandler,
     };
   });
   

   当在 main.js 中配置了路径，才可以在模块中也使用简写 "show"，否则需要使用完整路径 "module/show"

2. 修改 main.js

   require.config({
     paths: {
       calc: "module/calc",
       show: "module/show",
     },
   });
   
   require(["calc", "show"], function (calc, show) {
     calc.add(1, 2);
   });
   

3. 此时控制台输出 3

-End-