require.js簡單介紹和使用

官網:https://www.requirejs.org/

RequireJS是一個JavaScript文件和模塊載入器。

還原一下需求的來源:一個網頁開始的時候,所有js代碼都寫在一個文件裡面,隻要加載這一個就夠瞭。隨著應用越來越復雜,代碼越來越多,一個文件不夠瞭,由於各種原因必須分成多個文件,還有用到其他的一些框架,這樣就必須加載多個js文件。有個問題就是加載的時候,瀏覽器會停止網頁渲染,加載越多而失去響應的時間就越長;另外,js文件之間存在依賴關系,因此要保證加載順序,當依賴關系很復雜的時候,代碼的編寫和維護都會變得困難。為瞭解決以上問題,於是像require.js這樣的項目就誕生瞭。

使用示例:



requirejs使用

<script data-main="main" src="https://cdn.staticfile.org/require.js/2.1.15/require.min.js" type="text/javascript" async="true"></script>



上面代碼中的script標簽data-main屬性是在require.js加載後要載入的js文件(main.js)

接下來是main.js,

require.config({
   paths: {
     jquery:[
       'https://cdn.staticfile.org/jquery/1.11.1/jquery.min',
       'https://cdn.bootcss.com/jquery/1.11.1/jquery.min'
    ]
  }
});
require(['jquery'],
  function(_jj) {
     alert(_jj.fn.jquery);
  }
);

使用require.config()方法,可以對模塊的加載行為進行自定義。require.config()參數就是一個對象,這個對象的paths屬性指定各個模塊的加載路徑。這裡直接是引用的線上的地址(去掉.js後綴)。

require()函數接受兩個參數。第一個參數是一個數組,表示所依賴的模塊;第二個參數是一個回調函數,當前面指定的模塊都加載成功後,它將被調用。加載的模塊會以參數形式傳入該函數,從而在回調函數內部就可以使用這些模塊。require()異步加載jquery,瀏覽器不會失去響應;它指定的回調函數,隻有前面的模塊都加載成功後,才會運行,解決瞭依賴性的問題。

如果,main.js隻是,

require(['jquery'],
   function(_jj) {
     alert(_jj.fn.jquery);
  }
);

這樣的話,默認它會去加載與main.js在同一個目錄的jquery.js文件。如果不在同一目錄,那麼用require.config()方法是有必要的,還有可以用baseUrl改變基目錄。

這裡簡要說下還有個shim參數,從理論上,require.js加載的模塊,必須是按照AMD規范、用define()函數定義的模塊。但更多的流行庫都沒有,那麼這樣的模塊在用require()加載之前,要先定義它們的一些特征。

最後,require.js要求每個模塊是一個單獨的js文件。這樣的話,如果加載多個模塊,就會發出多次HTTP請求,會影響網頁的加載速度。因此,require.js提供瞭一個優化工具r.js,當模塊部署完畢以後,可以用這個工具將多個模塊合並在一個文件中,減少HTTP請求數。

發佈留言