Require.js总结

ゞ浴缸里的玫瑰 2021-09-02 06:53 385阅读 0赞

### Require.js规范 ###

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

### Require.js使用 ###

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

两种引入方式

根目录：

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

![20200909232749631.png][]![20200909232934851.png][]

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

![20200909232823784.png][]

![20200909232937468.png][]

### Require.js**定义模块** ###

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

可以传递一个参数

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

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

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

![20200909233222264.png][]

![20200909233234291.png][]

dom.js文件中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70][]

当没有注入exports和module的时候

作用域是全局作用域

当注入了exports和module的时候

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

**传递参数**

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

![20200909233638415.png][]

可以传递两个参数：

第一个参数是一个字符串，表示模块的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的模块** ###

![20200910001327629.png][]

![20200909234353479.png][]

![20200910001239166.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 1][]

![20200910001313150.png][]

## **模块的覆盖关系** ##

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

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

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

![20200910001414349.png][]

![20200910001404619.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 3][]

### 接口定义 ###

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";
    
    	3
    	module.exports = 123;
    
    	4
    	module.exports = {
    		num: 100
    	}
    
    	5
    	这种方式向外暴露的内容，外部要作为方法使用
    	module.exports = function() {
    		console.log("success");
    	}
    })
    
    // module transports规范
    define([], function() {
    	6
    	return 123;
    
    	7
    	return {
    		a: 1,
    		b: 2
    	}
    
    	8
    	return 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: 向外暴露功能的对象

![20200909234820578.png][]

### **配置** ###

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

### **paths** ###

作用：简化文件的路径

值是一个对象

key: 新的文件名称

value：原始文件名

![2020090923505266.png][]

![20200909235146912.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 4][]

### **shim** ###

用于将文件转为模块的

key: 模块的文件路径

vlaue是一个对象

exports: 配置向外暴露的对象

deps: 配置依赖集合

![20200909235345271.png][]

![20200909235438222.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 5][]

### **map** ###

作用：配置模块文件的

key: 模块的文件路径

value是一个对象

key: 引用的模块文件

value: 匹配的模块文件

![20200909235626869.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 8][]

### **baseUrl** ###

改变根目录 权重

baseUrl > data-main > require

根据html根目录

![20200910000148119.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 9][]

### **加载css插件** ###

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

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

require.config(\{

map: \{

“\*”: \{

“css”: 文件目录

\})

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

![20200910000626998.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 10][]

![20200910000638239.png][]

[20200909232749631.png]: https://img-blog.csdnimg.cn/20200909232749631.png
[20200909232934851.png]: /images/20210813/8cf78807ea324e0ab9332712bdd23e23.png
[20200909232823784.png]: /images/20210813/9db6587b0fc44eae84358e0a456bcbf1.png
[20200909232937468.png]: /images/20210813/2d4ddf87181a4c93ae10d5a55a79679e.png
[20200909233222264.png]: /images/20210813/bcd70c3d6d2e44a1a8effa3e536f685f.png
[20200909233234291.png]: /images/20210813/f86d3752a20643e9bd1d3ae1bf6aa2cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70]: /images/20210813/07c4cc31a19444dcb22a3ab5d461168c.png
[20200909233638415.png]: /images/20210813/cb4d6a6fe97047e3a3179578be8611a1.png
[20200910001327629.png]: /images/20210813/e7cd0e3bd1d34a76910a012de760c92a.png
[20200909234353479.png]: /images/20210813/436d8c62604b4e8fafd43fb422006d80.png
[20200910001239166.png]: /images/20210813/1bd9273bd69847c9a012509034b35844.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 1]: /images/20210813/32811b216f814a6f9a8f9b605ca5457e.png
[20200910001313150.png]: /images/20210813/2447c7f4321d48d2a5588abc0cac88dc.png
[20200910001414349.png]: /images/20210813/0948f7366b1f4ee5bd725229c9a88925.png
[20200910001404619.png]: /images/20210813/7c6a840ae49c43e9947130d909dd73de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 2]: /images/20210813/84b7c034f90b436188ab9e98de85b4da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 3]: /images/20210813/a206058074744492ae454727e8cb4cb3.png
[20200909234820578.png]: /images/20210813/97cb778c2a80485cb77d16ff48f19215.png
[2020090923505266.png]: /images/20210813/faf8b21113484236881093333628c6f9.png
[20200909235146912.png]: /images/20210813/97a83f889282443b933554b478cee15a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 4]: /images/20210813/385e82560efa47e5bc00b53c28b3855b.png
[20200909235345271.png]: /images/20210813/21307fc5b452408aa17a2b8ba24b6bc1.png
[20200909235438222.png]: /images/20210813/265e2ca636934af9a2cda583932effe3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 5]: /images/20210813/f2b159998695481ab1fc89f8f17ab536.png
[20200909235626869.png]: /images/20210813/c577df2e9fc14f4b861a01d4b0d53ace.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 6]: /images/20210813/bc6de7e339224b58af13cc526ba002e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 7]: /images/20210813/62bdad97ba61459c8445b2737afaebc1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 8]: /images/20210813/3aec4d2d52574d78a62dc4d08548ec00.png
[20200910000148119.png]: /images/20210813/5e2bc4ac3b634ff4b58e39de0637fc02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 9]: /images/20210813/a51d1ec2adca4fbfa87cd99a27aac2f7.png
[20200910000626998.png]: /images/20210813/37810752bb484375b24d06f82dcbf30e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 10]: /images/20210813/22b41d08698a407cb928a0033bc5a31f.png
[20200910000638239.png]: /images/20210813/0e906646d0054bc8ab6ab4e46ba883ed.png