摘要：代碼地址模塊化的主要區(qū)別此前年前前前前前端模塊化，主流的就是，支持的二者都可以用為什么模塊化一直以來，前端開發(fā)的痛點(diǎn)之一就是代碼復(fù)用職責(zé)劃分問題，兼容性比如等新語法的支持組件化代碼壓縮等不在本文討論范圍。

前言

請(qǐng)注意，現(xiàn)在是2019/05/22，這！不！是！墳！貼！，你沒！有！穿！越！！
為了以后，可能需要搞一下以前的舊項(xiàng)目，自己也想玩玩，，，所以補(bǔ)一下舊時(shí)代的模塊化玩法。。。

代碼：github地址

此前（2019年前前前前）前端模塊化，主流的就是AMD/CommonJS，支持UMD的二者都可以用

為什么模塊化？


一直以來，前端開發(fā)的痛點(diǎn)之一就是 代碼復(fù)用/職責(zé)劃分 問題，兼容性比如ES6等新語法的支持/組件化/代碼壓縮等不在本文討論范圍。
在這些 前端模塊化 的東西出現(xiàn)之前，都是用

 目錄結(jié)構(gòu)：
...
equire.js-AMD
    ├─ index.html
    ├─ js
      ├─ lodash.js
      ├─ m1.js
      └─ m2.js
    ├─ main.js
    └─ require.js
 HTML
<script src="./require.js" data-main="./main.js">script>
 入口 main.js
// js/mian.js
// 全局配置
require.config({
  // 根路徑設(shè)置，paths下面全部都是根據(jù)baseUrl的路徑去設(shè)置
  baseUrl:"./js",
  paths: { // 定義引用時(shí)名稱對(duì)應(yīng)的路徑
    m1: "m1",
    m2: "m2",
    lodash: "lodash"
  },
  // 用來配置不兼容的模塊，沒有module.exports的第三方庫（未驗(yàn)證。。。）
  // shim:{
  //   "lodash": {
  //     exports: "_"
  //   }
  // }
})

define("main", function() {
  require(["m1"], function(m1) {
    console.log("name: ", m1.name);
    console.log("add: ", m1.add(2, 8));
  });
})

 模塊定義
define函數(shù)格式： define(id");

// js/m1.js
// define(id");
define("m1", ["lodash", "m2"], function(_, m2) {
  
  _.map([1,2], function(num){
    console.log("num: ", num);
  });

  console.log(m2);

  var add = function(x, y) {
    return x + y;
  };

  return {
    name: "m1.js",
    add: add
  };
})

二、CMD/sea.js
什么是CMD？

在瀏覽器端的CommonJS（除去某些Node.js環(huán)境特有的API）；同步、動(dòng)態(tài)加載;
依賴就近，哪里需要哪里require；
異步引入 require.async([dependencies], callback)；
使用 exports/module.exports 方式導(dǎo)出

以下使用sea.js v3.0.0示例：

 目錄結(jié)構(gòu)：
...sea.js--CMD
    ├─ index.html
    ├─ js
      ├─ lodash.js
      ├─ m1.js
      └─ m2.js
    ├─ main.js
    └─ sea.js
 HTML
  <script src="./js/lodash.js">script>
  <script src="./sea.js">script>
  <script>
    // 配置
    seajs.config({
      base: "./", // 后續(xù)引用基于此路徑
      alias: {  // 別名，可以用一個(gè)名稱 替代路徑（基于base路徑）
        lodash: "js/lodash.js",
        m1: "js/m1",
        m2: "js/m2",
      },
    });

    // 加載入口模塊
    seajs.use("./main.js", function(main) {
      // 執(zhí)行完 main.js導(dǎo)出(exports/module.exports)之前的同步操作之后的 回調(diào)
      main.init(); // init
    });

  script>
 入口 main.js
// js/mian.js
define(function(require, exports, module) {
  var m1 = require("m1");
  console.log(m1.add(2,8));

  // 多帶帶導(dǎo)出
  exports.init = function init() {
    console.log("init");
  }

  // 或者 先定義，再統(tǒng)一導(dǎo)出
  // function init() {
  //   console.log("init");
  // }
  // module.exports = {
  //   init: init
  // }
});

 模塊定義
define函數(shù)格式： define(function(require, exports, module) {})
// js/m1.js
define(function(require, exports, module) {
  // 使用第三方庫 lodash.js，script標(biāo)簽導(dǎo)入
  // 優(yōu)先require，不然使用script
  _.map([1,2], function(item) {
    console.log(item);
  })

  // 異步引入
  require.async("m2", function(m2) {
    console.log("異步引入 m2");
  }); // m2

  // 每個(gè)函數(shù)多帶帶導(dǎo)出
  exports.add = function(x, y) {
    return x + y;
  }

  // 或者 先定義，再統(tǒng)一導(dǎo)出
  // function add(x, y) {
  //   return x + y;
  // }
  // modules.exports = {
  //   add: add
  // }
});