Require.js总结

Require.js规范

Requirejs是第一个模块化开发框架，提出了Module transports (模块传送)规范，基于前端模型的一个规范（加载时候都是异步的），又借鉴Nodejs,也支持commonjs规范，requirejs推荐使用commonjs规范，Requirejs是基于AMD规范

Require.js使用

想要使用requirejs与seajs是一样的要在页面中引入文件

两种引入方式

根目录：

如果有data-main属性，此时是以data-main的属性值为根目录

如果没有data-main属性，则是以html文件所在的目录为根目录

Require.js定义模块

requirejs中也提供了一个define方法，用来定义模块：

可以传递一个参数

如果是字符串，这种方式不支持

对象也是支持的，但是不支持数组

当传递一个函数的时候，此时函数遵循的是commonjs规范，requirejs提供了参数注入的技术，如果想要使用哪个模块，就必须注入哪个模块

dom.js文件中

当没有注入exports和module的时候

作用域是全局作用域

当注入了exports和module的时候

作用域是向外暴露功能的对象

传递参数

//传递参数
define("dom", function(require, exports, module) {console.log(this, arguments);
})

可以传递两个参数：

第一个参数是一个字符串，表示模块的id

第一个参数还可以是数组，表示模块的依赖集合

第二个参数回调函数

如果第一个参数是字符串，此时函数遵循的是commonjs规范(同上面传递一个函数中的表现形式一致)
如果第一个参数是数组，此时函数遵循的是module transports规范，想要使用哪个模块，就必须在依赖集合中去注入，包括内置模块（require，exports, module）

如果没有注入exports和module

作用域是全局作用域

如果注入了exports和module

作用域是向外暴露功能的对象

// 传递两个参数 第一个参数是字符串
define("dom", function(require, exports, module) {console.log(this, arguments);
})// 传递两个参数 第一个参数是一个数组
define(["color", "require", "exports", "module"], function(color, require, exports, module) {// console.log(this, arguments);console.log(color);console.log(require);console.log(exports);console.log(module);
})

传递三个参数

第一个参数字符串，表示模块的id

第二个参数是数组，表示模块的依赖集合

第三个参数回调函数，此时函数遵循module transports规范（同上面的函数表现形式一致）

在module transports规范中定义的模块文件名称不要与内置模块(require, exports, module)是相同的

// 传递三个参数
// define("abc", ["color"], function() {
define("dom", ["color", "require", "exports", "module"], function(color, require, exports, module) {console.log(this, arguments);
})

加载具有id的模块

模块的覆盖关系

如果一个模块文件中存在两个没有id的模块，上面的模块覆盖下面的模块

如果一个模块文件中存在两个具有id的模块，上面的模块覆盖下面的模块

如果一个模块文件中存在两个不同id的模块，可以是同时存在的，以require指定的id为准

接口定义

exports.接口

module.exports.接口

module.exports = 值类型

module.exports = 对象

module.exports = 函数

以上几种方式是基于commonjs规范的，在requirejs中同样适用

return 值类型

return 对象

return 函数

这几种方式是module transports规范，因此它们不依赖于require, exports,module 开发更灵活

define（值类型）字符串是不支持的

define(对象) 这种方式也支持

除了以上几种方式之外，当注入exports和module的时候，作用域是向外暴露功能的对象

diomjs中写入的方法 mainjs入口 html获取mainjs

// 定义模块
// commonjs规范
define(function(require, exports, module) {第一种定义接口的方式exports.title = "nihao";以下方式是绝对不允许使用exports = {}第二种定义接口的方式module.exports.title = "nihao";3module.exports = 123;4module.exports = {num: 100}5这种方式向外暴露的内容，外部要作为方法使用module.exports = function() {console.log("success");}
})// module transports规范
define([], function() {6return 123;7return {a: 1,b: 2}8return function() {console.log("success");}
})// 9
define(123);// define("abc"); // 这种方式不允许define(true);// 10
define({a: 1,b: 2
})// 当注入exports和module的时候作用域是向外暴露功能的对象
define(function(require, exports, module) {// console.log(this, arguments);this.color = "red";
})

模块信息对象

id: 模块的id，默认与uri不一致

uri: 表示模块的文件路径，相对于html文件的

如果没有data-main属性，会在路径的前面多个./

config：用于定义配置信息

exports: 向外暴露功能的对象

配置

requirejs提供了config方法进行配置信息

paths

作用：简化文件的路径

值是一个对象

key: 新的文件名称

value：原始文件名

shim

用于将文件转为模块的

key: 模块的文件路径

vlaue是一个对象

exports: 配置向外暴露的对象

deps: 配置依赖集合

map

作用：配置模块文件的

key: 模块的文件路径

value是一个对象

key: 引用的模块文件

value: 匹配的模块文件

baseUrl

改变根目录权重

baseUrl > data-main > require

根据html根目录

加载css插件

在requirejs中不能直接引入css文件

要做为模块来引入，所以要进行配置

require.config({

map: {

“*”: {

“css”: 文件目录

}

})

在引入css文件的模块中要加上css!前缀