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
投稿猜你喜欢
1.算法概述决策树算法是在已知各种情况发生概率的基础上，通过构成决策树来求取净现值的期望值大于等于零的概率，评价项目风险，判断其可行性的决策- 线程池map（）方法传递多参数list之前通过threading.thread（）进行了助力接口的多线程并发，但是这个针对并发数量较少的时候
- 本文实例讲述了Python导出DBF文件到Excel的方法。分享给大家供大家参考。具体如下：from dbfpy import dbffro
- import Exception# except 在捕获错误异常的时候 是要根据具体的错误类型来捕获的# 用一个块 可以捕获多个不同类型的异
- 1）正则表达式的使用。 #正则表达式的模块 import re #正则表达式 rePattern = '.*[0-9]{4}'
- 在 Web 编辑器领域，CKEditor – 七年的专注，赢取的是王者风范。TinyMCE – 五年前的小家碧玉，如今已成长为大家闺秀。Go
- 编程语言：python3.9题目编写程序，要求程序能根据用户输入的圆半径数据计算圆的面积（圆的面积公式：S=πr^2），并分别
- 如果我们希望在网页的不同角落里放置不重复平铺的背景图，该怎么办呢？比如网页的背景要如图所示，并要求在不
- 1、环境1、python 3.72、pyinstaller2、下载方式:2.1 python安装（略）2.2 安装pyinstaller打开
- 前言：自增列可使用 auto_increment 来实现，当一个列被标识为 auto_increment 之后，在添加时如果不给此列设置任何
- AnacondaNavigator Jupyter Notebook更换Python内核 前言为什么要换呢，因为新安装的Anaco
- 一、前言在上一小节，我们介绍了文件的基本操作以及数据交换的格式，为了巩固我们上一节文件操作的知识。在这里我们做一个最基本的案例:用户登录二、
- 互斥锁在Golang中，互斥锁（Mutex）是一种基本的同步原语，用于实现对共享资源的互斥访问。互斥锁通过在代码中标记临界区来控制对共享资源
- 重复性任务总是耗时且无聊，想一想你想要一张一张地裁剪 100 张照片或 Fetch API、纠正拼写和语法等工作，所有这些任务都很耗时，为什
- 首先输入一个矩阵：>>> b=[[1,2,3,4,5,6],[2,2,3,4,5,6],[3,2,3,4,5,6],[4,
- 准备工作：python：https://www.python.org/downloads/Dev-C++：https://sourcefor
- 本文实例讲述了Python简单删除列表中相同元素的方法。分享给大家供大家参考，具体如下：去除列表中重复的元素，非常简单，直接上代码：a =
- 哲学上有种说法，“运动是绝对的，静止是相对的”。我们在编写各样的效果时，时常会碰到动画。下面的章，将讨论动画的原理以及实现。动画，简而言之就
- 本文实例为大家分享了python使用Matplotlib绘制分段函数的具体代码，供大家参考，具体内容如下环境Python3Mac OS代码#
- Golang 是一种现代的编程语言，它具有高效、简洁和可扩展等特点，因此在各种领域广泛应用。在 Golang 中，读取文件是一个常见的操作。
