什么是 requireJS ？
requireJS 是用JavaScript編寫的JS框架，主要功能是可以按不同的先后依賴關系對 JavaScript 等文件的進行加載工作，可簡單理解為JS文件的加載器，它非常適合在瀏覽器中使用，它可以確保所依賴的JS文件加載完成之后再加載當前的JS文件，這在大量使用JS文件的項目中可確保各個JS文件的先后加載順序，確保避免了以前因某些原因某個文件加載慢而導致其它加載快的文件需要依賴其某些功能而出現某函數或某變量找不到的問題，這點非常有用，也是 requireJS 的主要價值所在吧。
快速簡要了解要點：
1、require會定義三個變量：define、require、requirejs，其中require ===requirejs，一般使用require更簡短，頁面加載同時不阻塞渲染；
2、define(function(){...}); 從名字就可以看出這個api是用來定義一個模塊；
3、require(['aModule','bModule'],function(a,b){...}) 加載依賴模塊，並執行加載完后的回調函數；
4、在使用requirejs時，加載模塊時不用寫.js后綴，當然也是不能寫后綴；
5、require.config({...}) 是用來配置模塊加載位置和設置基本路徑等；
6、加載requirejs腳本的script標簽加入了data-main屬性，這屬性指定在加載完reuqire.js后，就用requireJS加載該屬性值指定路徑下的JS文件並運行，所以一般該JS文件稱為主JS文件，類似C或Java語言中main函數的功能，然后把require.config的配置加該主文件后可使每一個頁面都使用這個配置，然后頁面中就可直接使用require來加載所有的短模塊名即可，這樣即可在一個地方配置所有地方使用，同時模塊別名的使用和管理也都比較方便。例如： < script data-main="js/main" src="js/require.js">< /script>
7、當script標簽指定data-main屬性時，require會默認的將data-main指定的js為根路徑；
8、require加載的模塊一般都需要符合AMD規范，即使用define來申明模塊；
9、加載非AMD規范的js，這時候就需要用到另一個功能：shim; 例如：
2、define(function(){...}); 從名字就可以看出這個api是用來定義一個模塊；
3、require(['aModule','bModule'],function(a,b){...}) 加載依賴模塊，並執行加載完后的回調函數；
4、在使用requirejs時，加載模塊時不用寫.js后綴，當然也是不能寫后綴；
5、require.config({...}) 是用來配置模塊加載位置和設置基本路徑等；
6、加載requirejs腳本的script標簽加入了data-main屬性，這屬性指定在加載完reuqire.js后，就用requireJS加載該屬性值指定路徑下的JS文件並運行，所以一般該JS文件稱為主JS文件，類似C或Java語言中main函數的功能，然后把require.config的配置加該主文件后可使每一個頁面都使用這個配置，然后頁面中就可直接使用require來加載所有的短模塊名即可，這樣即可在一個地方配置所有地方使用，同時模塊別名的使用和管理也都比較方便。例如： < script data-main="js/main" src="js/require.js">< /script>
7、當script標簽指定data-main屬性時，require會默認的將data-main指定的js為根路徑；
8、require加載的模塊一般都需要符合AMD規范，即使用define來申明模塊；
9、加載非AMD規范的js，這時候就需要用到另一個功能：shim; 例如：
require.config({ paths:{ "underscore":"http://www.xxx.com/xpath/xFile.js" } ,shim: { "underscore" : { exports : "_"; } } });
好了，簡要介紹就到這，下面看一個實際例子：
這個例子的設計要求是 workjs01.js 文件依賴 jquery, workjs02.js 依賴 workjs01.js，只有等依賴文件加載完了，最后在頁面打出提示信息，
首先看例子文件目錄結構：
//-------------------------------------------------
userExample01
|---- *.html //html頁面
|----scripts
| |----*.js //main.js, require.js等
|----lib //各個第三方框架
| |----jquery
| |---- *.js
|----work //各個業務工作JS文件
|---- *.js
//-------------------------------------------------
（一般第三方庫都放在lib目錄下）
1、HTML 文件 index.html 注意看 requireJS 加載方式之一，見 script 標簽
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>requireJS</title>
<style type="text/css">
*{font-family:"微軟雅黑","microsoft Yahei",verdana;} .text01{line-height:20px;font-size:13px;font-family:verdana;} pre{margin:0px;padding:2px 0px;font-size:13px;font-family:verdana;} .div01{border:1px solid red;text-align:left;padding:5px; } </style>
</head>
<body>
<h4>requireJS 例子 example 01</h4>
<div id="loadMsgCon" class="div01"></div>
<script data-main="scripts/main" src="scripts/require_v2.1.11.js"></script>
<!--注意 requireJS 文件對應即可,同時data-main屬性值寫對即可-->
</body>
</html>
2、主文件 main.js 一般用這個進行主文件，進行各個文件按一定先后完成各個文件的加載；推薦注意文件個注釋說明和書寫格式，方便養成良好習慣和代碼規范；（一般默認main的根路徑）
//1、about require.js config//配置信息
; require.config({ //define all js file path base on this base path //actually this can setting same to data-main attribute in script tag //定義所有JS文件的基本路徑,實際這可跟script標簽的data-main有相同的根路徑
baseUrl:"./scripts"
//define each js frame path, not need to add .js suffix name //定義各個JS框架路徑名,不用加后綴 .js
,paths:{ "jquery":["http://libs.baidu.com/jquery/2.0.3/jquery", "lib/jquery/jquery-1.9.1.min"] //把對應的 jquery 這里寫對即可
,"workjs01":"work/workjs01" ,"workjs02":"work/workjs02" ,"underscore":"" //路徑未提供，可網上搜索然后加上即可
} //include NOT AMD specification js frame code //包含其它非AMD規范的JS框架
,shim:{ "underscore":{ "exports":"_" } } }); //2，about load each js code basing on different dependency //按不同先后的依賴關系加載各個JS文件
require(["jquery","workjs01"],function($,w1){ require(['workjs02']); });
3、業務文件之一， workjs01.js 注意語法看看模塊是怎么寫的，推薦注意文件各個注釋說明和書寫格式，方便養成良好習慣和代碼規范
define(['jquery'],function($){ //注意模塊的寫法 //1,define intenal variable area//變量定義區
var myModule = {}; //推薦方式
var moduleName = "work module 01"; var version = "1.0.0"; //2,define intenal funciton area//函數定義區
var loadTip = function(tipMsg, refConId){ var tipMsg = tipMsg || "module is loaded finish."; if(undefined === refConId || null === refConId || "" === refConId+""){ alert(tipMsg); }else{ $('#' + (refConId+"")).html(tipMsg); } }; //3,should be return/output a object[exports/API] if other module need //如有需要暴露(返回)本模塊API(相關定義的變量和函數)給外部其它模塊使用
myModule.moduleName = moduleName; myModule.version = version; myModule.loadTip = loadTip; return myModule; /* //this is same to four line code upper//跟上面四行一樣 return { "moduleName":"work module 01" ,"version":"1.0.0" ,loadTip:loadTip }; */ });
4、業務文件之一， workjs02.js 推薦注意文件個注釋說明和書寫格式，方便養成良好習慣和代碼規范；
define(['workjs01'],function(w01){ //1,define intenal variable area//變量定義區
var moduleName = "work module 02"; var moduleVersion = "1.0.0"; //2,define intenal funciton area//函數定義區
var setHtml = function(refId,strHtml){ if(undefined === refConId || null === refConId || "" === refConId+""){ return; }else{ $('#' + (refId + "")).html(strHtml+""); } }; //3,auto run when js file is loaded finish //在JS加載完,可在本模塊尾部[return之前]運行某函數,即完成自動運行
w01.loadTip("本頁文件都加載完成，本頁設計 workjs01.js 文件依賴jquery, workjs02.js 依賴 workjs01.js","loadMsgCon"); //4,should be return/output a object[exports/API] //如有需要暴露(返回)本模塊API(相關定義的變量和函數)給外部其它模塊使用
return { "moduleName":moduleName ,"version": moduleVersion } });
注意：對應的 requireJS 和 jquery 這里沒有給出，到對應的網上或官網下載放到對應目錄，注意修改文件名對應即可，參見對應地方的注釋；
本例雖然簡單，但是基本包含了實際大部分 requireJS 知識點，注釋也非常清楚，同時注意文件的組織結構、requireJS的配置的定義、調用關系、模塊的寫法、模塊內部的寫法、依賴文件的加載和調用、以及模塊如何自動運行某個函數等等。