require.js的作用簡單介紹

admin發表於2017-04-12
UIJS

在閱讀本章節之前，建議閱讀以下幾篇文章:

（1）.javascript如何實現模組程式設計簡單介紹一章節。

（2）.javascript的AMD規範簡單介紹一章節。

現在網站功能已經非昨日相比，強大程度接近於應用程式，當然隨之而來的就是程式碼量的龐大，和javascript的海量應用。

原來通過一個<script>引入一個簡單的js檔案就可以網頁的功能需求，現在則需要引入大量的js檔案，如下形式:

[HTML] 純文字檢視 複製程式碼
<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>

上面僅僅是做一個說明，在實際應用中，引用的js檔案可能比上面的要多的多。

如此引入js檔案問題實在是非常多，最明顯的有如下兩點:

（1）.載入的時候可能會導致網頁渲染的阻塞，導致空白頁面。

（2）.js檔案之間可能存在依賴關係，因此需要嚴格保證載入的順序，當依賴關係複雜的時候，維護很困難。

於是require.js的作用就得到了體現。

require.js的作用:

下面先給出require.js的作用，後面再通過程式碼例項進行一下演示。

（1）.實現js檔案的非同步載入，避免網頁失去響應。

（2）.管理模組之間的依賴性，便於程式碼的編寫和維護。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="demo/js/js/a.js"></script>
</head>
<body>
<span>頁面的文字將會在彈出視窗之後才能看到</span>
</body>
</html>

alert()會阻塞頁面的載入和渲染，不會看到span中的文字，當點選確定之後才會看到文字。

a.js中的程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
alert("螞蟻部落");

我們們再來看一下使用require.js後的效果，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="demo/js/js/require.js"></script>
<script type="text/javascript">
require(["demo/js/js/b"]);
</script>
</head>
<body>
<span>內容顯示不會被堵塞</span>
</body>
</html>

可以看到span中的內容顯示不會被堵塞。

b.js的中的程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
define(function () {
  function func() {
    alert("螞蟻部落");
  }
  func();
})

關於require.js的使用可以參閱require.js用法介紹一章節。

相關文章