最近項目需要用require.js所以就看了看，以下為require.js的基本用法虽抄。
參考文獻：
菜鳥教程：http://www.runoob.com/w3cnote/requirejs-tutorial-1.html
阮一峰網(wǎng)絡日志：http://www.ruanyifeng.com/blog/2012/11/require_js.html
為什么要用require.js
最早的時候澈驼，所有Javascript代碼都寫在一個文件里面辛燥，只要加載這一個文件就夠了。后來缝其，代碼越來越多挎塌，一個文件不夠了，必須分成多個文件内边，依次加載多個js文件榴都。
這樣的寫法有很大的缺點。首先漠其，加載的時候嘴高，瀏覽器會停止網(wǎng)頁渲染，加載文件越多和屎，網(wǎng)頁失去響應的時間就會越長拴驮；其次，由于js文件之間存在依賴關系柴信，因此必須嚴格保證加載順序莹汤，依賴性最大的模塊一定要放到最后加載，當依賴關系很復雜的時候颠印，代碼的編寫和維護都會變得困難。
require.js的誕生為了解決：
1）實現(xiàn)js文件的異步加載抹竹，避免網(wǎng)頁失去響應线罕；
2）管理模塊之間的依賴性，便于代碼的編寫和維護窃判。
如何使用require.js
- 首先去官網(wǎng)下載最新插件點我下載
- 將require.js引入到項目中 使用<srcipt>引入
使用data-main加載我們自己的代碼（主模塊）假設我們的文件名稱為demo.js
<script type="text/javascript" data-main="demo" src="require.js"></script>
- require.js 基本API
require會定義2個變量：
define ： 從名字就可以看出這個api是用來定義一個模塊
require ：加載依賴模塊钞楼，并執(zhí)行加載完后的回調函數(shù)
使用這兩個變量定義引用路徑的時候文件名不用寫成 demo.js 直接寫demo就行
一、代碼不依賴任何其他模塊
通過define函數(shù)定義了一個模塊：
define(function(){
function fun1(){
alert("it works");
}
fun1();
})
然后在頁面中用require使用
require(["demo"]);
來加載該模塊(注意require中的依賴是一個數(shù)組袄琳，即使只有一個依賴询件，你也必須使用數(shù)組來定義)燃乍，requir API的第二個參數(shù)是callback，一個function宛琅，是用來處理加載完畢后的邏輯
require(["demo"],function(){
alert("load finished");
})
二刻蟹、模塊的加載
假如需要用各種插件（比如jquery或者是基于jquery的插件）
首先創(chuàng)建一個js文件 我們起名為min.js，用require.config來配置我們所用插件的路徑方便多項目調動
設置的方式有兩種：
1嘿辟、直接把路徑寫在path中
require.config({
paths :{
"jquery" : ".js/jquery-1.12.3.min",
"placeholder":"js/placeholderfriend",
"swiper":"js/idangerous.swiper.min",
"bar":"js/jqbar",
"city":"js/jquery.citys"
},
//使用shim聲明插件基于什么開發(fā)的比如以下都為jquery的插件
shim:{
"placeholder":{
deps: ["jquery"]
},
"swiper":{
deps: ["jquery"]
},
"bar":{
deps:['jquery']
},
"city":{
deps:['jquery']
}
}
})
然后在demo.js中引入
//define后面的路徑就是剛配置完產(chǎn)檢的js路徑
define(["main"],function(){
//require 后參數(shù)需要的插件（要寫成數(shù)組形式舆瘪，即使只用一個）
require(['jquery','placeholder'],function(){
//下面就可以正常寫代碼了 如
$(function(){
$("#btn").click(function(){
alert("我點擊了")
});
})
})
})
2、直接改變基目錄（baseUrl）
require.config({
baseUrl: "js",
paths :{
"jquery" : "jquery-1.12.3.min",
"placeholder":"placeholderfriend",
"swiper":"idangerous.swiper.min",
"bar":"jqbar",
"city":"jquery.citys"
},
//使用shim聲明插件基于什么開發(fā)的比如以下都為jquery的插件
shim:{
"placeholder":{
deps: ["jquery"]
},
"swiper":{
deps: ["jquery"]
},
"bar":{
deps:['jquery']
},
"city":{
deps:['jquery']
}
}
})
后面就一樣了
恩红伦，差不多就這樣了英古。
