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推崇依赖就近