JavaScript组件打包模式
作者：aoao 来源：蓝色理想 发布时间：2010-04-08 16:26:00
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使用外链吧
这个有个打包测试的例子。
一些细节和纠结的地方
所有图片都打包到js里不一定合理，打包进去的应该是必用的图片。
那排除的图片是再打一个包好呢还是直接用图片？图片可以先压后编，我选用的图片压缩工具是pngout，而且一般是用
-s5。
有人做了些测试Uncompressed data in base64? Probably not，大家自行判断。重复的图片引用直接用dataURI会搞得很大很大，gzip又笨得跟猪一样不会压掉。
我是选用存成js变量，淘宝的同学是用提class的方式MHTML在ie7+/vista缺少结束分割符无法显示，win03sp2缺少
Content-Type会有安全提示，原因都MIME不标准，不是所有的东西都可以省。是选择把所有的东西都打包在一个文件还是按MHTML跟dataURI分类型打包成两份在server按ua派文件或由类库智能去读取，好像后者比较和谐。
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/
0
投稿猜你喜欢
可视性的问题几乎在每次不同产品的用户测试中都会出现：用户总是对页面的某些元素、功能视若无睹，或根本无视。基于此，对这个问题进行了一番小小的研- 时间久了，注册用户和朋友数据库里的废记录渐渐多了起来，尤其是电子邮件地址，请问有什么好的办法可以快速安全地将它们删除吗？试试下面这个办法，它
- 假设现有一张人员表（表名：Person），若想将姓名、身份证号、住址这三个字段完全相同的记录查找出来，使用1: SELECT p
- ORACLE的数据字典是数据库的重要组成部分之一，它随着数据库的产生而产生, 随着数据库的变化而变化, 体现为sys用户下的一些表和视图。数
- 在我发表上一篇《Zen Coding: 一种快速编写HTML/CSS代码的方法》之后，有网友表示不知道怎么在Dreamweaver上使用ze
- 在Asp中如何得到所有表单的名称跟对应的值。其实，这个问题很简单，但是可能还是有很多人不知道该怎么做，所以特地写下来，仅供参考。在Asp程序
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
- 在access中进行时间的比较sql语句很简单，如select * from table where thetime>#\"
- 组合集总计： group by with rollup/cube grouping sets 子查询按执行方式分：标准子查询、关联子查询 标
- 发一个数字拼图游戏，有点小疑问前几天写得，其中一段代码还要感谢“簡簡單單愛妳”的提示，不过我还是不太明白， ，有点笨。 $(&qu
- Cookie是一种小型文本文件，存储在用户计算机中，用于跟踪用户在互联网上的活动。Cookie通常由网站创建，以便记住用户的偏好和登录状态，
- 简单计数器代码如下所示：<％ Set fs = CreateObject("Scri
- 随着JS与XHTML的应用普及，越来越多的web界面应用技术出现在网站上，比如我们常见的日历控件，搜索下拉框等，这些web界面应用技术大大的
- 写程序的人在编写由asp页面生成静态页面html的时候，如果同时生成大量页面，一定遇到过浏览器下方的进度条上显示着3％，6％，10％等缓慢增
- UserAgent = Trim(Lcase(Request.Serve
- 经常看见有人问，MSSQL占用了太多的内存，而且还不断的增长；或者说已经设置了使用内存，可是它没有用到那么多，这是怎么一回事儿呢？ 首先，我
- 最近真的喜欢上了用xheditor这个在线编辑器，但是美中不足的是我发现它暂时还不能取代FCKeditor，因为没有在线上传功能啊！当然，F
- 当今，有一点可以肯定的是，设计的领域在扩大，这是一个需要设计的世界。拒最新的统计资料显示，中国目前已有正规的设计学院教学机构700多所，并且
- 其实这里的静态页面并不是真正意义上的静态，但可以达到了静态页面的解析效率，还未经项目测试，拿来分享。代码如下:<％ Cons
- 在html 5增加了新元素header、footer，测试过发现IE不能解析html 5新增的元素。代码如下：<!DOCTYPE&nb
