摘要：默認(rèn)會(huì)有三個(gè)參數(shù)，，也可以接受兩個(gè)以上的參數(shù)，字符串表示模塊標(biāo)識(shí)。獲取模塊的接口調(diào)用模塊中的定義方法模塊內(nèi)部異步加載模塊，并在加載完成后執(zhí)行指定的回調(diào)函數(shù)。對(duì)象，這種方式可以將模塊內(nèi)部多個(gè)屬性多個(gè)方法暴露出來(lái)。是在自己模塊的作用域中。

沖突

依賴(lài)

JS引入的文件,產(chǎn)生依賴(lài).

使用命名空間解決：

命名空間的弊端

調(diào)用的時(shí)候 名字比較長(zhǎng).

只能減低沖突，不能完全避免

引入sea.js的庫(kù)

如何變成模塊？ define

如何調(diào)用模塊？ exports 和 seajs.use

如何依賴(lài)模塊？ require

//html：

//main.js
define(function ( require,exports,module ) {
    
    var header = require("./header.js");
    
    function show () {
        
        alert(123);
        
    }
    
    
    exports.show = show;
    
});

加載一個(gè)或多個(gè)模塊

// 加載一個(gè)模塊
seajs.use("./main.js");

// 加載一個(gè)模塊，在加載完成時(shí)，執(zhí)行回調(diào)
seajs.use("./main.js", function ( main ) {
  
});

// 加載多個(gè)模塊，在加載完成時(shí)，執(zhí)行回調(diào)
seajs.use(["./main.js", "./b"], function(a, b) {
  a.doSomething();
  b.doSomething();
});

seajs.use 與 DOM ready 事件沒(méi)有任何關(guān)系。如果某些操作要確保在 DOM ready 后執(zhí)行，需要使用 jquery 等類(lèi)庫(kù)來(lái)保證。

seajs.use(["jquery","./main"],function ( $,main ) {
    
    $(function () {

        main.init();

    })

});

use方法第一個(gè)參數(shù)一定要有，但是可以是null，也可以是一個(gè)變量

var app = ["app.js", "header.css", "header.js"];

seajs.use(app, function( app ) {
    //do something
});

seajs.use() 只用于加載啟動(dòng)， 不應(yīng)該出現(xiàn)在define的模塊代碼中，如果模塊代碼里需要加載其它模塊時(shí)，使用 require() ，需要加載異步其它異步模塊時(shí)，使用 require.async()

seajs.use 是模塊加載器必備的一個(gè)接口

當(dāng)傳遞一個(gè)參數(shù)時(shí)候，那么這個(gè)參數(shù)就是一個(gè)模塊，參數(shù)可以是任意類(lèi)型
傳遞一個(gè)字符串，那么這個(gè)模塊就是一個(gè)字符串模塊
傳遞一個(gè)對(duì)象的時(shí)候，那么這個(gè)模塊就是一個(gè)對(duì)象模塊

傳遞一個(gè)函數(shù)（最常用的方式）
這函數(shù)自帶三個(gè)參數(shù)
Require：引用其他模塊的工廠方法
Exports：返回的接口對(duì)象
Module：模塊module屬性

當(dāng)傳遞過(guò)參數(shù)時(shí)（兩個(gè)，或者三個(gè)）
如果傳遞兩個(gè)參數(shù)的時(shí)候，第一個(gè)該模塊依賴(lài)的模塊數(shù)組集合，最后一個(gè)參數(shù)是function
如果傳遞三個(gè)參數(shù)的時(shí)候，第一個(gè)表示該模塊的名稱(chēng)，第二個(gè)參數(shù)表示該模塊依賴(lài)的模塊集合，第三個(gè)

//第一個(gè)參數(shù)，當(dāng)前模塊的ID，也就是當(dāng)前模塊的地址
//第二個(gè)參數(shù)，以來(lái)模塊的地址的數(shù)組

define("./main.js",["./drag.js"],function( require,exports,moduels ){
    
    
});

三個(gè)參數(shù)解釋

require

require不能簡(jiǎn)寫(xiě)

require不能被重定義
不能賦值：var req = require
不能定義函數(shù)：function require
不能被子函數(shù)當(dāng)成參數(shù)
不能在子函數(shù)作用域內(nèi)重定義

// 錯(cuò)誤 - 重命名 "require"！
var req = require, mod = req("./mod");

