JavaScript 组件打包模式

js组件凡是带着css image ，但这样行使起来也许会有些小贫困，为了让组件足够的solo，有了把css image也打包在js的设法，然后趁便把哀求数变少，这个趁便仿佛更重要，呵呵。

那奈何打包呢，固然有resource-packages这样的方案，然则我们的焦点用户还在玩ie6这种时尚的赏识器呢！

我的方案：

• CSS：CSS可以当成字符串存在js里，并由js动态加到页面上，页面用的也许不得当，但组件凡是不会影响。
• image：CSS里用的图片用dataURI（RFC 2397）跟MHTML（RFC 2557）的方法编到js内里。（秦歌写的dataURI和MHTML依然保举给不知道是什么东东的同窗看）。CSS里假如要绝对路径同样可以存js，js假若有直接用到的理论上也是可以，但js凡是只改className会较量好。
• flash：一些较量小的flash，好比存储，复制等也可以选择打包，不外此刻米办理非IE的题目，非IE行使外链吧

这个有个打包测试的例子。

一些细节和纠结的处所

1. 全部图片都打包到js里不必然公道，打包进去的应该是必用的图片。
   那解除的图片是再打一个包好呢照旧直接用图片？
2. 图片可以先压后编，我选用的图片压缩器材是pngout，并且一样平常是用-s5。
   有人做了些测试Uncompressed data in base64? Probably not，各人自行判定。
3. 一再的图片引用直接用dataURI会搞得很大很大，gzip又笨得跟猪一样不会压掉。
   我是选用存成js变量，淘宝的同窗是用提class的方法
4. MHTML在ie7+/vista穷乏竣事支解符无法表现，win03sp2穷乏Content-Type会有安详提醒，缘故起因都MIME不尺度，不是全部的对象都可以省。
5. 是选择把全部的对象都打包在一个文件照旧按MHTML跟dataURI分范例打包成两份在server按ua派文件或由类库智能去读取，仿佛后者较量调和。
6. swf用dataURI编入有题目，听说fp8没题目，此刻都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:上篇文章的评述里发明白这个打包的站，输出界面很帅

原文：http://www.aoao.org.cn/blog/2010/04/js-resource-packages/

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!