为什么要使用RequireJS?
JS阻塞浏览器渲染。打开浏览器时首先会执行js文件
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<span>body</span>
</body>
</html>
a.js
function fun1(){
alert("it works");
}
fun1();
alert执行的时候,html内容是一 片空白的,即<span>body</span>
并未被显示,当点击确定后,才出现。
requirejs具有如下优点:
(1)实现js文件的异步加载,避免网页失去响应;
(2)管理模块之间的依赖性,便于代码的编写和维护。
require会定义三个变量:define,require,requirejs,其中require === requirejs
define 用来定义一个模块
require 加载依赖模块,并执行加载完后的回调函数
a.js
define(function(){
function fun1(){
alert("it works");
}
fun1();
})
通过define函数定义了一个模块
require(["js/a"]);
来加载该模块(注意require中的依赖是一个数组,即使只有一个依赖,你也必须使用数组来定义),require API的第二个参数是callback,一个function,是用来处理加载完毕后的逻辑,如:
require(["js/a"],function(){
alert("load finished");
})
require.config
,require.config
是用来配置模块加载位置,简单点说就是给模块起一个更短更好记的名字,比如将百度的jquery库地址标记为jquery
,这样在require时只需要写["jquery"]
就可以加载该js:
require.config({
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],
"a" : "js/a"
}
})
require(["jquery","a"],function($){
$(function(){
alert("load finished");
})
})
baseUrl:配置加载文件的根路径
require.config({
baseUrl : "js"
})
paths:库或者框架指定路径
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
"a" : "js/a"
}
这样配置后,当百度的jquery没有加载成功后,会加载本地js目录下的jquery
shim:配置不支持AMD的框架和库,或jquery插件
通过require
加载的模块一般都需要符合AMD规范即使用define
来申明模块,但是部分时候需要加载非AMD规范的js,这时候就需要用到另一个功能:shim,
1. 非AMD模块输出,将非标准的AMD模块"垫"成可用的模块,例如:在老版本的jquery中,是没有继承AMD规范的,所以不能直接require["jquery"],这时候就需要shim,比如我要是用underscore类库,但是他并没有实现AMD规范,那我们可以这样配置
require.config({
shim: {
"underscore" : {
exports : "_";
}
}
})
这样配置后,我们就可以在其他模块中引用underscore模块:
require(["underscore"], function(_){
_.each([1,2,3], alert);
})
- 插件形式的非AMD模块,我们经常会用到jquery插件,而且这些插件基本都不符合AMD规范,比如jquery.form插件,这时候就需要将form插件"垫"到jquery中:
require.config({
shim: {
"underscore" : {
exports : "_";
},
"jquery.form" : {
deps : ["jquery"]
}
}
})
也可以简写为:
require.config({
shim: {
"underscore" : {
exports : "_";
},
"jquery.form" : ["jquery"]
}
})
这样配置之后我们就可以使用加载插件后的jquery了
require.config(["jquery", "jquery.form"], function($){ $(function(){ $("#form").ajaxSubmit({...}); }) })
map:
waitSeconds: 下载js等待的时间,默认为7s。(如果下载时间超过7s,则将抛出异常)如果为0,则禁用等待超时。
urlArgs: 下载文件时,在url后面增加额外的query参数。
urlArgs:'_='+new Date().getTime()
文章来源:https://github.com/liuxey/blog/issues/2