require.config({ paths : { //这样配置，减轻本地服务器的压力 "jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"], //将本地的js文件同样配置，之后引用 "test01" : ["js/test01"], "test02" : ["js/test02"] } }); // require(["jquery","test01","test02"],function(){ alert("页面加载成功~~"); },function(){ alert("页面加载失败~~") });
上面的例子中重复出现了require.config配置，如果每个页面中都加入配置，必然显得十分不雅，requirejs提供了一种叫”主数据”的功能，我们首先创建一个main.js：
require.config({ paths : { //这样配置，减轻本地服务器的压力 "jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"], //将本地的js文件同样配置，之后引用 "test01" : ["js/test01"], "test02" : ["js/test02"] } });
然后再页面中使用下面的方式来使用requirejs：
<script type="text/javascript" src="https://www.jb51.net/js/require2.1.11.js" ></script> <script type="text/javascript" src="https://www.jb51.net/js/main.js" ></script> <script type="text/javascript"> require(["jquery","t1","t2"],function(){ alert("页面加载成功~~"); },function(){ alert("页面加载失败~~") }); </script>
在官方提供了一种基于标签属性的方式：
<script data-main="js/main" src="https://www.jb51.net/js/require2.1.11.js" ></script>
将所有的配置和导入js都放在了main.js中，这样在页面只要这样一个标签就行了。
代码演示如下：
//test01.js--定义一个js模块 define(function(){ function test(){ console.log("this is test01.js"); } test(); $("p").css("color","#DB7093"); });
//main.js--requirejs的全局配置 require.config({ paths:{ "jquery":["jquery-1.8.3"], "test":["test01"] }, shim:{ "test":["jquery"] } }); require(["test"],function(){ console.log("success!"); });
//index.html--此时，引入js文件只需一行代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" data-main = "js/main" src="https://www.jb51.net/js/require2.1.11.js" ></script> </head> <body> <p>i am liyanan and this is a testn Page.</p> </body> </html>