RequireJS是实现AMD(异步模块定义)规范的插件之一
所谓异步模块是指定义的这些模块,会被浏览器异步加载,模块的加载不影响他后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
1.RequireJS解决了哪些问题
(1)实现js文件的异步加载,避免网页失去响应
(2)管理模块之间的依赖性,便于代码的编写和维护
2.RequireJS核心接口
(1)data-main:作用是指定网页程序的主模块,require.js在加载的时候会检查data-main属性,如果设置了这个属性,就会获取属性值,根据属性值设置文件路径,找到对应的主模块文件,异步加载这个文件
语法:require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){ // some code here })
(2)require( ):作用 - 异步加载依赖的模块,将所有依赖的模块加载完成后,将各个模块返回值传入回调函数参数中,在回调函数中实现业务逻辑
语法:function (moduleA, moduleB, moduleC){ // some code here }
(3)define( ):作用是定义AMD模块。
用法1:简单的值对 - 如果一个模块仅含值对,没有任何依赖,则在define( )中定义这些值对即可
用法2:函数式定义 - 如果一个模块没有任何依赖,但有一些内部方法和变量,可以将这些放在一个函数中
用法3:存在依赖的函数式定义 - 如果模块存在依赖,第一个参数是依赖的名称数组,第二个参数是函数,在模块的所有依赖加载完毕后,该函数会被调用来定义该模块
语法:define(['moduleA','moduleB'],function(moduleA,moduleB){ })
(4)require.config( ):该函数主要用于配置模块加载的行为
用法:该函数一般都写在main文件的开头部分
语法:require.config({paths:{}, baseUrl : String, })
path:指定各个模块的加载路径
baseUrl:如未显示设置baseUrl,则默认值是加载require.js的HTML所处的位置,如用了data-main属性,则该路径就变成baseUrl
shim属性:为那些没有使用define( )定义模块的插件设置依赖和导出变量名
3.重要注意点
(1)所有模块只会被加载执行一次,即使这个模块被多个模块依赖
(2)一个文件一个模块:每个JavaScript文件应该之定义一个模块,这是模块名-至-文件名查找机制的自然要求,多个模块会被优化工具组织优化,但你在使用优化工具时应将多个模块放置到一个文件中。
(3)路径小知识:
./代表当前目录(可省略不写)
../代表上层目录
../../代表上层目录的上层目录
/代表根目录