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=)