腳本之家服務器常用軟件

快捷導航

require.js 加載過程與使用方法介紹

更新時間：2018年10月30日 10:20:55 作者：愛兔兔的太陽

require.js是javascript模塊化編程中常用的一個JS庫。這篇文章主要介紹了require.js 加載過程與使用方法,需要的朋友可以參考下

require.js簡介

require.js是javascript模塊化編程中常用的一個JS庫。

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

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

require.js的優(yōu)點

不使用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。所以一些有經(jīng)驗的程序員或許會更傾向與這樣寫：

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

 fun1();
})()

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

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

使用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();
})

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

同時，我們會發(fā)現(xiàn)使用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的定義中，我們可以在要加載的文件中添加它的依賴項，這些依賴文件會該文件被加載之前先加載，再以參數(shù)的方式傳入到該文件之中。
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三個模塊，然后以參數(shù)的方式傳入xxx.js中。

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

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

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

20181029 更新

在實際的使用中遇到了一些問題，發(fā)現(xiàn)實際上在同一個頁面中，如果出現(xiàn)了A依賴于C，B同時也依賴與C。我們如果在此時出現(xiàn)一個文件同時依賴與A與B，在這種情況下A與B所依賴的C會是同一個實例。

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

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

總結

以上所述是小編給大家介紹的require.js 加載過程與使用方法介紹，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

require.js 加載過程與使用方法介紹

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具