requirejs和seajs的基本使用與簡單區別

項目中一直在使用requirejs，鑑於requirejs和seajs經常被用來做比較，本篇文章就簡單介紹下requirejs和seajs和它們之間的一些區別，後續會閱讀兩者的源碼深入瞭解（挖坑中。。。）

從例子入手介紹requirejs基本用法：

1、引入requirejs

<script src="require.js"></script>
此處再引入requirejs時，沒有通過data-main設置主入口文件，因此，基礎路徑即爲引入requirejs文件所在的文件的路徑；如果設置了主入口文件，那麼主入口文件的路徑即基本路徑

2、基本配置

require.config({
    // 設置的基本路徑
    "baseUrl": "/static/",

    // 爲文件或文件夾設置一個映射關係
    "paths": {
        "jquery" : "https://cdn.staticfile.org/jquery/3.3.1/jquery",
        "lib" : "/js/lib" // 因爲設置了baseUrl，所以這裏的位置實際上是/static/js/lib

    // 爲模塊設置配置信息，在模塊內可通過module.config()獲取
    "config": {
        "lib/moduleA": {
            "label" : "moduleA"
        }
    }
});

3、定義模塊

static/js/lib/moduleA.js

require(function(require, exports, module){
    // CommonJs形式的模塊定義
    var label = module.config().label; // -->moduleA
});

static/js/lib/moduleB.js

define(["jquery"], function($){
    // 有依賴關係的模塊定義
});

4、引入模塊

require([lib/moduleA, "lib/moduleB"], function(A, B){
    ...
});

---

seajs基本用法：

1、引入seajs

<script src="seajs"></script>

2、基本配置

seajs.config({
    // 設置路徑，方便跨目錄調用
    paths: {
       'arale': 'https://a.alipayobjects.com/arale',
       'jquery': 'https://a.alipayobjects.com/jquery'
    },

    // 設置別名，方便調用
    alias: {
      'class': 'arale/class/1.0.0/class',
      'jquery': 'jquery/jquery/1.10.1/jquery'
    }

    // 變量配置
    vars: {
        'locale': 'zh-cn'
    }

    // 提前加載並初始化好指定模塊，等到use時纔用到
    preload: "a"
});

3、定義模塊

define(function(require, exports, module){
    /**
    * require用來獲取指定模塊
    * exports用來在模塊內部對外提供接口，也可以通過return對外提供接口
    * module.exports同exports類似，用來在模塊內部對外提供接口
    */
});

4、引入模塊

加載一個模塊：seajs.use("./a")
加載一個模塊，在加載完成時，執行回調：

seajs.use("./a", function(a){

});

加載多個模塊，在加載完成時，執行回調：

seajs.use(["./a", "./b"], function(a, b){

});

---

requirejs和seajs的簡單區別：

1、requirejs是AMD規範的，seajs是CMD規範的

2、AMD是提前執行，CMD是延遲執行，即AMD中require的所有模塊都會先加載完成，而CMD中require的模塊再需要的時候再去執行

舉例一：

AMD(CommonJs形式定義模塊)
define(function(require, exports, module){
    var a = require(moduleA);
    a.dosomething();
    var b = require(moduelB);
    b.dosomething();
});
等價於
define([moduleA, moduleB],function(a, b, require, exports, module){
    a.dosomething();
    b.dosomething();
});
因爲AMD是提前執行的，因此當moduleB有報錯時，a.dosomething()和b.dosomething()都不能執行，AMD在依賴模塊都正常加載的情況下才能執行後續操作。

CMD
define(function(require, exports, module){
    var a = require(moduleA);
    a.dosomething();
    var b = require(moduleB);
    b.dosomethig();
});
因爲CMD是延遲執行的，因此當moduleB有報錯時，a.dosomethig()仍然可以正常執行

舉例二：
module1.js

define(function(require, exports, module){
    require("./moduleA");
    document.getElementById("btn").onclick = function(){
        require("./moduleB");
    }
});

moduleA.js

define(function(require, exports, module){
    console.log("moduleA");
});

moduleB.js

define(function(require, exports, module){
    console.log("moduleB");
});

使用requirejs引入module1：

require(["./module1"], function(){});
因爲requirejs是提前執行，所以此時會打印：
moduleA
moduleB

使用seajs引入module1：

seajs.use("./module1");
因爲seajs是延遲執行，因此，引入module1時，只會打印moduleA，只有當點擊頁面btn時，纔會執行moduleB，即這時候纔會打印moduleB

3、AMD推崇依賴前置，CMD推崇依賴就近