溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
require.js簡介
require.js是javascript模塊化編程中常用的一個JS庫。
現在的網頁功能較以前已經豐富了許多，同時網頁上需要導入越來越多的JS文件來實現這些功能。使用原有的script標簽一個個導入js文件會導致代碼的復雜與臃腫。并且導入的各個JS文件可能會有沖突，導致許多功能無法使用且會使bug非常難定位。
這樣的情況下我們就需要一個合適的Javascript模塊載入框架，來滿足我們團隊協作、模塊復用、單元測試等等一系列復雜的需求。使用require.js進行模塊化加載會使前端代碼的質量得到提升。
require.js的優點
不使用require.js的寫法
在以前的編程中，我們或許會這樣導入js文件：
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="xxx.js"></script> </head> <body> <span>body</span> </body> </html>
而在xxx.js文件中我們會這樣寫：
function fun1(){
alert("it works");
}
fun1();
上述的xxx.js文件中的fun1方法可能會與其他文件中的方法重名導致方法被重載覆蓋，會導致一些未知的bug。所以一些有經驗的程序員或許會更傾向與這樣寫：
(function(){
function fun1(){
alert("it works");
}
fun1();
})()
這樣編碼的好處在于限制了fun1方法的作用域，這樣就不會被其他的fun1方法所重寫。并且這樣的寫法也防止了污染全局變量。
我們運行以上的代碼時，會發現xxx.js中的alert運行時，頁面并未加載完成。（body標簽中的span并未顯示在頁面中）。這是因為alert阻塞了瀏覽器渲染，等alert完成后瀏覽器才會繼續進行渲染。（這里很像主進程被阻塞了，程序會等待當前操作完成后再繼續進行）。
使用require.js
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="require.js"></script> <script type="text/javascript"> require(["a"]); </script> </head> <body> <span>body</span> </body> </html>
這里先導入了require.js，然后使用require([“xxx”])來加載xxx.JS文件
xxx.js
define(function(){
function fun1(){
alert("it works");
}
fun1();
})
運行上兩個文件，我們發現alert時并未阻塞瀏覽器渲染，body中的span依然出現在了頁面上。所以首先我們可以發現，使用require.js進行加載時我們不會阻塞瀏覽器渲染。
同時，我們會發現使用require.js加載時，也是完全避免了js文件中的方法被重寫覆蓋或js文件中的變量、方法污染全局變量、方法的情況。
我們使用程序代碼加載模塊，也避免了下面這樣丑陋的情況：
<script type="text/javascript" src="a.js"></script> <script type="text/javascript" src="b.js"></script> <script type="text/javascript" src="c.js"></script> <script type="text/javascript" src="d.js"></script> <script type="text/javascript" src="e.js"></script> <script type="text/javascript" src="f.js"></script> <script type="text/javascript" src="g.js"></script> <script type="text/javascript" src="h.js"></script> <script type="text/javascript" src="i.js"></script> <script type="text/javascript" src="j.js"></script>
require.js 的加載
使用require.js異步加載js文件時，相當于是另開一個線程來進行加載文件這個操作。在require.js的定義中，我們可以在要加載的文件中添加它的依賴項，這些依賴文件會該文件被加載之前先加載，再以參數的方式傳入到該文件之中。
xxx.js寫法如下：
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});
此時xxx.js依賴于moduleA，moduleB，moduleC。 使用require.js加載xxx.js時，會先加載moduleA，moduleB，moduleC三個模塊，然后以參數的方式傳入xxx.js中。
這里我們原則上要避免循環依賴的出現。例如：A依賴與B，B又依賴與A。這樣就出現了循環依賴。
雖然出現循環依賴不會導致加載失敗，但是在加載A時，傳入A的依賴項B中的A參數會為null值，導致一些無法預知的問題。所以我們還是要盡量避免循環依賴的情況出現。
這里的異步加載都不會影響該文件以外的所有變量與方法。
20181029 更新
在實際的使用中遇到了一些問題，發現實際上在同一個頁面中，如果出現了A依賴于C，B同時也依賴與C。我們如果在此時出現一個文件同時依賴與A與B，在這種情況下A與B所依賴的C會是同一個實例。
也就是說，在一個頁面中，使用require.js加載的文件，是以類似于單例的形式的存在的。在首次加載時異步加載，其他文件需要依賴時就將已加載完成的文件注入。
這樣就會導致A與B使用的是C的同一個實例，C中的全局變量變化會同時影響到A、B兩個模塊。這是在開發過程中需要注意的。！
總結
以上所述是小編給大家介紹的require.js 加載過程與使用方法介紹，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
