HTML移动开发一-RequireJS使用简略说明
目录
HTML移动开发(一) – RequireJS使用简略说明
1、在web开发中，我们引入js文件最常见的写法是：
<script type="text/javascript" src="js/file1.js"></script>
<script type="text/javascript" src="js/file2.js"></script>
<script type="text/javascript" src="js/file3.js"></script>
<script type="text/javascript" src="js/file4.js"></script>
<script type="text/javascript" src="js/file5.js"></script>首先，这样的写法会增加http的请求数，影响其网页加载的速度。其次，如果这个这个js文件是相互依赖的话，那么加载的顺序是不能颠倒的，因为浏览器解析html是自上而下的解析。require.js的出现可以使得js文件异步加载，大大提升了网页渲染的速度，更便于管理模块之间的依赖和管理，便于代码的编写与维护。
2、如何通过require.js去加载文件？
a、首先我们先创建一个主文件index.js,通过require.js去加载这个文件。在这个index.js文件中，我们可以去加载其他的js文件。
在html页面中的引入index.js文件：写法如下
<script type="text/javascript" data-main="
index
.js" src="js/require.js">
b、在主模块中，我们可以添加其他的模块：
index.js的代码如下：
require.config({
baseUrl: './',
//这里的路径是基于index.js文件路径
paths: {
//定义加载模块的路径
text: 'js/text',
//我这里引入的是requireJS的中的文本插件
zepto: 'js/zepto',
//轻量级仿JQ类库，适合在移动web中使用
underscore: 'js/underscore',
//Backbone强烈依赖的类库
backbone: 'js/backbone',
//BackBone
},
//config对象除了path属性之外还有一个shim属性，专门用来引入非规范的模块
shim: {
//以下是引入非规范化JS文件(模块)的写法
backbone: {
deps: ['underscore'],
//这里是数组的形式，说明backbone依赖的是哪些模块
exports: 'Backbone'
//一个变量名，说明在被别的模块调用是缩被使用的变量名称。
},
zepto: {
exports: '$'
},
underscore: {
exports: '_'
},
}
});
//通过上面配置的路径配置和非规范化的配置之后，下面我们可以通过require的方法引入这些模块。
require(['zepto', 'underscore', 'backbone','text'],
function($, _, Backbone,Text) {
console.info("==============");
var el = $(".content");
console.info(el);
}
);说明：require(arr,fn,[fnFail])方法接收两个或三个参数，第一个参数是一个数组，表明这个index.js文件(主模块)依赖哪些模块，这里的是数组可以是上面配置中path对象中的key值，也可以是一个包含有路径的文件，如：“other/js/i18n” 。第二个参数是一个回调函数，这个回调函数会在所有的模块都被加载完之后调用，这个回调函数的参数对应你引用模块的变量，供模块被调用的时候引用。第三个参数也是一个回调函数，当加载模块失败的时候调用的函数。
如上例：我在页面中定义了一个<div class="content"></div> ，在上面的回调函数里可以通过已经引入的zepto模块去获取该div。
综合所述，我们可以在回调函数里面做一些相应的操作了。