require.js模块加载器的基本用法

require.js是一种基于AMD规范的模块加载器，至于什么是AMD规范，就不在这里详细描述了，有兴趣了解的可以去问度娘(^_^)

 

主要用到的就是两个方法：defind, require...

 

require.config()    //  定义requirejs的相关配置

如:

 

requirejs.config({

   // 定义参数后缀，当require加载其他js文件时，会追加在请求url后，见下图

    urlArgs: "v="+new Date().getTime(),

   // 主目录,表示通过require加载的文件都是基于此目录下的文件

    baseUrl:"",
   // 定义模块映射,后面直接通过对应的key(如:"jquery")来引用模块

    paths: {

        C: 'js/common/common', 
        jquery: "lib/jquery.min"    
    },
   // 定义模块依赖

   shim: {       
// 表示js/common/common.js文件依赖jquery,requirejs在加载common.js时会自动先加载jquery,再加载common.js

       C: ['jquery'],  // 定义模块依赖的简写，也可以写为: C:{ deps:["jquery"]  }

       jquery: {

                exports: 'jQuery'

            }

   }

});

 

shim属性，专门用来配置不兼容的模块。

  （1）exports值（输出的变量名），表明这个模块外部调用时的名称；

  （2）deps数组，表明该模块的依赖性。

 

 

define 定义模块

参数：([模块名]，[依赖项], 回调方法)

 

如：

controller/index.js

=====

// 如果有依赖的js模块可以写在“[]”内，如["jquery"],没有依赖项，则可以不传这个参数

define([“jquery"], function($){
   return {    // 将需要抛出给外部调用的对象return出来
       init: function(){
            console.log($("body").height());  // 输出body的高度
      }
   }
})

 

require 引入模块

参数：([模块名]，回调方法)
如：

main.js

=====

// 引入controller/index

require(["controller/index"], function(indexController){
         indexController.init();  // 调用controller/index.js中定义的init方法
});

 

页面用法：

如： index.html

在页面中引入require.js（data-main：定义require.js的主入口模块）

<script type="text/javascript" src="require.js" data-main="src/main"></script>

或者：
<script type="text/javascript">
   require(["controller/index"], function(indexController){
           indexController.init();  // 调用controller/index.js中定义的init方法
   });
</script>