|
JavaScript組件打包模式
js組件通常帶著css image ，但這樣使用起來可能會有些小麻煩，為了讓組件足夠的solo，有了把css image也打包在js的想法，然后順便把請求數(shù)變少，這個順便好像更重要，呵呵。
那怎樣打包呢，雖然有resource-packages這樣的方案，可是我們的核心用戶還在玩ie6這種時尚的瀏覽器呢！
我的方案：
- CSS：CSS可以當成字符串存在js里，并由js動態(tài)加到頁面上，頁面用的可能不適合，但組件通常不會影響。
- image：CSS里用的圖片用dataURI（RFC 2397）跟MHTML（RFC 2557）的方式編到js里面。（秦歌寫的dataURI和MHTML依然推薦給不知道是什么東東的同學看）。CSS里如果要絕對路徑同樣可以存js，js如果有直接用到的理論上也是可以，但js通常只改className會比較好。
- flash：一些比較小的flash，比如存儲，復制等也可以選擇打包，不過現(xiàn)在米解決非IE的問題，非IE使用外鏈吧
這個有個打包測試的例子。
一些細節(jié)和糾結(jié)的地方
- 所有圖片都打包到js里不一定合理，打包進去的應該是必用的圖片。
那排除的圖片是再打一個包好呢還是直接用圖片？
- 圖片可以先壓后編，我選用的圖片壓縮工具是pngout，而且一般是用
-s5。
有人做了些測試Uncompressed data in base64? Probably not，大家自行判斷。
- 重復的圖片引用直接用dataURI會搞得很大很大，gzip又笨得跟豬一樣不會壓掉。
我是選用存成js變量，淘寶的同學是用提class的方式
- MHTML在ie7+/vista缺少結(jié)束分割符無法顯示，win03sp2缺少
Content-Type會有安全提示，原因都MIME不標準，不是所有的東西都可以省。
- 是選擇把所有的東西都打包在一個文件還是按MHTML跟dataURI分類型打包成兩份在server按ua派文件或由類庫智能去讀取，好像后者比較和諧。
- swf用dataURI編入有問題，據(jù)說fp8沒問題，現(xiàn)在都fp10了。
另一種solo的方案就是把js打包到swf，不過感覺不和諧
multipart/related例子
不算標準但能跑，換行也是很重要的
Content-Type:multipart/related;boundary="_BAIDU_YOUA_BB_YEP"
--_BAIDU_YOUA_BB_YEP
Content-Type:image/png
Content-Location:logo.png
Content-Transfer-Encoding:base64
...base64...
--_BAIDU_YOUA_BB_YEP
Content-Type:image/png
Content-Location:nono.png
Content-Transfer-Encoding:base64
...base64...
--_BAIDU_YOUA_BB_YEP--
btw:上篇文章的評論里發(fā)現(xiàn)了這個打包的站，輸出界面很帥
原文：http://www.aoao.org.cn/blog/2010/04/js-resource-packages/
本文鏈接：http://m.95time.cn/tech/web/2010/7488.asp 
出處：藍色理想
責任編輯：moby
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
