隨著網站功能逐漸豐富,網頁中的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 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();
index.html:
(function(){ function fun1(){ alert("it works"); } fun1(); })()
<!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>
2、使用程式呼叫的方式載入js ,防出現如下醜陋的場景
define(function(){ function fun1(){ alert("it works"); } fun1(); })