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'); } } })