如何获取requireJS?
通过github来获取，去github上搜索 RequireJS 进行clone或 zip包下载使用
定义模块
difine来进行定义
引用模块
require来进行加载
加载文件：
RequireJS以一个相对于baseUrl的地址来加载所有的代码。
//定义一个helper模块
define('helper',['jquery'],function($){
return {
trim: function(str){
return $.trim(str);
}
}
});
app.js
//加载helper
require(['helper'],function(helper){
var str=helper.trim(' amd ');
console.log(str);
});
引用：
<script data-main="/js/app/" src="/js/require.js"></script>
配置baseUrl
在app.js上，添加
requirejs.config({
baseUrl:'/js'
});
如果添加上了这句话引入从
<script data-main="/js/app/" src="/js/require.js"></script>
改成
<script src="/js/require.js"></script>
<script src="/js/app.js"></script>RequireJS加载机制
实现一个简单的demo
1、demo目录
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我是默认页面</title> <link rel="stylesheet" type="text/css" href="css/basic.css"> </head> <body> <div> 我是一个居中话的模块 <h1>requireJS和自动打包</h1> </div> <script src="js/require.js"></script> <script src="js/app.js"></script> </body> </html>
require.js
app.js
//自动加载js下面需要的模块 BaseUrl
requirejs.config({
baseUrl:'js'
});
require(['helper'],function(helper){
var str=helper.trim(' amd ');
console.log(str);
});helper.js
define('helper',[],function(){
return {
trim: function(str){
return 'helper:'+str;
}
}
});
/*
模块名 依赖模块 方法实现
define('helper',['jquery'],function(){
return {
trim: function(str){
return 'helper:'+str;
}
}
});*/basic.css
.text-center{
text-align:center;
}界面运行效果：
可以看到，helper: amd 了
相应配置：paths 与 baseUrl结合
我们把目录调整成：
css
js
./lib
./jquery.js
./require.js
helper.js
app.js
baseUrl：需要加载模块的地址
paths：配置与模块名不相关的模块
//自动加载js下面需要的模块 BaseUrl
requirejs.config({
baseUrl:'js',
paths:{
'jquery':'./lib/jquery'
}
});
requirejs.config({
baseUrl:'js',
paths:{
'jquery':[
,//首先路径'https://cdn.bootcss.com/jquery/3.3.1/jquery.js',//如果加载不成功，则加载下面lib/jquery
'./lib/jquery'
]
}
});
require(['helper'],function(helper){
var str=helper.trim(' amd ');
console.log(str);
});paths 后面的引用，可以是 一个字符串路径，也可以是一个数组。
如果是数组，则默认引用第一个，第一个作为首选项，如果加载失败，则使用第二个。
注意事项：paths 后面所有的js 都不需要.js 这个后缀，否则引入不到
定义模块的方式
1、函数式定义
define('helper',['jquery'],function($){
return {
trim: function(str){
return $.trim(str);
}
}
});第一个函数，最佳实践：不写死模块名
define(['jquery'],function($){
return {
trim: function(str){
return $.trim(str);
}
}
});第二个参数：依赖的模块，可有可无
define(function($){
return {
trim: function(str){
alert(str);
}
}
});2、定义简单的对象
define({
username:'james',
name:'james song',
email:'574482856@qq.com',
gender:'boy'
});下面我们通过一个案例说明一下：
通过点击一个按钮，获取相关信息并打印
绑定#user的click 事件，打印出user中的信息。
针对不支持AMD插件的库应该怎么引入
map设置，通过不同的require加载不同模块时，加载不同的文件
引用：
可以改成['./app/api2'] 通过map加载jquery的版本。
map中可以使用* ，只要有需要jquery的话，都是加载jquery。
加载js等待的时间：
waitSecond=7
urlArgs配置
用来干什么呢？控制版本号缓存
看看效果：
传统jsonp与require中的jsonp：
