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方法之后

模块加载之前

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