亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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)頁上需要導(dǎo)入越來越多的JS文件來實現(xiàn)這些功能。使用原有的script標(biāo)簽一個個導(dǎo)入js文件會導(dǎo)致代碼的復(fù)雜與臃腫。并且導(dǎo)入的各個JS文件可能會有沖突，導(dǎo)致許多功能無法使用且會使bug非常難定位。

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

require.js的優(yōu)點

不使用require.js的寫法

在以前的編程中，我們或許會這樣導(dǎo)入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方法可能會與其他文件中的方法重名導(dǎo)致方法被重載覆蓋，會導(dǎo)致一些未知的bug。所以一些有經(jīng)驗的程序員或許會更傾向與這樣寫：

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

 fun1();
})()

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

我們運行以上的代碼時，會發(fā)現(xiàn)xxx.js中的alert運行時，頁面并未加載完成。（body標(biāo)簽中的span并未顯示在頁面中）。這是因為alert阻塞了瀏覽器渲染，等alert完成后瀏覽器才會繼續(xù)進(jìn)行渲染。（這里很像主進(jìn)程被阻塞了，程序會等待當(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”])來加載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進(jìn)行加載時我們不會阻塞瀏覽器渲染。

同時，我們會發(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文件時，相當(dāng)于是另開一個線程來進(jìn)行加載文件這個操作。在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)依賴不會導(dǎo)致加載失敗，但是在加載A時，傳入A的依賴項B中的A參數(shù)會為null值，導(dǎo)致一些無法預(yù)知的問題。所以我們還是要盡量避免循環(huán)依賴的情況出現(xiàn)。

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

20181029 更新

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

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

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

總結(jié)

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

相關(guān)文章

最新評論