requireJS初學

requireJS初學

requireJS的由來javascript

  前端技術雖然在不斷髮展之中,卻一直沒有質的飛躍。這些框架的使用效率以及開發質量在很大程度上都取決於開發者對其的熟悉程度,以及對JavaScript的熟悉程度。從一個框架遷移到一個新的框架,開發者頗有可能還會按照原有框架的思惟去思考和解決問題。這其中的一個重要緣由就是JavaScript自己的靈活性。慶幸的是,一直有人在去不斷的嘗試和改進,CommonJS就是其中的一個重要組織。他們提出了許多新的JavaScript架構方案和標準,但願能爲前端開發提供引導,提供統一的指引。前端

  AMD規範就是其中比較著名一個,全稱是Asynchronous Module Definition,即異步模塊加載機制。從它的規範描述頁面看,AMD很短也很簡單,但它卻完整描述了模塊的定義,依賴關係,引用關係以及加載機制。java

  AMD規範是JavaScript開發的一次重要嘗試,它以簡單而優雅的方式統一了JavaScript的模塊定義和加載機制,並迅速獲得不少框架的承認和採納。這對開發人員來講是一個好消息,經過AMD咱們下降了學習和使用各類框架的門檻,可以以一種統一的方式去定義和使用模塊,提升開發效率,下降了應用維護成本。服務器

requireJS是什麼?架構

  既然AMD是一種模塊化的規範,那麼requireJS是什麼呢,經過我這幾天的學習,我學到的requireJS就是一個採用了AMD規範的模塊加載器,它能夠根據不一樣頁面對不一樣模塊的需求,按照你的設置依次加載並執行全部的 JavaScript 文件。框架

爲何要使用requireJS?異步

  以前學習了模塊化,以及正常編寫javascript會遇到的一些問題:單文件變量命名衝突問題(全局污染)、前端多人協做問題、文件依賴問題(循環依賴)、按需加載等等,而使用requireJS這樣一個模塊加載器,這些問題均可以迎刃而解了。模塊化

  能夠看出,咱們使用 Require JS 主要有兩個目的:一、解耦代碼,方便代碼重用和管理;二、加速頁面加載,內置優化引擎(需服務器支持),自動異步加載依賴項,將全部須要加載的文件自動合併爲一個文件,減小 HTTP 請求。學習

requireJS如何去定義一個模塊?優化

  當咱們根據模塊化的基礎概念設計模塊時,那麼requireJS是如何把咱們的設想變爲實際的模塊的呢?關鍵字:define。

  define( [module-name?], [array-of-dependencies?], [module-factory-or-object] );

  nmodule-name: 模塊標識,能夠省略(官方最佳實踐推薦不寫)
  narray-of-dependencies: 所依賴的模塊,能夠省略。
  nmodule-factory-or-object: 模塊的實現,或者一個JavaScript對象。

requireJS如何去使用一個模塊?

  當咱們定義了一個模塊後如何去使用呢?關鍵字:require。

  require( [array-of-module], [callback-or-object] );

  narray-of-module: 使用到的模塊。
  callback-or-object: 加載完使用模塊執行的回調,或者一個JavaScript對象。

  備註:另外requireJS還支持許多使用方式,例如直接引用JS文件、引用非AMD規範文件等等,詳情見官網。

requireJS如何去配置模塊?

  require.config( [object] );

  object:配置的模塊對象,屬性包含baseUrl(根路徑)、paths(配置加載模塊路徑,格式{ "file": "path+filename" })、shim、waitSeconds等等。

  還能夠將配置寫在自定義JS文件中,只需在引用requireJS文件的script標記中添加屬性data-main便可,例如: 

<script data-main="main" src="require.js"></script>

  main.js文件內容:

require.config({
    baseUrl: "",
    paths : { },
    shim: { }
});

  若是主頁中有入口的require,那麼建議放到main.js文件中。

 

是否是對requireJS有一個認識了呢,^_^

相關文章
相關標籤/搜索