合併與模組化javascript- RequireJS

因為javascript越來越普及的關係，加上jquery本身也提供很多外掛，往往當我們用了一堆外掛，就會有很長的一排引入外掛的code，除了看起來很長很討厭外，呼叫的次數越多，效能也就越差，所以就開始有人設計出可以管理外掛的js，目前最有名的就是requireJS這一支。

官網requireJS

比如說我寫的某一頁，本來引入了那麼多js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.center.min.js"></script>
<script src="js/jquery.tinyscrollbar.min.js"></script>
<script src="js/page.js">

使用了requireJS後，只要用這樣一行就可以了
<script data-main="js/main" src="js/require.js"></script>

看大概就可以知道引入require.js後，這一隻會幫我們做合併的動作，而要放合併js的js檔則是擺在data-main指定的路徑內，所以這段代表的就是我們把合併的js取名為main.js，並放在js的資料夾內，附檔名js可以省略。

requireJS的基本用法如下

view plaincopy to clipboardprint

1. require(dependencies, callback);   

其中dependencies的格式必須為陣列，callback則為函式。

view plaincopy to clipboardprint

1. require([   
2.   //要合併的檔案   
3. ], function () {   
4.   //程式寫在這裡   
5. });  

我的那一頁就會是這樣寫

view plaincopy to clipboardprint

1. require([   
2.   'js/jquery.js',   
3.   'js/jquery.center.min.js',   
4.   'js/jquery.tinyscrollbar.min.js',   
5.   'js/page.js'  
6. ], function () {   
7.      
8. });  

這樣就可以把js合併起來了。

這是簡單的用法，其他可以參考官方文件看更進階的說明。
參考：
初探 RequireJS