版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/liujian0/article/details/52932254
RequireJS是一個非常小巧的JavaScript模塊載入框架，是AMD規範最好的實現者之一。最新版本的RequireJS壓縮後只有14K，堪稱非常輕量。它還同時可以和其他的框架協同工作，使用RequireJS必將使您的前端代碼質量得以提升。
RequireJS會讓你以不同於往常的方式去寫JavaScript。你將不再使用script標籤在HTML中引入JS文件，以及不用通過script標籤順序去管理依賴關係。當然也不會有阻塞（blocking）的情況發生。
先來看一段常見的場景，通過示例講解如何運用requirejs
正常編寫方式
test.html
<!DOCTYPE html>
<html>
<head>
<title>淺嘗JS模塊化工具RequireJS</title>
<script type="text/javascript" src="hello.js"></script>
</head>
<body>
<span>this is body</span>
</body>
</html>hello.js
function sayhello() {
alert('hello world!');
}
sayhello();或者是這樣的
(function() {
function sayhello() {
alert('hello world!');
}
sayhello();
})();第二種方法使用了塊作用域來申明function防止污染全局變量，本質還是一樣的，當運行上面兩種例子時不知道你是否注意到，alert執行的時候，html內容是一片空白的，即this is body並未被顯示，當點擊確定後，纔出現，這就是JS阻塞瀏覽器渲染導致的結果。
requirejs寫法
test.html
<!DOCTYPE html>
<html>
<head>
<title>淺嘗JS模塊化工具RequireJS</title>
<script type="text/javascript" src="require.js"></script>
<script type="text/javascript">
require(["hello"]);
</script>
</head>
<body>
<span>this is body</span>
</body>
</html>hello.js
define(function() {
function sayhello() {
alert('hello world!');
}
sayhello();
});瀏覽器提示了”hello world!”，說明運行正確，但是有一點不一樣，這次瀏覽器並不是一片空白，body已經出現在頁面中,目前爲止可以知道requirejs具有如下優點：
- 防止js加載阻塞頁面渲染
- 不再使用script標籤在HTML中引入JS文件，以及不用通過script標籤順序去管理依賴關係