【模塊化】 RequireJS入門教程總結與推薦


之所以學習RequireJS,肯定對 模塊化有一定的理解。這里有幾篇學習 RequireJS的文章,推薦給大家去學習。

  1. Javascript模塊化編程(一):模塊的寫法
  2. Javascript模塊化編程(二):AMD規范
  3. Javascript模塊化編程(三):require.js的用法 【require的使用,paths,baseUrl,shim 以及 deps,exports】
  4. ~~~~~~~~~~~~~上面這三篇是阮一峰老師的文章,【簡單易懂】~~~~~~~~~~~~~~~~
  5. 但是對 requirejs 講的內容,感覺少了點東西
  6. 快速理解RequireJs 【看后面作者遇到的坑,以及 shim 中的 init 方法】

總結:【只需要了解幾個屬性就可以用起來啦】【源碼】github 源碼

    1. 參數1:依賴的模塊,數組形式, 

      參數2:回調函數,參數:跟每個 依賴模塊exports的對象順序是一致的

      require(['module1','module2'],function(){
      //TODO:
      })
require.config({
     baseUrl:'  ' ,
     paths:{  ' jquery' : 'lib/jquery'  },
     shim:{     }
})
  1. 什么叫AMD規范,如何編寫AMD規范的腳本
    1. define([依賴的模塊],function(){
          //TODO: 自己想寫的方法,或者屬性,但是要對外輸出,則需要有一個 return, return 出來的,其他模塊可以拿來用
      })

詳細:【相對詳細一點,哈】

學習了上面的幾篇文章之后,嘗試做了一個實踐了一下,來理解如何使用RequireJS,其實真的不難。

  1. RequireJS是基於AMD來實現的
    1. 什么事AMD,是什么CommonJS?
    2. CommonJS 【針對服務端】
      1. Node作為一個服務端語言,如果沒有模塊化的化,根本沒辦法進行復雜性的編程。
      2. So,NodeJS就參照了 CommonJS規范實現了 模塊系統
      3. CommonJS中 有一個全局方法 require,來加載模塊

        clipboard

    3. AMD 【有了服務端的,當前也要有前端的】
      1. 為什么不用CommonJS,而還需要去選AMD呢?
        1. 因為CommonJS不適用於瀏覽器端,因為JS腳本,來自服務端,請求腳本到瀏覽器需要時間,如果等待加載完,在執行下一步,那么整個頁面渲染就卡住了,應用就停住了。
        2. So,瀏覽器端不能用  同步加載 , 而要用 異步加載。
      2. AMD是"Asynchronous Module Definition"的縮寫,意思就是"異步模塊定義"
      3. 異步加載AMD
        1. 異步加載模塊的話,那么就存在一個問題了,如果像CommonJS只有一個參數,那么肯定是不行的,因為怎么知道它什么時候加載完啊。
        2. So, 瀏覽器端,還需要一個  回調函數
          clipboard[1]
        3. 這邊有兩個參數,第一個參數是一個數組,表示依賴的模塊回調函數參數,跟依賴模塊的數組順序必須是一致的。
  2. 每次加載模塊,總要輸入相對路徑,或者絕對路徑,長長的一大串,坑爹啊,如果多個地方調用了,那后期文件修改了位置,那豈不是修改到吐?
    1. So,paths 就是必須的,跟模塊取一個別名
      clipboard[2]
  3. 啥,你說你的JS模塊文件,都是 某個指定的路徑下?  baseUrl 就出來了
    1. clipboard[3]
  4. 我要是早期腳本,不是按照AMD來寫的,那腫么辦呢?  shim 屬性
    1. 符合AMD規范的,可以直接requirejs 進來使用,但是不符合 AMD規范的,則需要配置 shim 屬性和shim中的 exports屬性
    2. 如果不符合AMD規范的,還依賴其他控件,需要配置 shim屬性里面的 deps 屬性
    3. clipboard[4]


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM