javascript数据加载中特效大全 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>