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/
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Mysql8断电崩溃解决
Python实现XML文件解析的示例代码
Python中new方法的详解
Python实现emoji表情的简单方法
![](https://img.aspxhome.com/file/2023/6/89316_0s.jpg)
php中session_id()函数详细介绍,会话id生成过程及session id长度
JavaScript获取时区实现过程解析
Python使用Requests请求网页方式
GO语言make()分配用法实例
python制作定时发送信息脚本的实现思路
![](https://img.aspxhome.com/file/2023/0/105050_0s.png)
在TensorFlow中屏蔽warning的方式
解决 jupyter notebook 回车换两行问题
![](https://img.aspxhome.com/file/2023/3/72793_0s.jpg)
显示日期格式的几个函数
matplotlib quiver箭图绘制案例
![](https://img.aspxhome.com/file/2023/3/76893_0s.jpg)
瞬间的快感之细节提升用户满意度
![](https://img.aspxhome.com/file/UploadPic/201011/17/02-94s.jpg)
js获取checkbox值的方法
[翻译]网页设计中的模式窗口
![](https://img.aspxhome.com/file/UploadPic/20095/29/376600_124350365243zv-44s.jpg)
python实现地牢迷宫生成的完整步骤
![](https://img.aspxhome.com/file/2023/4/131034_0s.png)
Python学习之yaml文件的读取详解
![](https://img.aspxhome.com/file/2023/1/109591_0s.jpg)
如何强制删除或恢复SQLServer正在使用的数据库
Ubuntu16.04 server下配置MySQL,并开启远程连接的方法
![](https://img.aspxhome.com/file/2023/5/65705_0s.png)