關(guān)于RequireJS的簡(jiǎn)單介紹即使用方法
RequireJS介紹
RequireJS 是一個(gè)JavaScript模塊加載器。它非常適合在瀏覽器中使用。使用RequireJS加載模塊化腳本將提高代碼的加載速度和質(zhì)量。
兼容性
瀏覽器(browser) | 是否兼容 |
---|---|
IE 6+ | 兼容 ✔ |
Firefox 2+ | 兼容 ✔ |
Safari 3.2+ | 兼容 ✔ |
Chrome 3+ | 兼容 ✔ |
Opera 10+ | 兼容 ✔ |
優(yōu)點(diǎn)
實(shí)現(xiàn)js文件的異步加載,避免網(wǎng)頁失去響應(yīng)
管理模塊之間的依賴性,便于代碼的編寫和維護(hù)
快速上手
step 1
引入require.js
require()中的依賴是一個(gè)數(shù)組,即使只有一個(gè)依賴,你也必須使用數(shù)組來定義
第二個(gè)參數(shù)是回調(diào)函數(shù)(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是用來配置模塊加載位置
如果固定的位置比較長(zhǎng),可以使用 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中重復(fù)出現(xiàn)了require.config配置,如果每個(gè)頁面中都加入配置,就顯得不大好了,requirejs提供了一種叫"主數(shù)據(jù)"的功能
創(chuàng)建一個(gè)main.js把step 2中require.config放到main.js中
<script data-main="js/main" src="js/require.js"></script>
step 4
通過require加載的模塊一般都需要符合AMD規(guī)范即使用define來申明模塊,但是部分時(shí)候需要加載非AMD規(guī)范的js,這時(shí)候就需要用到另一個(gè)功能:shim
require.config({ shim: { "underscore" : { exports : "_"; }, "jquery.form" : ["jquery"] } }); require(["jquery", "jquery.form"], function($){ $(function(){ $("#form").ajaxSubmit({...}); }) });
以上就是小編為大家?guī)淼年P(guān)于RequireJS的簡(jiǎn)單介紹即使用方法全部?jī)?nèi)容了,希望大家多多支持腳本之家~
相關(guān)文章
本地圖片預(yù)覽(支持IE6/IE7/IE8/Firefox3)經(jīng)驗(yàn)總結(jié)
遇到的本地圖片預(yù)覽的需求,IE6下可以直接從file的value獲取圖片路徑來顯示預(yù)覽,IE7和IE8下通過select獲取file的圖片路徑,再用濾鏡來顯示預(yù)覽,至于FireFox祥看本文吧,希望可以幫助到你2013-03-03JS pushlet XMLAdapter適配器用法案例解析
這篇文章主要介紹了JS pushlet XMLAdapter適配器用法案例解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10JavaScript求解最長(zhǎng)回文子串的方法分享
這篇文章主要為大家介紹了JavaScript求解最長(zhǎng)回文子串的幾種方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-08-08在IE8上JS實(shí)現(xiàn)combobox支持拼音檢索功能
這篇文章主要介紹了在IE8上JS實(shí)現(xiàn)combobox支持拼音檢索功能的相關(guān)資料,本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05