javascript
RequireJS进阶（一） 转
為了應對日益復雜，大規模的JavaScript開發。我們化整為零，化繁為簡。將復雜的邏輯劃分一個個小單元，各個擊破。這時一個項目可能會有幾十個甚至上百個JS文件，每個文件為一個模塊單元。如果上線時都是這些小文件，那將對性能造成一定影響。
?
RequireJS提供了一個打包壓縮工具r.js來對模塊進行合并壓縮。r.js非常強大，不但可以壓縮js，css，甚至可以對整個項目進行打包。
r.js的壓縮工具使用UglifyJS或Closure Compiler。默認使用UglifyJS（jQuery也是使用它壓縮）。此外r.js需要node.js環境，當然它也可以運行在Java環境中如Rhino。
?
這篇以一個簡單的示例來感受下r.js，創建的目錄如下
和入門之三目錄結構一樣，寫了三個模塊cache，event，selector。這三個模塊的代碼就不在貼了。main.js也未做修改，實現的功能仍然是為頁面上的所有段落P元素添加個點擊事件，點擊后彈出P的innerHTML。唯一的區別是目錄中多了個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進階（一）</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合并壓縮后寫到r4目錄中。
?
好，讓我們開始合并壓縮吧。
1，打開windows命令窗口，cd到r4目錄中
?
2，輸入命令
node r.js -o baseUrl=js name=main out=built.js
?
命令行信息可以看到已經將各個js文件合并成功了。這時回到r4目錄會發現多了一個built.js文件。
好了，合并壓縮過程完成了。
?
把目錄r4放到apache或其它web服務器上，訪問index.html。網絡請求如下
?
可以看到除了require.js，就只有built.js了。大大減少了JS文件的http請求。這時點擊頁面上各個P元素，會彈出對應的innerHTML
這說明功能完損無缺。
?
下面對命令行做個簡單解釋。
node r.js -o baseUrl=js name=main out=built.js
-o ? ? ? ? 表示優化，該參數是固定的，必選。
baseUrl ?指存放模塊的根目錄，這里是r4/js，因為cd到r4中了，只需設置為js。可選，如果沒有設置將從r4中查找main.js。
name ? ? 模塊的入口文件，這里設置成“main”，那么r.js會從baseUrl+main去查找。這里實際是r4/js/main.js。r.js會分析main.js，找出其所依賴的所有其它模塊，然后合并壓縮。
out ? ? ? ?指合并壓縮后輸出的文件路徑，這里直接是built.js，那么將輸出到根目錄r4下。
?
好了，再介紹兩個參數
1，excludeShallow?合并時將排除該文件
node r.js -o baseUrl=js name=main out=built.js excludeShallow=selector
?
可以看到輸出信息中不再包括selector.js。這時運行index.html頁面，會發現selector.js被單獨請求下來了。
?
2，optimize (none/uglify/closure) ?指定是否壓縮，默認為uglify
不傳該參數時r.js默認以UglifyJS壓縮。設置為none則不會壓縮，僅合并，這在開發階段是很用用的。
node r.js -o baseUrl=js name=main out=built.js optimize=none
這時生成的built.js是沒有壓縮的。
?
總結：
這篇演示了采用模塊開發后上線前的一個小示例：把所有模塊文件合并為一個文件。
先下載r.js放到開發目錄中，然后使用命令行來合并壓縮。其中演示了命令行參數-o、baseUrl、name、out及excludeShallow、optimize的使用。-o、name、out是必選的，其它為可選。
?
r4.zip
轉載于:https://www.cnblogs.com/wanliyuan/p/5039573.html
總結
以上是生活随笔為你收集整理的RequireJS进阶（一） 转的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring Boot参数校验
- 下一篇： 关于javascript中的回调函数