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>

猜你喜欢

转载自jm1999.iteye.com/blog/2275316