RequireJS是一個(gè)JavaScript文件和模塊加載器。
- RequireJS包含三個(gè)重要的函數(shù)：require,define和requirejs。
- 其中require和requirejs其實(shí)是同一個(gè)函數(shù)。
命名空間
模塊定義
創(chuàng)建一個(gè)項(xiàng)目規(guī)劃
QQ截圖20171103183828.png
- 在html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>requireJs</title>
</head>
<body>
<div id="div"></div>
<div id="div2"></div>
<ul id="ul">
<li><a href="javascript:void(0)">小逗比__PS</a></li>
<li><a href="javascript:void(0)">小逗比__HTML</a></li>
<li><a href="javascript:void(0)">小逗比__CSS</a></li>
<li><a href="javascript:void(0)">小逗比__JavaScript</a></li>
</ul>
// 你可以使用本地的--也可以使用cdn
// data-main = "js/main" 這是入口文件
<script data-main="js/main" src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
- 創(chuàng)建一個(gè)main.js
這是寫(xiě)入require配置的，也是總文件，引入多個(gè)子文件
// 配置文件
require.config({
baseUrl: "./js",
paths:{ // 配置路徑
'mobile' : "https://assets.alicdn.com/apps/top/c/sdk-mobile",
'jquery': "https://cdn.bootcss.com/jquery/3.2.1/jquery.min",
// 'zepto': "https://g.alicdn.com/sj/lib/zepto/zepto.min",
"sui" : "https://g.alicdn.com/msui/sm/0.5.6/js/sm.min",
'index': 'index',
'index2': 'index2',
},
//require.config()的配置對(duì)象
shim:{
'index':{ //這里引入的第一個(gè)js文件
// deps: ['zepto','mobile'], // deps 定義依賴(lài) 依賴(lài)于jquery
deps: ['jquery','mobile'], // deps 定義依賴(lài) 依賴(lài)于jquery
exports: 'writeIndex'
},
'index2':{ //這里引入的第二個(gè)js文件
deps: ['jquery','mobile'],
exports: 'writeIndex2'
}
}
})
//導(dǎo)入模塊
require(['jquery','index','index2'], function ($,index,index2) {
//這里是指所有的js執(zhí)行完，執(zhí)行這里的代碼
});
- 在 index.js 中使用jquery
define(function(){ //定義函數(shù)
$('#div').html("require模塊化");
$('#ul').on("click","li a",function(){
$(this).css({color:'red'}).parent().siblings("li").children().css({color:"#00e"})
console.log(($(this).html()+"(你以為這就完事了？？我特么還可以再?gòu)椧淮?，有時(shí)候裝逼就是這么簡(jiǎn)單！)"));
});
});
- 在index2中使用jquery
define(function(){
function writeIndex2(){
$("#div2").html("hello world")
}
return writeIndex2();
});
