Javascript模組化程式設計（三）：require.js的用法

js程式碼越寫越多，一個檔案肯定是不夠用的，必須分成多個檔案，依次載入，這樣載入的缺點就是載入的時候，瀏覽器會停止網頁渲染。載入的檔案越多，網頁失去響應的時間就越長，其次，由於js之間的依賴關係，必須保證js的載入順序。
require.js的出現，就解決了這兩個問題：

• 實現js檔案的非同步載入，避免網頁失去響應；
• 管理模組之間的依賴性，便於程式碼的編寫和維護

require.js的載入

先去官網下載最新的版本，載入完成後，載入到html頁面
async="true"是設定檔案非同步載入 defer是ie相容
<script src="js/require.js" async="true" defer ></script>

載入require.js以後，下一步就要載入我們自己的程式碼了。require.js預設的檔名字尾名是js，所以可以把main.js簡寫成main

data-main="js主模組的路徑”

員工A封裝的求兩個數的和的函式 add.js
遵從AMD規範
宣告模組，暴露模組

define(["mul"], function (mul) {
  function addFunc(x, y) {
    return x + y;
  }

  //新的函式 兩個數的積和兩個數的和 求和
  function xxx(x, y) {
    return addFunc(x, y) + mul.mul(x, y);
  }

  function show() {
    console.log("hello world");
  }

  //對外暴露
  return {
    addOut: addFunc,
    show: show,
    xxx: xxx,
  };
});
 

員工B封裝的求兩個數的成績 mul.js

define(function () {
  function mul(x, y) {
    return x * y;
  }

  function show() {
    console.log("hello world mul模組");
  }
  return {
    mul: mul,
    show: show,
  };
});

主模組的寫法

計算兩個數
使用A同學的模組,通過AMD規範引入

• 第一種：引入模組的路徑 在回撥函式中，對應引數的位置，可以拿到這個模組，對外暴露的物件

require(["demo/add"], function (add) {
  console.log(add.addOut(10, 20)); //30
  add.show();  //hello world
});
 

• 第二種：我們可以通過對當前的要引入的模組進行路徑配置

require.config({
  paths: {
    //後續你用配置好的名字，就相當於使用了這個路徑
    add: "demo/add",
    mul: "demo/mul",
  },
});
require(["add", "mul"], function (add, mul) {
  console.log(add.addOut(10, 20));  //30
  add.show();

  console.log(mul.mul(10, 20));  //200
  mul.show();

  console.log(add.xxx(10, 20));  //230
});

上述案例的檔案架構