RequireJs模块对象和配置

791 阅读1分钟

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

模块对象

id: 表示的是模块的id, 默认值与uri不一致

uri: 模块的文件地址, 是相对于html文件目录

如果没有data-main属性, 路径的前面会多一个./

config: 配置模块信息的

exports: 暴露功能的接口对象

图片1.png

配置

配置:本身具有这种功能,需要开启, 所以要进行配置

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