隨著網站功能逐漸豐富，網頁中的js也變得越來越複雜和臃腫，原有通過script標簽來導入一個個的js文件這種方式已經不能滿足現在互聯網開發模式，我們需要團隊協作、模塊復用、單元測試等等一系列複雜的需求。 RequireJS是一個非常小巧的JavaScript模塊載入框架，是AMD規範最好的實現者之一 ...
隨著網站功能逐漸豐富，網頁中的js也變得越來越複雜和臃腫，原有通過script標簽來導入一個個的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 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環境，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防止污染全局變數，本質還是一樣的，當運行上面兩種例子時不知道你是否註意到，alert執行的時候，html內容是一片空白的，即<span>body</span>並未被顯示，當點擊確定後，才出現，這就是JS阻塞瀏覽器渲染導致的結果。
requirejs寫法
當然首先要到requirejs的網站去下載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已經出現在頁面中，目前為止可以知道requirejs具有如下優點：
- 防止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>
代碼中的具體含義和其他特性將在之後的篇幅進行講解：JS模塊化工具requirejs教程(二)：基本知識
文章來源：https://github.com/liuxey/blog/issues/1
