|
隨著網(wǎng)站功能逐漸豐富，網(wǎng)頁(yè)中的js也變得越來(lái)越復(fù)雜和臃腫，原有通過(guò)script標(biāo)簽來(lái)導(dǎo)入一個(gè)個(gè)的js文件這種方式已經(jīng)不能滿足現(xiàn)在互聯(lián)網(wǎng)開(kāi)發(fā)模式，我們需要團(tuán)隊(duì)協(xié)作、模塊復(fù)用、單元測(cè)試等等一系列復(fù)雜的需求。  RequireJS是一個(gè)非常小巧的JavaScript模塊載入框架，是AMD規(guī)范最好的實(shí)現(xiàn)者之一。最新版本的RequireJS壓縮后只有14K，堪稱非常輕量。它還同時(shí)可以和其他的框架協(xié)同工作，使用RequireJS必將使您的前端代碼質(zhì)量得以提升。 requirejs能帶來(lái)什么好處官方對(duì)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的基本功能"模塊化加載"，什么是模塊化加載？我們要從之后的篇幅中一一解釋 先來(lái)看一段常見(jiàn)的場(chǎng)景，通過(guò)示例講解如何運(yùn)用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(); })() 第二種方法使用了塊作用域來(lái)申明function防止污染全局變量，本質(zhì)還是一樣的，當(dāng)運(yùn)行上面兩種例子時(shí)不知道你是否注意到，alert執(zhí)行的時(shí)候，html內(nèi)容是一片空白的，即 requirejs寫法當(dāng)然首先要到requirejs的網(wǎng)站去下載js -> <!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"，說(shuō)明運(yùn)行正確，但是有一點(diǎn)不一樣，這次瀏覽器并不是一片空白，body已經(jīng)出現(xiàn)在頁(yè)面中，目前為止可以知道requirejs具有如下優(yōu)點(diǎ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> 代碼中的具體含義和其他特性將在之后的篇幅進(jìn)行講解：JS模塊化工具requirejs教程(二)：基本知識(shí) 文章來(lái)源：https://github.com/liuxey/blog/issues/1 |
|
|
來(lái)自： KyunraWang > 《require.js》
