小穎目前所在的公司在用require.js，小穎一直說要寫個小demo，今天抽空把自己寫的小demo分享出來，希望對初學者有一些幫助，嘻嘻
學習資料：
CSDN上的一篇文章：使用RequireJS優化Web應用前端
阮一峰老師的網絡日志：Javascript模塊化編程（三）：require.js的用法
卷柏的花期的隨筆：requireJS 從概念到實戰
demo目錄：
小穎就不在自己博客里賣弄了，像：為什么要用require.js？、require.js的加載、主模塊的寫法等小穎就不在我的博客里面寫了，詳細的大家請移步到：阮一峰老師的網絡日志：Javascript模塊化編程（三）：require.js的用法中去看看。小穎就主要給大家分享下小穎理解的 require.js模塊的加載和AMD模塊的寫法
在看小穎寫的demo之前大家先看下阮一峰老師的網絡日志：Javascript模塊化編程（三）：require.js的用法中模塊的加載和AMD模塊的寫法的詳解：
模塊的加載：
上一節最后的示例中，主模塊的依賴模塊是['jquery', 'underscore', 'backbone']。默認情況下，require.js假定這三個模塊與main.js在同一個目錄，文件名分別為jquery.js，underscore.js和backbone.js，然后自動加載。
使用require.config()方法，我們可以對模塊的加載行為進行自定義。require.config()就寫在主模塊（main.js）的頭部。參數就是一個對象，這個對象的paths屬性指定各個模塊的加載路徑。
require.config({ paths: { "jquery": "jquery.min", "underscore": "underscore.min", "backbone": "backbone.min" } });
上面的代碼給出了三個模塊的文件名，路徑默認與main.js在同一個目錄（js子目錄）。如果這些模塊在其他目錄，比如js/lib目錄，則有兩種寫法。一種是逐一指定路徑。
require.config({ paths: { "jquery": "lib/jquery.min", "underscore": "lib/underscore.min", "backbone": "lib/backbone.min" } });
另一種則是直接改變基目錄（baseUrl）。
require.config({ baseUrl: "js/lib", paths: { "jquery": "jquery.min", "underscore": "underscore.min", "backbone": "backbone.min" } });
如果某個模塊在另一台主機上，也可以直接指定它的網址，比如：
require.config({ paths: { "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min" } });
require.js要求，每個模塊是一個單獨的js文件。這樣的話，如果加載多個模塊，就會發出多次HTTP請求，會影響網頁的加載速度。因此，require.js提供了一個優化工具，當模塊部署完畢以后，可以用這個工具將多個模塊合並在一個文件中，減少HTTP請求數。
AMD模塊的寫法
require.js加載的模塊，采用AMD規范。也就是說，模塊必須按照AMD的規定來寫。
具體來說，就是模塊必須采用特定的define()函數來定義。如果一個模塊不依賴其他模塊，那么可以直接定義在define()函數之中。
假定現在有一個math.js文件，它定義了一個math模塊。那么，math.js就要這樣寫：
// math.js define(function (){ var add = function (x,y){ return x+y; }; return { add: add }; });
加載方法如下：
// main.js require(['math'], function (math){ alert(math.add(1,1)); });
如果這個模塊還依賴其他模塊，那么define()函數的第一個參數，必須是一個數組，指明該模塊的依賴性。
define(['myLib'], function(myLib){ function foo(){ myLib.doSomething(); } return { foo : foo }; });
當require()函數加載上面這個模塊的時候，就會先加載myLib.js文件。
大家再來看看小穎寫的代碼：
1.index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>require.js小demo</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/base.css"> <!-- 加載require.js文件，也可能造成網頁失去響應。解決辦法有兩個，一個是把它放在網頁底部加載，另一個是寫成下面這樣： --> <!-- <script src="js/require.js" defer async="true" ></script> --> <!--async屬性表明這個文件需要異步加載，避免網頁失去響應。IE不支持這個屬性，只支持defer，所以把defer也寫上。 --> <!-- 加載require.js以后，下一步就要加載我們自己的代碼了。假定我們自己的代碼文件是main.js，也放在js目錄下面。只需要寫成下面這樣就行了： --> <!-- <script src="js/require.js" data-main="src/main.js"></script> --> <script defer async="true" data-main="app" src="js/require.js"></script> </head> <body> <div class="div-index"> <div class="index-content"> <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 col-xs-2 control-label">Username</label> <div class="col-sm-5 col-xs-5"> <input type="text" class="form-control" id="inputUserName" placeholder="Username"> </div> </div> <div class="form-group"> <label class="col-sm-2 col-xs-2 control-label">Password</label> <div class="col-sm-5 col-xs-2"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-5 col-xs-5"> <button type="submit" class="btn btn-default" id='logBtn'>Sign in</button> </div> </div> </form> </div> </div> </body> </html>
2.app.js
requirejs.config({ baseUrl: 'js/lib', paths: { jquery: '../jquery' } }); require(['main', 'jquery'], function(mains, jq) { jq('#logBtn').click(function() { var logon = mains.logon(jq('#logBtn').val(), jq('#inputPassword').val()); if (logon) { alert('登陸成功！'); } else { alert('登陸失敗！'); } }); });
3.js/lib下的main.js
define(function() { var logon = function(userName, password) { if (userName === '小穎' && password === '1028') { return true; } else { return false; } }; return { logon: logon } });
1.小穎的基目錄是：baseUrl: 'js/lib'，大家看了阮一峰分享的日志應該對 baseUrl 也有所了解，小穎理解的 baseUrl 就是 如果你要調用很多一個目錄下的js，那么你就將這個目錄定位基目錄，
2.paths：如果你在paths中引了你要用的js，那么后面你要用的時候只直接調用就好了，比如上面的app.js中，小穎在paths中已經引了jquery.js，所以在用jquery時：
require(['main', 'jquery'], function(mains, jq) { jq('#logBtn').click(function() { var logon = mains.logon(jq('#logBtn').val(), jq('#inputPassword').val()); if (logon) { alert('登陸成功！'); } else { alert('登陸失敗！'); } }); });
小穎用AMD規范寫法，加載了main.js和jquery.js，並在回調函數中用 mains 和 jq 代表他們。如果上面的示例不夠明了，大家看看下面這個：
app.js
requirejs.config({ baseUrl: 'js/lib', paths: { jquery: '../jquery' } }); require(['main'], function(mains) { console.log('調用main.js'); });
main.js
define(['jquery'], function(jq) { jq('#logBtn').click(function() { var _logon = logon(jq('#inputUserName').val(), jq('#inputPassword').val()); if (_logon) { alert('登陸成功！'); } else { alert('登陸失敗！'); } }); var logon = function(userName, password) { if (userName === '小穎' && password === '1028') { return true; } else { return false; } }; return { logon: logon } });
如果只定義了基目錄而沒有在paths中引用jquery，那么當需要用jquery的時候，需要通過調用jquery的目錄下的jquery.js，才能調用，不能直接調用：
app.js
requirejs.config({ baseUrl: 'js/lib', paths: { // jquery: '../jquery' } }); require(['main'], function(mains) { console.log('調用main.js'); });
main.js
define(['../jquery'], function() { $('#logBtn').click(function() { var _logon = logon($('#inputUserName').val(), $('#inputPassword').val()); if (_logon) { alert('登陸成功！'); } else { alert('登陸失敗！'); } }); var logon = function(userName, password) { if (userName === '小穎' && password === '1028') { return true; } else { return false; } }; return { logon: logon } });
好啦，小穎的分享到這里就結束啦，希望對大家有所幫助，明天就是禮拜五啦，哈哈哈哈，后天就是周末啦，提前祝大家周末愉快哦！！！嘻嘻
