requireJs規範就是：在項目配置檔案中配置好“js的路徑”和“js文檔中的函數子產品的引用”，然後加載Html過程中就會根據配置好的路徑和對應子產品名稱去加載代碼，這樣實作了js和HTML的分離，在另外的配置文檔中管理js子產品之間的依賴關系，這樣有利于維護。
例如：
我們以d3.js和c3.js為例，c3是一個基于d3的圖表繪圖庫，隻要依次引入d3.js和c3.js即可使用它的api，現在我們使用AMD規範來配置。
首先在HTML頭部聲明配置檔案
<script src="../lib/require.js"></script>
<script src="./main.js"></script>
配置文檔是main.js
結構如下：
main.js
//格式require.config({})
require.config({
//根路徑
baseUrl:"../lib",
paths:{
//根路徑下的各個子產品
d3:"d3-5.4.0.min",
c3:"c3.min"
},
//由于d3.js和c3.js不是AMD規範,需要shim配置
shim:{
c3:{
//依賴于d3.js
deps:["d3"],
//導出檔案
exports:"c3.min"
}
}
})
然後在html中使用c3子產品
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<title>test1</title>
<head>
<link href="../lib/c3.min.css" target="_blank" rel="external nofollow" rel="stylesheet">
<!--引入require.js和main.js-->
<script src="../lib/require.js"></script>
<script src="./main.js"></script>
</head>
<body>
<!--聲明id-->
<div id="chart"></div>
</body>
<script>
//現在隻需要require子產品c3了，因為main裡已經配置了依賴
require(["c3"], function(c3){
c3.generate({
//綁定id
bindto: "#chart",
data:{
columns:[
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
})
})
</script>
</html>
require子產品方法的格式：
//格式require([module], (object)=>{})
require(["c3"], (c3)=>{
//c3就是一個執行個體對象
//c3.foo()
})
定義符合AMD規範子產品的格式
define([], function(){
/** codes **/
})
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)