// 錯(cuò)誤 - 重定義 "require"!
require = function() {};

// 錯(cuò)誤 - 重定義 "require" 為函數(shù)參數(shù)！
function F(require) {}

// 錯(cuò)誤 - 在內(nèi)嵌作用域內(nèi)重定義了 "require"！
function F() {

 var require = function() {};

}

require的參數(shù)只能是完整的字符串 require(‘a(chǎn)bc’ + ‘bcd’)是不允許的

exports

模塊的接口

第一種，直接對(duì)exports添加屬性，如exports.color = "red"

第二種，通過(guò)module來(lái)定義，module.exports.color = "red"

第三種，通過(guò)module來(lái)定義，module.exports = {color: "orange"}

第四種，通過(guò)return來(lái)定義， return {color: "green"}

在一個(gè)模塊中定義接口時(shí)候要用一種方式，不能混用

注意，不可以直接對(duì)exports賦值新對(duì)象

module

模塊的屬性

id：表示模塊的id

uri：表示該模塊文件對(duì)應(yīng)的url

exports：表示模塊返回的接口集合

dependencies：表示依賴(lài)模塊集合（數(shù)組表示形式）

deps：表示依賴(lài)模塊集合（對(duì)象表示形式）

一個(gè)模塊就是一個(gè)文件

define 是一個(gè)全局函數(shù)， 用來(lái)定義模塊

facotry可以是一個(gè)函數(shù)，也可以是一個(gè)對(duì)象或字符串

definde( { color: "tan" } );

當(dāng)參數(shù)為 函數(shù)時(shí)。 默認(rèn)會(huì)有三個(gè)參數(shù) ：require，exports，module

definde( function ( require,exports,module ) {
    
} );

define 也可以接受兩個(gè)以上的參數(shù)，字符串id表示模塊標(biāo)識(shí)。deps是模塊依賴(lài)。

define("main",["mina.js"],function ( require,exports,module ) {
    //模塊代碼
});

id ,deps 參數(shù)省略，可以通過(guò)構(gòu)建工具自動(dòng)生成。
id和 deps 參數(shù)， 不屬于CMD規(guī)范。

require 是一個(gè)方法，接受 模塊標(biāo)識(shí) 作為唯一參數(shù)，用來(lái)獲取其他模塊提供的接口。

deifne(function ( requrie,exports ) {
    
    //獲取模塊 main 的接口
    var main = require("./main");

    //調(diào)用 模塊 main 中的定義方法
    main.init();

});

require.async(id,[cb]);
模塊內(nèi)部異步加載模塊，并在加載完成后執(zhí)行指定的回調(diào)函數(shù)。

require.async("./a",function(){});
//加載多個(gè)異步模塊
require.async(["./a","./b"],function(){});    

//異步加載 所需要的模塊
define(function ( require,expotrs,module ) {
    
    var loadSync = false;

    if ( loadSync ) {

        var skin = require.async("./skin");

    } else {

        var header = require.async("./header");

    }

});

exports , 用來(lái)向外提供模塊接口

define(function ( require, exports,module ) {

  // 對(duì)外提供 foo 屬性
  exports.color = "pink";

  // 對(duì)外提供 doSomething 方法
  exports.doSomething = function() {};

});

通過(guò)return 提供接口

define(function () {
    
    //通過(guò) return 直接提供接口
    return {
        color: "deeppink",
        sayName: function () {}
    }

});

CMD模塊中，經(jīng)常使用的API 有：define，require,require.async,exports,module.expotrs

定義模塊別名
當(dāng)引用一些基礎(chǔ)庫(kù)的時(shí)候，涉及到基礎(chǔ)庫(kù)升級(jí)，在alias中定義這個(gè)模塊時(shí)，修改只需要修改這個(gè)別名配置。

seajs.config({
    alias: {
        jquery: "lib/jquery.1.10.1"
    }
});

模塊中使用

require("jquery");

定義模塊路徑
一些模塊創(chuàng)建目錄結(jié)構(gòu)很深的時(shí)候，可以將這個(gè)層級(jí)定義成一個(gè)簡(jiǎn)寫(xiě)的path， 引用這個(gè)模塊的時(shí)候，直接通過(guò) pathName+模塊名稱(chēng)。

seajs.config({

paths: {
    hd: "./modules/header"
}

});

模塊中使用

require("hd/header.js");

在某些情況下，模塊路徑在運(yùn)行時(shí)才能確定，可以使用 vars 變量來(lái)配置。

