小知识,大挑战!本文正在参与“程序员必备小知识”创作活动
模块对象
id: 表示的是模块的id, 默认值与uri不一致
uri: 模块的文件地址, 是相对于html文件目录
如果没有data-main属性, 路径的前面会多一个./
config: 配置模块信息的
exports: 暴露功能的接口对象
配置
配置:本身具有这种功能,需要开启, 所以要进行配置
requirejs提供了config方法用于配置模块的
paths
作用:简化路径
值是一个对象
key: 新的路径
value: 原始的路径
// 使用config配置
requirejs.config({
// 配置paths路径
paths: {
"module": "module/header"
}
})
define(["module/header"], function(header) {
console.log(header);
})
shim
举例:
// 使用config配置
requirejs.config({
// 配置shim
shim: {
"lib/jquery-1.12.2": {
// 配置接口
exports: "$",
deps: []
}
}
})
// 定义
define(["module/header/header"]);
map
作用:配置模块文件
属性是一个路径
value 是一个对象
key: 引入的模块文件
value: 修改的模块文件
define 从名字就可以看出这个api是用来定义一个模块
通过define函数定义了一个模块,然后再页面中使用:
// 使用requirejs.config配置
requirejs.config({
// 配置shim
shim: {
"lib/jquery-1.12.2": {
// 配置接口
exports: "$",
// 配置依赖集合
deps: []
},
"lib/jquery100": {
// 配置依赖接口
exports: "$",
// 配置依赖集合
deps: []
}
},
// 配置map
map: {
"module/header": {
"lib/jquery": "lib/jquery-1.12.2"
},
"module/footer": {
"lib/jquery": "lib/jquery100"
}
}
})
define(["module/header/header", "module/footer/footer"]);
baseUrl
作用: 更改根目录的
优先级关系: baseUrl > data-main > require
css插件
requirejs不能直接引入css的文件
在requirejs中引入css要当做模块来引入,需要配置
map {
"*": {
css: 文件目录
}
}
在模块文件中要加上css!前缀
waitSeconds
下载js等待的时间,默认为7秒,超过7秒requirejs抛出错误。如果设为0,则禁用等待超时。
urlArgs
下载文件时,在url后面增加额外的查询参数
举例:
urlArgs: '_=' + (new Date()).getTime() // 下载文件时,在后面增加当前时间戳