require是一个轻量级、按需求、异步加载文件的JavaScript框架。require可以解决传统JavaScript代码开发中的两个问题:
- 避免同时加载多个文件,可以按需、异步加载,加快页面的响应速度。
- 由传统的文件加载式依赖转变成模块化的依赖管理,这种方式更加便于文件的编码管理。
所谓“文件加载式依赖”指的是在传统JavaScript代码开发中,必须保证文件的加载顺序,将依赖性最多的文件放到最后加载。
加载require:
<script src="require.js文件地址" defer async="true" type="text/javascript" data-main="主文件地址"></script>
defer和async的功能都是表示异步加载require.js文件,data-main属性指定加载的主模板文件(不能带后缀)。如:
<script src="require.js" defer async="true" type="text/javascript" data-main="js/main"></script>
require.js中define和require
define是用来定义模块的(注册为require.js中模块),require是用来加载和使用模块的。唯一的区别在于,define的回调函数需要有return语句返回模块对象,这样define定义的模块才能被其他模块引用,require中的回调函数不需要return语句。
require配置选项
require.config方法
- baseUrl:所有模块的查找根路径
- path:映射那些不直接放置于baseUrl下的模块名,设置path时起始位置是相对于baseUrl的
- shim:为那些没有使用define()来声明依赖关系、设置模块的“浏览器全局变量注入”型脚本做依赖和导出配置
- deps:指定要依赖的一个依赖数组
例:
require.config({
baseUrl:"/lib",
paths:{
"jQuery":"jquery-2.1.4.min",
"underscore":"underscore-min",
"backbone":"backbone-min"
},
shim:{
"underscore":{
exports:"_"
},
"backbone":{
deps:["underscore","jQuery"],
exports:"Backbone"
}
}
});
require(["backbone"],function(Backbone){
var person = Backbone.model.extend({
defaults:{
name:"",
sex:"男",
age:0
}
});
var person1 = new person();
person1.set({name:"happy",sex:"女",age:26});
});
===================================================================
扩展知识
AMD标准:
AMD是Asynchronous Module Definition的缩写,意思是“异步模块定义”。它采用异步方式加载模块,模块的加载不影响它后面语句的运行,所有依赖这个模块的语句都定义在一个回调函数中,等到加载完成之后,这个回调函数才会执行。
require([module],callback);
第一个参数[module]是一个数组,里面的成员就是要加载的模块;第二个参数callback是加载成功之后的回调函数。
主要有两个JavaScript库实现了AMD规范:require.js和curl.js
CommonJS:
CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。CommonJS是服务器端模块的规范,node.js就是采用了这个规范。使用require()进行模块引入。