RequireJs模块对象和配置

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

模块对象

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() // 下载文件时，在后面增加当前时间戳
复制代码