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使用外链吧

这个有个打包测试的例子

一些细节和纠结的地方

  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/

标签:javascript,组件,打包
0
投稿

猜你喜欢

  • 数据库连接字符串的常见问题和解决方法

    2008-11-28 15:16:00
  • 彻底弄懂CSS盒子模式之五(定位强化练习)

    2007-05-11 16:51:00
  • mysql 导入导出数据

    2011-02-23 12:27:00
  • 2010怎么就宅了——我们是设计星球的阿凡达

    2010-03-09 13:26:00
  • ACCESS模糊查询出现"内存溢出"

    2009-08-13 14:25:00
  • Flash在web客户端的潜在问题

    2009-05-20 12:11:00
  • 仿淘宝星级评分效果

    2010-09-03 18:37:00
  • asp检测文件编码方法

    2007-10-03 14:27:00
  • Oracle数据安全面面观

    2010-07-27 13:27:00
  • ASP程序实现过滤脏话代码

    2008-03-19 12:07:00
  • 引起用户注意的界面方式

    2007-10-07 21:17:00
  • JS+ASP实现无刷新新闻列表之分页

    2007-08-22 12:57:00
  • 如何配置一个稳定的SQL Server数据库

    2008-12-09 14:07:00
  • MYSQL数据库实用学习资料之常用命令集合

    2009-03-06 18:12:00
  • javascript面向对象编程(一)

    2008-03-07 12:54:00
  • 用书的概念理解小网站结构

    2007-10-31 18:08:00
  • ASP中3种分页显示的性能比较

    2007-08-15 13:37:00
  • 用户体验的误解

    2008-07-15 12:31:00
  • 教你快速实现 MySQL查询结果的分页显示

    2008-11-27 16:17:00
  • CSS教程:轻松解决表格的nobr问题

    2008-10-29 11:55:00
  • asp之家 网络编程 m.aspxhome.com