RequireJS介紹
RequireJS 是一個JavaScript模塊加載器。它非常適合在瀏覽器中使用。使用RequireJS加載模塊化腳本將提高代碼的加載速度和質量。
兼容性
| 瀏覽器（browser） | 是否兼容 |
|---|---|
| IE 6+ | 兼容 ✔ |
| Firefox 2+ | 兼容 ✔ |
| Safari 3.2+ | 兼容 ✔ |
| Chrome 3+ | 兼容 ✔ |
| Opera 10+ | 兼容 ✔ |
優點
實現js文件的異步加載，避免網頁失去響應
管理模塊之間的依賴性，便于代碼的編寫和維護
快速上手
step 1
引入require.js
require()中的依賴是一個數組，即使只有一個依賴，你也必須使用數組來定義
第二個參數是回調函數（callback）,可以用來解決模塊之間的依賴性
<!DOCTYPE html><html> <head> <script type="text/javascript" src="require.js"></script> <script type="text/javascript"> require(["js/a"], function(){ alert("load finished"); }); </script> </head> <body> body </body></html>step 2
require.config是用來配置模塊加載位置
如果固定的位置比較長，可以使用 baseUrl : "js"，則paths中就不用寫js了
<!DOCTYPE html><html> <head> <script type="text/javascript" src="require.js"></script> <script type="text/javascript"> require.config({ paths : { "jquery" : ["http://vs.thsi.cn/js/jquery-1.7.2.min", "js/jquery"], "a" : "js/a" } }); require(["jquery", "a"], function(){ alert("load finished"); }); </script> </head> <body> body </body></html>step 3
step 2中重復出現了require.config配置，如果每個頁面中都加入配置，就顯得不大好了，requirejs提供了一種叫"主數據"的功能
創建一個main.js把step 2中require.config放到main.js中
<script data-main="js/main" src="js/require.js"></script>
step 4
通過require加載的模塊一般都需要符合AMD規范即使用define來申明模塊，但是部分時候需要加載非AMD規范的js，這時候就需要用到另一個功能：shim
require.config({ shim: { "underscore" : { exports : "_"; }, "jquery.form" : ["jquery"] }});require(["jquery", "jquery.form"], function($){ $(function(){ $("#form").ajaxSubmit({...}); })});以上就是小編為大家帶來的關于RequireJS的簡單介紹即使用方法全部內容了，希望大家多多支持武林網~
新聞熱點
疑難解答
