【www.bbyears.com--js教程】
一. 为什么要用requireJS
随着项目发展,JS文件越来越大,需要分成多个js文件。
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
首先,上面这种方式网页加载的时候,浏览器会停止对网页的渲染,加载文件越多,网页失去响应的时间就会越长;
其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序,依赖性最大的模块一定要放到最后加载。
requireJS就很好的解决了上面两个问题
1).实现js文件的异步加载,避免网页失去响应。
2).管理模块之间的依赖性,便于代码的编写和维护。
二.什么是requireJS
1. RequireJS是一个javascript文件和模块框架,可以从http://require.org下载,它支持浏览器和像node.js之类的服务器环境。使用requireJS,可以顺序读取相关依赖模块。
<script src=’js/require.js’ defer async=true></script>
async属性表示这个文件需要异步加载,避免网页失去响应。defer只兼容IE,所以把defer也写上。
2. <script src=”script/require.js” data-main=”scripts/main”></script>
data-main属性:指定网页程序主模块,当requireJS被加载的时候,他会使用data-main属性去搜寻一个脚本文件即main.js。这个文件会第一个被require.js文件加载。
data-main需要给所有的脚本文件设置一个根路径。根据这个根路径,requireJS将会去加载所有相关的模块。由于require.js默认文件后缀是js,所以可以把main.js简写成main。
RequireJS所做的是,在使用script标签加载你定义的依赖时,将这些依赖通过head.appendChild()函数来加载他们。当依赖加载以后,RequireJS计算出模块定义顺序,并按正确的顺序进行调用。这意味着你仅仅只定义一个‘根’来读取你所需要的依赖,为了正确使用这些依赖,require.js加载的模块都需要使用RequireJS的API,也就是模块必须采用特定的define()函数来写模块。
RequireJS API存在于requireJS载入时创建的命名空间requirejs下,就是AMD规范的运用。AMD就是一种对模块的定义,使模块和它的依赖可以被异步加载,但又按照正确的顺序。API 主要是下面三个函数:
define:该函数主要用于创建模块。
require:该函数用于读取依赖。
config:该函数用于配置requireJS
如果一个模块不依赖其他模块,那么可以直接定义在其define()函数之中:
假如现在有一个math.js文件,定义了math模块,那么定义math.js如下:
//math.js
define(function(){
var add=function(a,b){
return a+b;
};
})
//加载math.js模块
require(["math"],function(math){
alert(math.add(1,2));
});
如果math还依赖其他模块,那么define()函数的第一个参数必须是一个数组,指明该模块还依赖其他模块。
当require()函数加载math模块的时候,就会先加载math依赖的模块。
3. 加载完require.js后,来看一下如何通过require.config函数来配置main.js需要加载的模块。
config的参数就是一个对象。这个可选参数对象包括了许多配置参数选项。下面是一些可以使用的配置:
baseUrl——用于加载模块根路径。
paths——用于映射不存在根路径下面的模块路径。
shims——配置模块外面并没有使用RequireJS的函数定义时,但是你还是想通过requireJS来使用他。那么就需要在配置中把它定义为一个shim.
exports—— 输出的变量名,表示这个模块外部调用时的名称
deps——加载依赖关系数组。
require.config({
baseUrl:"application/views/frontEnd/build/"
,paths:{ //paths用于映射不存在根路径下面的模块路径
text:"lib/require/text"
,jquery:"lib/jquery-1.9.0.min"
}
,shim:{ //专门用来配置不兼容的模块
"jquery": {
exports: "jquery" //exports 输出的变量名,表示这个模块外部调用时的名称
}
,"jquery_icheck": {
deps: ["jquery"] //deps数组,表明该模块依赖上面的jquery模块。
,exports: "jquery_icheck"
}
}
});
三.require.js的插件
domready插件,可以让回调函数在页面DOM结构加载完成后在运行。
text和image插件,允许require.js加载文本和图片:
define([
"text!oTxt.txt",
"image!oImg.jpg"
],function(){
document.body.appendChild(oImg);
document.write(oTxt);
});
四.一、简单事例的项目目录如下:
-index.html
-scripts文件夹
–controller文件夹
— mianController.js
— controller1.js
—controller2.js
–directives文件夹
—mainDirective.js
—directive.js
–app.js
–router.js
–main.js
回到顶部
二、首页
首先你的index.html大概如下
<script type="text/javascript" src="../scripts/lib/require.js" data-main="../scripts/main.js"></script>