之所以學習RequireJS,肯定對 模塊化有一定的理解。這里有幾篇學習 RequireJS的文章,推薦給大家去學習。
- Javascript模塊化編程(一):模塊的寫法
- Javascript模塊化編程(二):AMD規范
- Javascript模塊化編程(三):require.js的用法 【require的使用,paths,baseUrl,shim 以及 deps,exports】
- ~~~~~~~~~~~~~上面這三篇是阮一峰老師的文章,【簡單易懂】~~~~~~~~~~~~~~~~
- 但是對 requirejs 講的內容,感覺少了點東西
- 快速理解RequireJs 【看后面作者遇到的坑,以及 shim 中的 init 方法】
總結:【只需要了解幾個屬性就可以用起來啦】【源碼】github 源碼
-
參數1:依賴的模塊,數組形式,
參數2:回調函數,參數:跟每個 依賴模塊exports的對象順序是一致的
require(['module1','module2'],function(){ //TODO: })
require.config({ baseUrl:' ' , paths:{ ' jquery' : 'lib/jquery' }, shim:{ } })
- 什么叫AMD規范,如何編寫AMD規范的腳本
- define([依賴的模塊],function(){
//TODO: 自己想寫的方法,或者屬性,但是要對外輸出,則需要有一個 return, return 出來的,其他模塊可以拿來用
})
- define([依賴的模塊],function(){
詳細:【相對詳細一點,哈】
學習了上面的幾篇文章之后,嘗試做了一個實踐了一下,來理解如何使用RequireJS,其實真的不難。
- RequireJS是基於AMD來實現的
- 什么事AMD,是什么CommonJS?
- CommonJS 【針對服務端】
- AMD 【有了服務端的,當前也要有前端的】
- 為什么不用CommonJS,而還需要去選AMD呢?
- 因為CommonJS不適用於瀏覽器端,因為JS腳本,來自服務端,請求腳本到瀏覽器需要時間,如果等待加載完,在執行下一步,那么整個頁面渲染就卡住了,應用就停住了。
- So,瀏覽器端不能用 同步加載 , 而要用 異步加載。
- AMD是"Asynchronous Module Definition"的縮寫,意思就是"異步模塊定義"
- 異步加載AMD
- 為什么不用CommonJS,而還需要去選AMD呢?
- 每次加載模塊,總要輸入相對路徑,或者絕對路徑,長長的一大串,坑爹啊,如果多個地方調用了,那后期文件修改了位置,那豈不是修改到吐?
- 啥,你說你的JS模塊文件,都是 某個指定的路徑下? baseUrl 就出來了
- 我要是早期腳本,不是按照AMD來寫的,那腫么辦呢? shim 屬性