seajs.config({
    vars: {
        skin: "header/skin"
    }
});

模塊中使用

require("{skin}/skin.js");  //需要使用 {} 來(lái)標(biāo)識(shí)

映射配置,匹配文件，做映射處理
開(kāi)發(fā)完一些模塊時(shí)候，需要打包或壓縮處理，此時(shí)文件名可能會(huì)不同，可以通過(guò)map映射，來(lái)找到這個(gè)文件，修改成對(duì)應(yīng)的文件名

seajs.config({
    map: [
        ["main.js","main-min.js"]
    ]
});

seajs.use(["main"],function ( main ) {
    // do ...
});

設(shè)置模塊的根目錄
有時(shí)候開(kāi)發(fā)用seajs不一定在當(dāng)前頁(yè)面目錄下，此時(shí)想引用這個(gè)模塊比較麻煩，可以通過(guò)base來(lái)重定義該頁(yè)面模塊文件根目錄。

設(shè)置模塊的編碼格式

seajs.config({
    charset: "utf-8"
});

seajs.config({
  charset: function(url) {

    // xxx 目錄下的文件用 gbk 編碼加載
    if (url.indexOf("http://example.com/js/xxx") === 0) {
      return "gbk";
    }

    // 其他文件用 utf-8 編碼
    return "utf-8";

  }
});

常用的配置項(xiàng)： alias，paths，base

加載js文件

seajs.config({
    //預(yù)加載jquery文件
    preload: ["jquery.js"]
});  

模塊中文件使用

definde(function ( require,exports,module ) {
    $(document).css("background","tan");
});

加載css文件

definde(function ( require,expotrs,module ) {
    require("../css/css.css");
});

引入模塊文件時(shí)候，requirejs是根據(jù)引用了require文件的script標(biāo)簽中data-main屬性對(duì)應(yīng)的文件所在的目錄

傳遞一個(gè)對(duì)象可以
傳遞一個(gè)函數(shù)(commonjs規(guī)范的實(shí)現(xiàn))
區(qū)別 在于module

id表示模塊的id，id沒(méi)有后綴名(注意：seajs有后綴名)  
沒(méi)有依賴(lài)的模塊集合
config配置屬性

在AMD規(guī)范定義的模塊中，沒(méi)有exports參數(shù)，只能通過(guò)return將接口暴露出來(lái)。

return 對(duì)象，這種方式可以將模塊內(nèi)部多個(gè)屬性多個(gè)方法暴露出來(lái)。

return 方法，這種方式將一個(gè)方法返回出來(lái)，引用這個(gè)模塊就是引用這個(gè)接口方法，在它父模塊(引用它的模塊中)可以直接調(diào)用該方法。是在自己模塊的作用域中。

設(shè)置根目錄
用途：有時(shí)候啟動(dòng)文件不在預(yù)期的位置，可以通過(guò)baseUrl來(lái)設(shè)置根目錄

require.config({
    baseUrl: "lib"
});

簡(jiǎn)寫(xiě)路徑

require.config({
    paths: {
        hd: "module/header"
    }
});

當(dāng)存在多個(gè)頁(yè)面，可能每個(gè)頁(yè)面引用代碼庫(kù)不一樣，可以通過(guò)map進(jìn)行配置，對(duì)每個(gè)文件配置不同的代碼庫(kù)文件。

require.config({
    map: {
        //modules 模塊下的dom模塊引用的是lib/dom
        "modules": {
            "dom": "lib/dom"
        },
        //modules-new 模塊下的dom模塊引用的是lib/dom.2.0
        "modules-new": {
            "dom": "lib/dom.2.0"
        }
    }

});

使用css插件

requireJs 加載css 插件

//配置
require.config({
    map: {
        "*": {
            "css": "lib/css"
        }
    }
});  

//使用  

define(["css!css/index.css"],function () {
});

表示配置模塊依賴(lài)關(guān)系
對(duì)于一些定義在全局作用域下的代碼庫(kù)，常常獲取不到這類(lèi)庫(kù)的模塊，此時(shí)通過(guò)定義shim的莫開(kāi)依賴(lài)關(guān)系，可以在模塊中獲取到這類(lèi)代碼庫(kù)。

require.config({
    shim: {
        "lib/jquery": {
            //依賴(lài)的模塊集合
            deps: [],
            expotrs: "$"    
        }
    }
});