首頁 > web前端 > js教程 > 主體

第一次接觸JS require.js模組化工具

高洛峰
發布: 2016-12-28 14:22:52
原創
1401 人瀏覽過

隨著網站功能逐漸豐富,網頁中的js也變得越來越複雜和臃腫,原有透過script標籤來導入一個個的js檔案這種方式已經不能滿足現在互聯網開發模式,我們需要團隊協作、模組復用、單元測試等等一系列複雜的需求。

第一次接触JS require.js模块化工具

RequireJS是一個非常小巧的JavaScript模組載入框架,是AMD規格最好的實作者之一。最新版的RequireJS壓縮後只有14K,堪稱非常輕量。它也同時可以和其他的框架協同工作,使用RequireJS必將使您的前端程式碼品質得以提升。

requirejs可以帶來什麼好處

官方對requirejs的描述:

  RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be Itused . Using a modular script loader like RequireJS will improve the speed and quality of your code.

大致意思:

  在瀏覽器中可以作為js檔案的模組載入器,也可以用在Node和Rhino環境,以及abala.. .。這段話描述了requirejs的基本功能"模組化載入",什麼是模組化載入?我們要從之後的篇幅中一一解釋

  先來看一段常見的場景,透過範例來解釋如何運用requirejs

正常編寫方式
index.html:

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="a.js"></script>
 </head>
 <body>
  <span>body</span>
 </body>
</html>
登入後複製

a.js:

rrrereee這樣寫

function fun1(){
 alert("it works");
}
  
fun1();
登入後複製

第二種方法使用了塊作用域來申明function防止污染全域變量,本質還是一樣的,當運行上面兩種例子時不知道你是否注意到,alert執行的時候,html內容是一片空白的,即body並未被顯示,當點擊確定後,才出現,這就是JS阻塞瀏覽器渲染所導致的結果。

requirejs寫法

當然首先要到requirejs的網站去下載js -> requirejs.rog

index.html:

(function(){
 function fun1(){
  alert("it works");
 }
  
 fun1();
})()
登入後複製

a.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>
登入後複製

瀏覽器提示了"it works",說明運行正確,但是有一點不一樣,這次瀏覽器並不是一片空白,body已經出現在頁面中,目前為止可以知道requirejs具有以下優點:

1、防止js載入阻塞頁面渲染

2、使用程式呼叫的方式載入js ,防出現如下醜陋的場景

define(function(){
 function fun1(){
  alert("it works");
 }
  
 fun1();
})
登入後複製
以上就是本文的全部內容,希望對大家認識require.js模組化工具有所幫助。

更多第一次接觸JS require.js模組化工具相關文章請關注PHP中文網!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板