javascript
RequireJS进阶（一） 转
為了應(yīng)對(duì)日益復(fù)雜，大規(guī)模的JavaScript開(kāi)發(fā)。我們化整為零，化繁為簡(jiǎn)。將復(fù)雜的邏輯劃分一個(gè)個(gè)小單元，各個(gè)擊破。這時(shí)一個(gè)項(xiàng)目可能會(huì)有幾十個(gè)甚至上百個(gè)JS文件，每個(gè)文件為一個(gè)模塊單元。如果上線時(shí)都是這些小文件，那將對(duì)性能造成一定影響。
?
RequireJS提供了一個(gè)打包壓縮工具r.js來(lái)對(duì)模塊進(jìn)行合并壓縮。r.js非常強(qiáng)大，不但可以壓縮js，css，甚至可以對(duì)整個(gè)項(xiàng)目進(jìn)行打包。
r.js的壓縮工具使用UglifyJS或Closure Compiler。默認(rèn)使用UglifyJS（jQuery也是使用它壓縮）。此外r.js需要node.js環(huán)境，當(dāng)然它也可以運(yùn)行在Java環(huán)境中如Rhino。
?
這篇以一個(gè)簡(jiǎn)單的示例來(lái)感受下r.js，創(chuàng)建的目錄如下
和入門(mén)之三目錄結(jié)構(gòu)一樣，寫(xiě)了三個(gè)模塊cache，event，selector。這三個(gè)模塊的代碼就不在貼了。main.js也未做修改，實(shí)現(xiàn)的功能仍然是為頁(yè)面上的所有段落P元素添加個(gè)點(diǎn)擊事件，點(diǎn)擊后彈出P的innerHTML。唯一的區(qū)別是目錄中多了個(gè)r.js。
?
index.html做了修改，如下
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!doctype html> <html> ????<head> ????????<title>requirejs進(jìn)階（一）</title> ????????<meta charset="utf-8"/> ????????<style type="text/css"> ????????????p { ????????????????background:?#999; ????????????????width: 200px; ????????????} ????????</style> ????</head> ????<body> ????????<p>p1</p><p>p2</p><p>p3</p><p>p4</p><p>p5</p> ????????<script data-main="built"?src="require.js"></script> ????</body> </html> |
注意，data-main改為了“built”，上一篇的是“main”。我們將使用r.js把js目錄下的cache.js，event.js，selector.js，main.js合并壓縮后寫(xiě)到r4目錄中。
?
好，讓我們開(kāi)始合并壓縮吧。
1，打開(kāi)windows命令窗口，cd到r4目錄中
?
2，輸入命令
node r.js -o baseUrl=js name=main out=built.js
?
命令行信息可以看到已經(jīng)將各個(gè)js文件合并成功了。這時(shí)回到r4目錄會(huì)發(fā)現(xiàn)多了一個(gè)built.js文件。
好了，合并壓縮過(guò)程完成了。
?
把目錄r4放到apache或其它web服務(wù)器上，訪問(wèn)index.html。網(wǎng)絡(luò)請(qǐng)求如下
?
可以看到除了require.js，就只有built.js了。大大減少了JS文件的http請(qǐng)求。這時(shí)點(diǎn)擊頁(yè)面上各個(gè)P元素，會(huì)彈出對(duì)應(yīng)的innerHTML
這說(shuō)明功能完損無(wú)缺。
?
下面對(duì)命令行做個(gè)簡(jiǎn)單解釋。
node r.js -o baseUrl=js name=main out=built.js
-o ? ? ? ? 表示優(yōu)化，該參數(shù)是固定的，必選。
baseUrl ?指存放模塊的根目錄，這里是r4/js，因?yàn)閏d到r4中了，只需設(shè)置為js。可選，如果沒(méi)有設(shè)置將從r4中查找main.js。
name ? ? 模塊的入口文件，這里設(shè)置成“main”，那么r.js會(huì)從baseUrl+main去查找。這里實(shí)際是r4/js/main.js。r.js會(huì)分析main.js，找出其所依賴(lài)的所有其它模塊，然后合并壓縮。
out ? ? ? ?指合并壓縮后輸出的文件路徑，這里直接是built.js，那么將輸出到根目錄r4下。
?
好了，再介紹兩個(gè)參數(shù)
1，excludeShallow?合并時(shí)將排除該文件
node r.js -o baseUrl=js name=main out=built.js excludeShallow=selector
?
可以看到輸出信息中不再包括selector.js。這時(shí)運(yùn)行index.html頁(yè)面，會(huì)發(fā)現(xiàn)selector.js被單獨(dú)請(qǐng)求下來(lái)了。
?
2，optimize (none/uglify/closure) ?指定是否壓縮，默認(rèn)為uglify
不傳該參數(shù)時(shí)r.js默認(rèn)以UglifyJS壓縮。設(shè)置為none則不會(huì)壓縮，僅合并，這在開(kāi)發(fā)階段是很用用的。
node r.js -o baseUrl=js name=main out=built.js optimize=none
這時(shí)生成的built.js是沒(méi)有壓縮的。
?
總結(jié)：
這篇演示了采用模塊開(kāi)發(fā)后上線前的一個(gè)小示例：把所有模塊文件合并為一個(gè)文件。
先下載r.js放到開(kāi)發(fā)目錄中，然后使用命令行來(lái)合并壓縮。其中演示了命令行參數(shù)-o、baseUrl、name、out及excludeShallow、optimize的使用。-o、name、out是必選的，其它為可選。
?
r4.zip
轉(zhuǎn)載于:https://www.cnblogs.com/wanliyuan/p/5039573.html
總結(jié)
以上是生活随笔為你收集整理的RequireJS进阶（一） 转的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Spring Boot参数校验
- 下一篇： appium+python自动化57-c