requirejs配置代码示例

requirejs大致用法：通过定义模板define()再通过require()或requirejs()加载模板,
paths是路径，如果路径长可以把它赋一个短名称加入ruquire()中，shim是兼容处理的，查看

index.html里面不需要其他引入js的script标签,除了这个
<script data-main= 'js/main' src='js/require.js"></script>

在main.js中进行文件的配置,并调用入口函数
requirejs.config({
    baseUr: ‘’,
    shim: {

    )，
    paths: {

   }
});

定义模块
define(function(){ });

处理模块间的依赖
requirejs("modA", "modB", "modC"], function(modA, modB, modC) {
    var a = modA.funName();
    var b = modB.valName();
    var c = modC.objName. propName;
);

引入方式 ：

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

   data-main="js/main"  直接引入这个配置文件会异步加载  

data-main是导入require配置好的模板在里面把引入的主次依赖关系弄好，就可以达到引入一个js文件，
其他文件也能被间接的引入进来，这也是requirejs要达到的目的

路径及兼容配置，路径端可以直接下载模板加载器require()里

require.config({
      baseUrl:"js", //文件基础入口 写了这个引入所有文件都已这个作为根目录
      shim:{
                 // 兼容处理
      },
      paths:{  //配置现成路径 也可以引入网上的CDN
          // jquery:'jquery/jquery.min' //,可以直接映射到下面的require()模板加载器中，用你命名的文字 
         //加载cdn上的资源 最后没加载到就加载本地的 ，除了这个依赖前置，还可以在依赖的文件中写入，就是直接在define中写入依赖也就是就近依赖,
         // jquery : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"]  
      }
 })

模板加载器

// 处理模块间的依赖
                    //按照顺序加载                                                   //引用时的命名
require(['jquery','util/util1','util/util2','moths/moth1','plugins/nav'],function(util1,util2,moth1){
            util1.hide(); //调用util1对象属性  util1内容在下方
            util2(); //调用util2对象方法  util2内容在下方
             $('body').append('<h1>jquery test</h1>')

})

模板define

// 定义模块 define([''],function(){  [''],可写可不写，看你有没有依赖项

 })

模板只是加了define(),js该怎么写还是怎么写，他也可以像加载器require一样加载依赖模板

 define([jq/js],function(){ $('body').css('backgroundColor','red'); })
 这样写说明他们存在依赖，依赖jquery，还有一点[jq/js]路径以设置的baseUrl为主入口

util2模板文件内容

define(function(){
    var util2 = function(){
        console.log('util2...')
    }
     return util2; //return的是方法调用时直接方法名()
 })

util1模板文件内容

define(function(){
    // console.log('util1...')
    return { //return 的是属性 调用时用形参.对象属性()
        show:function(){
            console.log('show');
        },
        hide:function(){
            console.log('hide');
        }
    }
})