seajs的使用

在模块文件外部想要引入一个模块文件要使用seajs.use方法

该方法接收两个参数

第一个参数是一个数组， 数组中的每一项都是一个模块文件路径（当引入的只有一个文件的时候， 可以省略数组）

第二个参数是回调函数

回调函数中的参数就是前面模块向外暴露的功能（一一对应的）

 

根目录：

seajs引入的文件路径是以seajs所在的目录决定的（seajs所在的目录就是根目录）

通常我们要把seajs文件放在最外面与index.html文件在同一级

为了引入文件方便

 

seajs遵循cmd规范

 

seajs对js文件敏感，因此可以省略.js后缀

 

seajs.use方法： 规定了如何使用模块   参数   1：数组 [路径]   如果只引入一个可以不写数组       2：回调函数

 

seajs.config方法： 规定了如何配置模块

 

// 引入main.js入口文件
seajs.use(["module/js/main","module/js/jquery.js"], function(main,jq) {
	console.log(main,jq);
});

 

定义模块

// 传递函数

define(function(require, exports, module) {

｝

 

 

 require模块  写在定义模块中

在一个模块文件中引入其它模块要分为两步走

第一步要通过require方法引入模块文件

第二步要通过模块文件读取该模块

 require不能简写

 require不能被修改

 reuqire不能被赋值

 require不能赋值给其他变量

不能作为子函数中的参数传递

不能在子函数中被修改 （以上3点）

接口定义：

exports.接口

module.exports.={}

module.exports = 值类型

module.exports = 对象

module.exports = 函数

 

 

加载具有id的模块

如果一个模块中存在显示的id, 此时将无法直接使用

如果想要加载具有id的模块要分为两步走

第一步通过模块的依赖集合加载该模块文件

第二步通过require方法指定模块的id

 

当一个模块文件中存在两个相同id的模块，前面的覆盖后面的模块

当一个模块文件中存在两个没有id的模块，后面的模块覆盖前面的

当一个模块文件名中存在多个相同id的模块，可以同时存在，引入的模块是以require为准

 

模块信息对象

每一个模块都有一个对象用来保存模块的信息

dependencies: 是模块的依赖集合，是一个数组， 数组中的每一项都是集合中的成员

deps: 是根据依赖集合产生的

exports: 定义向外暴露功能的对象

id: 表示模块的id

status: 表示模块的状态

uri: 表示模块的文件路径，默认情况下（没有显示的id）与模块的id是一致的

异步加载模块

在浏览器端使用一个文件的时候，要到服务器端去加载， 这个过程是异步的，seajs为了实现这样的功能，在模块的内部提供了可以异步加载模块文件的方法: seajs.async方法

该方法可以实现在模块内部异步的加载模块文件

接收两个参数：

第一个参数是模块的依赖集合

如果是一个字符串，表示一个模块文件

如果是一个数组， 表示多个模块文件

第二个参数是模块函数

函数中的参数就是前面模块向外暴露的功能并且是一一对应的

require.aync加载的模块只能在模块内部使用，再模块外部不能够被访问

require.async与seajs.use方法是一致的，只不过seajs建议我们:

在模块的外部要使用seajs.use方法

在模块的内部要使用require.async方法

requrie.async方法和seajs.use方法一样不能够加载具有id的模块

但是我们可以利用依赖集合成功的使require.async方法加载具有id的模块

// 定义模块
define(function(require, exports, module) {
// define(["module/dom"], function(require, exports, module) {
	// 通过requrie方法引入其他模块文件
	// var dom = require("module/dom");
	
	// 异步加载
	// var dom = require.async(["module/dom", "module/color"], function(dom, color) {

	var dom = require.async("module/dom", function(dom) {
		// console.log(this, arguments);
		console.log(dom);
	});



})

配置

 alias

作用： 简化文件的引用

例如： 文件名称过长，我们可以简化它

值是一个对象

key: 新的文件名

value: 原始文件名

// 使用config方法进行配置
seajs.config({
	// 配置alias
	alias: {
		"jquery": "module/js/jquery-1.7.2"
	}
})
// 引入jquery
seajs.use("jquery", function(jq) {
	console.log(jq);
})

paths

作用: 简化文件路径

例如: 文件路径过长，我们可以简化它

值也是一个对象

key: 新的文件路径

value: 原始路径

// 配置
seajs.config({
	// 配置paths
	paths: {
		"module": "module/js"
	}
})
// 引入jquery
seajs.use("module/jquery-1.7.2", function(jq) {
	console.log(jq);
})

 

map

用于：批量处理文件的

值是一个二维数组

数组中的每一项都是一个数组

数组中的第一项表示要匹配到的文件

数组中的第二项表示要修改的文件

比如压缩之后的文件都是带有.min.js后缀，我们可以通过map进行配置， 配置哪些文件可以带有.min.js， 哪些文件可以不需要带.min.js

// 使用config方法进行配置
seajs.config({
	// 配置map
	map: [
		["jquery.js", "jquery.min.js"]
		// [".js", ".min.js"]
	]
})
// 引入main.js入口文件
seajs.use("module/js/main");




// 这里是入口文件
define(function(require, exports, module) {
	// 引入jquery.min.js
	var jq = require("module/js/jquery");
	console.log(jq);
})

vars

作用： 解决字符串不能拼接的问题

值是一个对象

key: 模板变量名称

value: 模板变量名称对应的值

// 使用config方法进行配置
seajs.config({
	// 配置vars
	vars: {
		"q": "query"
	}
})
// 引入main.js入口文件
seajs.use("module/js/main");

base

// 进行配置
seajs.config({
	// 配置base
	base: "module/js"
})
// 引入main.js入口文件
seajs.use("main", function(main) {
	console.log(main);
});

加载css插件

加载css插件使用起来非常简单

第一步要在seajs.js文件之后引入seajs-css.js文件

第二步直接在模块中加载css文件即可

seajs对js文件敏感，但是对css文件不敏感，所以要加上.css拓展名

define(function(require, exports, module) {
	// 引入index.css文件
	require("module/css/index.css");
})

预加载文件

使用预加载文件也非常简单

第一步要在seajs文件之后引入seajs-proload.js文件

第二步要进行配置，配置proload

值是一个数组， 数组中的每一项都是要预加载的文件

我们就可以使用这些预加载的文件

预加载文件的加载时间点

是seajs.use方法之后

模块加载之前

通常，我们要将预加载的文件尽量放在最前面进行配置

<script type="text/javascript" src="sea.js"></script>
<!-- 第一步要在sea.js文件之后引入seajs=preload.js -->
<script type="text/javascript" src="seajs-preload.js"></script>
<script type="text/javascript">
// 进行preload配置
seajs.config({
	preload: ["jquery-1.7.2"]
})

//引入mian.js
seajs.use("main", function(main) {
	console.log(main);
	console.log($);
})
	</script>