Seajs 模块化 require 模块 基础详解

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;
})