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。

     综合所述，我们可以在回调函数里面做一些相应的操作了。