require.js 加載過(guò)程與使用方法介紹

發(fā)布時(shí)間：2020-09-27 02:08:10 來(lái)源：腳本之家閱讀：158 作者：愛兔兔的太陽(yáng) 欄目：web開發(fā)

require.js簡(jiǎn)介

require.js是javascript模塊化編程中常用的一個(gè)JS庫(kù)。

現(xiàn)在的網(wǎng)頁(yè)功能較以前已經(jīng)豐富了許多，同時(shí)網(wǎng)頁(yè)上需要導(dǎo)入越來(lái)越多的JS文件來(lái)實(shí)現(xiàn)這些功能。使用原有的script標(biāo)簽一個(gè)個(gè)導(dǎo)入js文件會(huì)導(dǎo)致代碼的復(fù)雜與臃腫。并且導(dǎo)入的各個(gè)JS文件可能會(huì)有沖突，導(dǎo)致許多功能無(wú)法使用且會(huì)使bug非常難定位。

這樣的情況下我們就需要一個(gè)合適的Javascript模塊載入框架，來(lái)滿足我們團(tuán)隊(duì)協(xié)作、模塊復(fù)用、單元測(cè)試等等一系列復(fù)雜的需求。使用require.js進(jìn)行模塊化加載會(huì)使前端代碼的質(zhì)量得到提升。

require.js的優(yōu)點(diǎn)

不使用require.js的寫法

在以前的編程中，我們或許會(huì)這樣導(dǎo)入js文件：

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="xxx.js"></script>
 </head>
 <body>
  <span>body</span>
 </body>
</html>

而在xxx.js文件中我們會(huì)這樣寫：

function fun1(){
 alert("it works");
}

fun1();

上述的xxx.js文件中的fun1方法可能會(huì)與其他文件中的方法重名導(dǎo)致方法被重載覆蓋，會(huì)導(dǎo)致一些未知的bug。所以一些有經(jīng)驗(yàn)的程序員或許會(huì)更傾向與這樣寫：

(function(){
 function fun1(){
  alert("it works");
 }

 fun1();
})()

這樣編碼的好處在于限制了fun1方法的作用域，這樣就不會(huì)被其他的fun1方法所重寫。并且這樣的寫法也防止了污染全局變量。

我們運(yùn)行以上的代碼時(shí)，會(huì)發(fā)現(xiàn)xxx.js中的alert運(yùn)行時(shí)，頁(yè)面并未加載完成。（body標(biāo)簽中的span并未顯示在頁(yè)面中）。這是因?yàn)閍lert阻塞了瀏覽器渲染，等alert完成后瀏覽器才會(huì)繼續(xù)進(jìn)行渲染。（這里很像主進(jìn)程被阻塞了，程序會(huì)等待當(dāng)前操作完成后再繼續(xù)進(jìn)行）。

使用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>

這里先導(dǎo)入了require.js，然后使用require([“xxx”])來(lái)加載xxx.JS文件

xxx.js
define(function(){
 function fun1(){
  alert("it works");
 }

 fun1();
})

運(yùn)行上兩個(gè)文件，我們發(fā)現(xiàn)alert時(shí)并未阻塞瀏覽器渲染，body中的span依然出現(xiàn)在了頁(yè)面上。所以首先我們可以發(fā)現(xiàn)，使用require.js進(jìn)行加載時(shí)我們不會(huì)阻塞瀏覽器渲染。

同時(shí)，我們會(huì)發(fā)現(xiàn)使用require.js加載時(shí)，也是完全避免了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文件時(shí)，相當(dāng)于是另開一個(gè)線程來(lái)進(jìn)行加載文件這個(gè)操作。在require.js的定義中，我們可以在要加載的文件中添加它的依賴項(xiàng)，這些依賴文件會(huì)該文件被加載之前先加載，再以參數(shù)的方式傳入到該文件之中。
xxx.js寫法如下：

　　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){

　　　　// some code here

　　});

此時(shí)xxx.js依賴于moduleA，moduleB，moduleC。使用require.js加載xxx.js時(shí)，會(huì)先加載moduleA，moduleB，moduleC三個(gè)模塊，然后以參數(shù)的方式傳入xxx.js中。

這里我們?cè)瓌t上要避免循環(huán)依賴的出現(xiàn)。例如：A依賴與B，B又依賴與A。這樣就出現(xiàn)了循環(huán)依賴。

雖然出現(xiàn)循環(huán)依賴不會(huì)導(dǎo)致加載失敗，但是在加載A時(shí)，傳入A的依賴項(xiàng)B中的A參數(shù)會(huì)為null值，導(dǎo)致一些無(wú)法預(yù)知的問(wèn)題。所以我們還是要盡量避免循環(huán)依賴的情況出現(xiàn)。

這里的異步加載都不會(huì)影響該文件以外的所有變量與方法。

20181029 更新

在實(shí)際的使用中遇到了一些問(wèn)題，發(fā)現(xiàn)實(shí)際上在同一個(gè)頁(yè)面中，如果出現(xiàn)了A依賴于C，B同時(shí)也依賴與C。我們?nèi)绻诖藭r(shí)出現(xiàn)一個(gè)文件同時(shí)依賴與A與B，在這種情況下A與B所依賴的C會(huì)是同一個(gè)實(shí)例。

也就是說(shuō)，在一個(gè)頁(yè)面中，使用require.js加載的文件，是以類似于單例的形式的存在的。在首次加載時(shí)異步加載，其他文件需要依賴時(shí)就將已加載完成的文件注入。

這樣就會(huì)導(dǎo)致A與B使用的是C的同一個(gè)實(shí)例，C中的全局變量變化會(huì)同時(shí)影響到A、B兩個(gè)模塊。這是在開發(fā)過(guò)程中需要注意的。！

總結(jié)

以上所述是小編給大家介紹的require.js 加載過(guò)程與使用方法介紹，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問(wèn)一下細(xì)節(jié)

require.js 加載過(guò)程與使用方法介紹

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