1️⃣ 基本模板

image.png

1️⃣ 基本使用

AMD的模块实现依赖于 require.js 所以必须有这个文件才可以实现 AMD 模块化开发
module1

  1. // 定义一个没有依赖的模块 - module1
  2. define(function () {
  3.     let num = 1;
  5.     function fun() {
  6.         console.log(2);
  7.     }
  8.     return { // 暴露语法在最后 return
  9.         num,
  10.         fun
  11.     };
  12. });

module2

  1. // 定义一个有依赖的模块 - module2
  2. define([
  3.     'module1', // 声明要依赖的模块 1
  4. ], function (module1) {
  5.     let num = 3;
  7.     function fun() {
  8.         return module1.num + num;
  9.     }
  10.     return fun;
  11. });

app.js

  1. // 例子
  2. requirejs.config({
  3.     baseUrl: './js/', // 如果配置了 baseUrl，项目的根目录就是 index.html 所在的目录
  4.     paths: {
  5.         module1: 'modules/module1',
  6.         module2: 'modules/module2',
  7.         jquery: 'libs/jquery-3.5.1'
  8.     }
  9. });
  10. requirejs(['module2', 'jquery'], function (m2, $) {
  11.     $('body').css('backgroundColor', 'red')
  12.     console.log(m2());
  13. });
  15. // 汇总文件里的固定写法
  16. requirejs.config({
  17.     baseUrl: '', 
  18.     paths: {
  19.     }
  20. });
  21. requirejs([], function () {
  22. });

index.html

  1. // html 引入
  2. <script data-main="js/app.js" src="js/libs/require.js"></script>