快捷導(dǎo)航

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

更新時間：2016年04月17日 09:34:56 作者：請把姓名返給我

第一次接觸JS require.js模塊化工具，本文為大家介紹了JS模塊化工具require.js教程第一課認識require.js，編寫require.js，感興趣的小伙伴們可以參考一下

隨著網(wǎng)站功能逐漸豐富，網(wǎng)頁中的js也變得越來越復(fù)雜和臃腫，原有通過script標簽來導(dǎo)入一個個的js文件這種方式已經(jīng)不能滿足現(xiàn)在互聯(lián)網(wǎng)開發(fā)模式，我們需要團隊協(xié)作、模塊復(fù)用、單元測試等等一系列復(fù)雜的需求。

RequireJS是一個非常小巧的JavaScript模塊載入框架，是AMD規(guī)范最好的實現(xiàn)者之一。最新版本的RequireJS壓縮后只有14K，堪稱非常輕量。它還同時可以和其他的框架協(xié)同工作，使用RequireJS必將使您的前端代碼質(zhì)量得以提升。

requirejs能帶來什么好處

官方對requirejs的描述：

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

大致意思：

　　在瀏覽器中可以作為js文件的模塊加載器，也可以用在Node和Rhino環(huán)境，balabala...。這段話描述了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:

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

可能你更喜歡這樣寫

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

第二種方法使用了塊作用域來申明function防止污染全局變量，本質(zhì)還是一樣的，當運行上面兩種例子時不知道你是否注意到，alert執(zhí)行的時候，html內(nèi)容是一片空白的，即<span>body</span>并未被顯示，當點擊確定后，才出現(xiàn)，這就是JS阻塞瀏覽器渲染導(dǎo)致的結(jié)果。

requirejs寫法

當然首先要到requirejs的網(wǎng)站去下載js -> requirejs.rog
index.html:

<!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>

a.js:

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

瀏覽器提示了"it works"，說明運行正確，但是有一點不一樣，這次瀏覽器并不是一片空白，body已經(jīng)出現(xiàn)在頁面中，目前為止可以知道requirejs具有如下優(yōu)點：

1、防止js加載阻塞頁面渲染
2、使用程序調(diào)用的方式加載js，防出現(xiàn)如下丑陋的場景

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

以上就是本文的全部內(nèi)容，希望對大家認識require.js模塊化工具有所幫助。

您可能感興趣的文章: