requirejs 笔记 快速掌握运用

① requirejs 引入模块

第一步：在index中引入requirejs， 用普通引用方法引入js文件夹中的main（如果用data-main的方法引入文件，根目录就是data-main引入的入口文件为根目录，没有使用data-main方法根目录就是index所在的目录）

第二步：在main入口文件中引入模块文件dom，这里用commonjs推荐的写法，define里面的三个参数：第一个参数是字符串，表示模块的id（一定要和文件地址一致）， 第二个是数组，表示模块的依赖集合，第三个是函数，符合module transports规范

第三步：就是在dom模块中书写一些需要暴露的功能，可以用 1 exports，2 module.exports暴露, 3 return, 4 this（最好不用this,污染全局变量）

② require中模块覆盖关系

如果一个模块中有两个相同的id的模块，以第一个为准

如果一个模块中有两个匿名模块，以第一个为准

如果具有不同id，两个模块是兼容的

 

③require中引入带有id的模块

引入带有id的模块需要修改入口文件中引入方式的写法

此时是用data-main方法引入文件的写法

第一步： 需要在上面define的依赖集合中加载该文件

第二步： 通过define内部的require方法引入指定的id（require中第一个参数是一个依赖集合，第二个参数是一个回调函数，回调函数中的参数，就是指的dom文件中暴露的功能）

④ require的简单配置

1 paths：简化路径

值是一个对象 k：v

k简化后的路径名称，v原始路径

// 使用config进行配置
require.config({
	// 配置路径
	paths: {
		"m": "modules/header/header"
	}
})

require(["m"], function(header) {
	console.log(header);
})

 

2 map ：配置不同文件夹下面都使用简写造成冲突的情况

目的： 我们想让demo下面的dom用js/jquery-1.12.2这个版本

让footer里面的footer用js/jquery100这个版本

// 使用config进行配置
require.config({
	// 配置模块文件
	map: {
		"modules/header": {
		"lib/jquery": "lib/jquery-1.12.2"
		},
		"modules/footer": {
			"lib/jquery": "lib/jquery100"
		}
	},
	// 配置shim
	shim: {
		"lib/jquery-1.12.2": {
			exports: "$",
			deps: []
		},
		"lib/jquery100": {
			exports: "$",
			deps: []
		}
	}
})
require(["modules/header/header", "modules/footer/footer"], function(header) {
	// console.log(header);
})

 

3 用baseUrl改变路径

 

⑤配置shim

shim将不是模块的文件转换为模块

用require.config配置shim属性

shim属性的值是一个json对象，

shim中的JSON对象有两个属性: deps,exports ; deps 为数组,表示其依赖的库, exports 表示输出的对象名，也就是模块的返回值

 

把一个含有函数功能的文件夹转换成模块

require.config({
       shim: {
        "demo/module": {   //这一行写的是函数的文件目录
            exports: "sayHello" //这里sayHello就是文件中函数的名字
        }
    }
})
requirejs(["demo/module"], function(a){
        a("name")  //可以使用函数的方法
   })

我的另一个书写函数的文件里书写的函数方法为：
function sayHello(name) {
    console.log(hi + name);
    
}

require.config({
			// 通常我们在一个页面上会写不止一个函数方法，这个时候我们就需要
			// 把它们都整合在一起，就是用下面这种方法
			shim: {
				"demo/module": {
					init: function() { //这里的init是一个固定的属性名字，改了之后就会报错
					return {
						sayZz: sayZz,
						sayHello: sayHello,
						sayCc: sayCc,
					}	
				}
			}}
		});
		requirejs(["demo/module"], function(a) { //shim一个函数的时候这个a接受的是函数的名字（方法名),如果是多个的话这个a就接收的是接受的函数方法的集合对象！！
			console.log(a)//{sayZz: ƒ, sayHello: ƒ, sayCc: ƒ}
			a.sayZz("zzz")//say zzz
			a.sayHello("changhaotian")//hello changhaotian
			a.sayCc("ccc")//say ccc
		})

		// module 文件中的方法，另存index就不都存了
		function sayHello(name) {
			console.log("hello " + name);
		}
		function sayZz(say) {
			console.log("say " + say);
		}
		function sayCc(say) {
			console.log("say " + say);
		}

⑥模块接口

//暴露接口：

exports.接口= 值类型

module.exports = 值类型

module.exports = {}

module.exports = fn

module.exports.xx = {}

return 值类型

return {}

return fn

define(number)

define(boolean)

define({})

当传入exports module的时候

还可以通过this向外暴露 不推荐

commonjs推荐我们使用return

return 值类型

return {}

return 方法

return fn

这几种方式基于前端模块化开发规范（module transports规范），因为这

几种方式不依赖require，module，exports这三个模块，开发更灵活