前幾天有個獵頭找到俺，說起看到我在智聯上的簡歷。
說有個公司想讓我去面試一下。就順便轉發了一下招聘要求。
看了一眼。
猴賽雷！！！是招Web前端，最好還有hybrid app開發經驗。
我看了一圈，除了懂了一點加分項nodejs之外。貌似別的都不太及格的樣子。
好吧，既然咱不懂，咱就來學唄。多大點事。
其中有一個名詞叫requirejs，
百度了一下，貌似就是個模塊適時加載器的作用。
ok，那麼，今天就在ProjectOne上寫一個requirejs的測試項目唄。
首先，我們現在ProjectOne下面新建一個項目咯。
在ProjectOne的根目錄下的web目錄裏面，新建一個Test文件夾，然後Test文件夾下面新建一個001文件夾，
再然後在這個文件夾下面新建一個index.html和一個js文件夾。
接着，當然還是去requirejs的官網下一個包啦。地址是這個：http://requirejs.org/docs/download.html
當前requirejs的版本是2.1.22，我們選擇右邊的minified，右鍵目標另存爲，進行保存。
將它存到ProjectOne/Test/001/js文件夾下面。
然後，因爲是要測試動態加載，那麼加載的js我們自然也要選一個咯。
好吧，那就加載jQuery和zepto，這兩個比較常用的包吧！
去jQuery官網和zepto(官?)網...(http://www.css88.com/doc/zeptojs_api/)，分別下了兩個包：jquery-1.12.1.min.js 和 zepto.min.js （1.1.6版）
下2個包是因爲聽說在requirejs裏面不能用zepto。
雖然《bootstrap中文網》不推薦我們用Zepto，（原文：http://www.bootcss.com/article/why-we-dropped-zepto/）
但是Zepto還是很多人在用的。所以暫時還是考慮嘗試支持一下。
分別將2個包夜同樣拷貝到js文件夾下面。
下面開始寫代碼。
測試思路很簡單，
寫3個按鈕，1個同時加載2個包，2個分別對應加載對應的包。
寫2個輸入框，通過點擊按鈕改變框內的內容。
都是用jQuery和zepto的語法來進行操作。
然後觀察chrome的F12(開發者工具/Firebug)，查看network一項，看模塊是不是正確在點擊按鈕後，加載對應的模塊。
下面是實例代碼。
首先，我們的index頁面需要上面說的3個按鈕2個輸入框，並且要3個簡單的點擊事件。
代碼大概是這樣的。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
輸入框1：<input type="text" id="input1" />
<br />
輸入框2：<input type="text" id="input2" />
<br />
<button onclick="click_all()">全部加載</button>
<button onclick="click_jquery()">加載jQuery</button>
<button onclick="click_zepto()">加載Zepto</button>
</body>
<script>
function click_all(){
}
function click_jquery(){
}
function click_zepto(){
}
</script>
</html>然後，在head中引入requirejs包，
這裏要注意一點就是，引入requirejs包需要在後面添加一個data-main屬性。
<script src="js/require.js" data-main="js/main"></script>然後，我們就需要在js文件夾下面創建一個main.js文件咯。
這個js文件前提是需要包含一個自執行函數，我們就習慣性的匿名咯。
主要作用就是配置一個require.config函數對象的樣子。看如下代碼：
(function(){
require.config({
baseUrl: 'js/',
defaultExt: '.js',
paths:{
jquery:'jquery-1.12.1.min',
zepto:'zepto.min'
}
});
})();
這裏的baseUrl是爲了將路徑引導到js文件夾下面，如果不用的話，那麼下面的path就要寫成zepto:'js/zepto.min'這樣的了。
defaultExt是爲了配置引用的文件的默認後綴名，所以下面的paths裏面指定的文件“不需要加.js”。（貌似也不允許加
這樣配置就完成了。（paths裏面的jquery屬性名請全小寫，別問我爲什麼...
然後，我們就在index.html的script部分，click_jquery和click_zepto函數里加幾句代碼試一下效果吧。
requirejs的語法是這樣的 require([path中定義的模塊名，多個用逗號分隔],function(如果有的話，傳入模塊的對象，如$，必須按順序){//todo}); 這樣。
那麼示範代碼就寫成這樣。
function click_jquery(){
require(['jquery'],function(jQuery){
jQuery('#input2').val('click_jquery jquery!');
});
}
function click_zepto(){
require(['zepto'],function($){
$('#input1').val('click_zepto zepto!');
});
}這個時候，我們去點擊“加載jQuery”按鈕，輸入框2是能正確顯示的，
但是！！！點擊“加載Zepto”卻不行。
這是因爲zepto的代碼不符合AMD規範，
這時，從百度可以得知有幾種解決辦法。
第一種是改zepto的代碼，但是我個人覺得麻煩，就用第二種，
requirejs的conifg裏面加一個shim屬性，這個屬性是爲了支持那些不規範的代碼用的。
我們加入以下代碼：
paths:{.....}
,
shim:{
zepto:{
exports:'$'
}
}刷新頁面，打開F12觀察Network。可以看到，分別點擊2個按鈕之後，是分別加載2個包文件的。
接下來，我們補充完click_all的代碼：
function click_all(){
require(['zepto','jquery'],function($,jQuery){
$('#input1').val('click_all zepto !');
jQuery('#input2').val('click_all jQuery!');
});
}至此，
我們的引入require.js包，設置main.js文件，
配置require.config裏面的屬性，配置paths，非標準包shim，
require()引用並調用。
這幾個步驟都做完了。
這也是一個比較基本的，基礎的requirejs的用法了吧！！！？？？對吧。。。
說不定還有人要我說說用它的好處。
好處就是一開始不用加載很多包，
能迅速展示頁面，
並且通過shim能模塊化很多包及功能，適合更龐大的系統開發和組合。
就醬紫！