合併與模組化javascript- RequireJS

require
因為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的基本用法如下
  1. require(dependencies, callback);   

其中dependencies的格式必須為陣列,callback則為函式。
  1. require([   
  2.   //要合併的檔案   
  3. ], function () {   
  4.   //程式寫在這裡   
  5. });  

我的那一頁就會是這樣寫
  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

留言