① 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这三个模块,开发更灵活