requirejs配置代码示例

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

引入方式 ：

 

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

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

 

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

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

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

模板加载器

// 处理模块间的依赖
                    //按照顺序加载                                                   //引用时的命名
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');
        }
    }
})

 

转载于:https://www.cnblogs.com/Model-Zachary/p/6098921.html