.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script data-main="main.js" src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js"></script><!-- 同步加载，会导致页面失去响应一段时间 -->
<script data-main="main.js" src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js" defer async="true"></script><!-- 异步加载，defer兼容IE -->
</head>
<body>
<div></div>
<script>
/**
* requireJs主要解决两个问题
* 1. 实现js文件的异步加载，避免网页失去响应
* 2. 管理模块之间的依赖性，便于代码的编写维护
*
* requireJs加载分3部分
* 1. 引入：<script data-main="libs/main.js" src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js">
* 2. 模块配置：
* baseUrl->基础路径 paths->路径
* require.config({ baseUrl: "js/lib", paths: { "jquery": "jquery.min", "underscore": "underscore.min" } });
* 3. 主模块写法：
* main.js，我把它称为”主模块”，意思是整个⽹网⻚页的⼊入⼝口代码
* require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){ // some code here });
*
*/
</script>
</body>
</html>
main.js
/*
根目录
|
-------------------------------
| | |
indx.html main.js libs
|
----------------------------
| | |
jquery showDate testShim
*/
require.config({
baseUrl:'libs', //表示基础路径paths中都是相对于baseUrl展开的
paths: { //对于标准模块定义方法通过paths属性来定义
"jquery" : "jquery",
"showDate" : "showDate"
},
shim : { //非标准模块化定义
testShim : {
deps : [],
exports : 'Obj2' //与非标准中暴露出来的变量名一致(testShim.js中的Obj2 || Obj1)，若此处为Obj1->下面fn1的值就为1，若为Obj2->下面fn1的值为2
}
}
});
require(["jquery","showDate"],function ($,showDate){
console.log($); //Jquery对象
showDate.show(); //1
});
require(["testShim"],function (testShim){
testShim.fn1(); //shim中exports定义的值与js模块中暴露的值一职才能正常运行
});
.showDate.js
define(function (){
var num = 10;
function showDate(){
$('div')[0].innerHTML = '哈哈哈';
}
return {
show:showDate
}
});
/*
define(['jquery'],function ($){ //在此处定义其依赖项
var num = 10;
function showDate(){
$('div')[0].innerHTML = '哈哈哈1';
}
return {
show:showDate
}
})
*/
.testShim.js
/**
* 非标准第一种写法
*
*/
window.Obj1 = { //输出全局变量Obj1
fn1 : function(){
console.log(1)
}
};
/**
* 非标准第二种写法
*
*/
(function (window){ //输出全局变量Obj2
var Obj2 = {};
Obj2.fn1 = function (){
console.log(2)
}
window.Obj2 = Obj2;
})(window);
