seajs 介紹–CMD

是國內的一套模組化開發框架，有淘寶工程師王伯寫的，有中文文件，學習簡單 開原始碼庫 https://github.com/seajs/seajs Seajs出現的比較晚，因此借鑑了，nodejs的commonjs規範（載入時同步的），但是前端使用檔案是要非同步載入檔案的，載入完成之後才能使用，又借鑑了前端的AMD規範，seajs的規範稱之為cmd規範，這套框架在使用的時候，建議我們使用commonjs規範

1.1： seajs

引入seajs之後會向全域性暴露二個變數：seajs  和define

在模組化外部引入其他的模組要使用use方法 第一個引數是模組化檔案的地址，是陣列，陣列中的每一項都是一個模組地址（如果引入的只有一個檔案，可以省略陣列）

第二個引數：回撥函式： 函式中的引數就是前面模組向外暴露的功能，作用域：window seajs引入的檔案的路徑是相對於seajs所在的檔案目錄（seajs所在的目錄就是根目錄），通常我們將seajs放在最外面（與index.html）同一目錄，為了引用seajs方便

seajs對JS檔案敏感，因此可以省略JS的字尾名稱

1. seajs本身就是一個物件，物件中包含各種功能函式以及相關資訊
2. seajs.config 是規定如何配置模組的
3. seajs.use 是規定如何使用模組的

1.2：定義模組：define函式

一：傳遞一個引數

define 函式用來定義模組的，可以接受三個引數！

因此提供傳遞的是值型別的時候（數字，字串，Boolean），這種傳遞資料的方式會直接作為介面暴露出來

define(1);

傳遞的是引用型別的時候（arr，obj） 也是作為介面直接暴露出來

define("abc");

傳遞一個函式的時候（fn），fn有三個引數：

1. require 用來引入其他模組
2. exports 向外暴露功能
3. modules 模組資訊 作用域是window

二：傳遞二個引數

第一個引數： 如果是字串：表示模組的ID 如果是陣列：表示模組依賴的集合

第二個引數：回撥函式

define("abc", function() {
define("modules/main", function() {
	console.log(this);
	console.log(arguments);
})
 

 define(["modules/dom"], function() {
	console.log(this);
	console.log(arguments);
})
 

三：傳遞三個引數

第一個引數：字串表示模組的ID 第二個引數：陣列表示模組的集合 第三引數：回撥函式

define("abc", ["modules/dom"], function() {
define("modules/main", ["modules/dom"], function() {
	console.log(this);
	console.log(arguments);
})

1.3：require：模組

在一個模組中想要引入其他模組分為兩步： 第一步：找到這個模組對應的檔案 第二步：在這個檔案中讀取這個模組 require是根據模組的ID載入這個模組的

注意

1. require：不能簡寫
2. require：不能被修改
3. require：不能被賦值
4. require：不能賦值給其他的變數
5. require：不能作為子函式的引數傳遞
6. require：不能在子函式中修改
7. require：引數只能是一個字串，不能拼接

// require不能被簡寫
define(function(req, exports, module) {
	// 引入color.js
	var color = req("js/color");
	console.log(color)

})

// require不能被修改
define(function(require, exports, module) {
	// 1 require不能被賦值
	require = 123;
	// 2 requier不能賦值其它變數
	var a = require;
	// 3 不能在子函式中作為引數傳遞
	function demo(require) {
		// 4 require不能在子函式中修改
		require = 123;
		var color = require("js/color");
		console.log(color)
	}
	demo(require);
	// 引入color.js
	var color = a("js/color");
	console.log(color)
})

//不能拼接
define(function(require, exports, module) {
	// 引入color.js
	var color = require("js" + "/" + "color.js");
	console.log(color)
})

1.4：載入具有id的模組

載入具有id的模組需要分兩步走： 第一步：在依賴集合中載入該模組 第二步： 通過require去載入指定的ID模組

<script type="text/javascript">
	// 使用use方法引入main.js
	seajs.use(["js/main"], function(main) {
	})
	</script>

一個引數：
define(function(require, exports, module) {
	var dom = require("js/dom");
	console.log(dom);
})

二個引數：
define(["js/dom"], function(require, exports, module) {
	var dom = require("myid");
	console.log(dom);
})

如果一個模組檔案中有兩個相同的ID的模組，前面的會覆蓋後面的

define("myid", function(require, exports, module) {
	exports.a = 11;
})
define("myid", function(require, exports, module) {
	exports.a = 10;
})

如果一個模組檔案中有兩個沒有id的模組，後面的會覆蓋前面的

//兩個沒有id的模組
define(function(require, exports, module) {
	exports.a = 11;
})
define(function(require, exports, module) {
	exports.a = 10;
})

一個模組檔案可以存在多個具有id的模組，引入的模組是以指定的id模組為準

// 兩個不同id的模組
define("myId", function(require, exports, module) {
	exports.a = 10;
})
define("myId1", function(require, exports, module) {
	exports.a = 11;
})