隨着JS越來越龐大，已經不僅僅是以前復制粘貼做特效的時代了，JS越來越偏向於業務邏輯與應用。恰逢Node的流行，JS在web開發中占有越來越重要的地位。由於JS代碼龐大，文件數目多，傳統的使用<script src=""></script>會帶來很多性能的問題，因此requirejs可以為我們提供兩種解決思路：
1 模塊化組織JS
2 異步加載JS文件
有了這兩種解決辦法，能有效的幫助我們解決前端代碼庫的組織難題。
本文下面就模擬一個小例子，由於並沒有應用實踐，因此命名很戳，還請見諒。
關於Require.js在多頁面應用的實踐，可以參考：multipage
層次組織
/public
|------require.js、config.js、index.html
|-------lib/
|-------a.js、b.js
|-------orthers/
|-------c.js
文件功能
require.js:
其中requirejs的核心代碼就是require.js文件，可以從官方網站上下載：
config.js:
用於配置requirejs的相關內容，可以設置文件目錄，加載模塊命名匹配，以及一些依賴關系等等。
index.html：
我們的測試頁面或者網址首頁。
/lib/a.js和/lib/b.js 以及 /others/c.js
是測試的模塊js文件。
代碼詳情
index.html
<doctype html> <html> <meta http-quiv="Content-Type" content="text/html;charset=UTF-8"> <script data-main="config" src="require.js"></script> </html> <body> <h1>This is test for RequireJS</h1> <script type="text/javascript"> alert("index"); </script> </body>
其中，data-main指定主要的配置文件；src為requirejs的文件。
config.js
require.config({ // baseUrl:'/', paths:{ "a":"lib/a", "b":"lib/b", "c":"others/c" } }); require(['a','b','c'],function(a,b,c){ a.hello(); b.hello(); c.hello(); });
baseUrl指定所有文件的主要目錄，paths配置模塊名字以及其匹配的加載路徑。
當有需要使用某些模塊時，就可以通過require([xxx],function(xxx){xxx});的方式使用。
a.js
define([], function() { return { hello: function() { alert("hello, a"); } } });
b.js
define([], function() { return { hello: function() { alert("hello, b"); } } });
c.js
define([], function() { return { hello: function() { alert("hello, c"); } } });
模塊化文件，一般是一個功能是一個文件。文件的名字，就是上面requireconfig中配置的模塊名字。require加載文件時，會自動加上.js后綴。
當某些模塊依賴其他模塊時，可以通過define([xxx],function(xxx){yyy});的方式添加依賴關系，require會在異步加載后，自動調整次序。
當訪問index.html時，會先加載require.js然后把需要加載的文件都通過appendChild的方式，添加到index.html的底部。
因此會先彈出index對話框，當執行config.js的后半部分代碼時，會依次使用a.js b.js c.js，因此也會依次彈出三個對話框。
這就是簡單的模塊化組織架構，如果需要參考實例項目，可以學習測試樣例的源碼，它主要為elasticsearch提供前端UI。
參考
【1】阮一峰requirejs：http://www.ruanyifeng.com/blog/2012/11/require_js.html
【2】requirejs中文文檔：http://www.requirejs.cn/