JavaScript组件打包css image

2016-02-20 01:06 9 1 收藏

今天图老师小编给大家精心推荐个JavaScript组件打包css image教程，一起来看看过程究竟如何进行吧！喜欢还请点个赞哦~

【 tulaoshi.com - Web开发】

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，而且一般是用。
有人做了些测试Uncompressed data in base64？ Probably not，大家自行判断。重复的图片引用直接用dataURI会搞得很大很大，gzip又笨得跟猪一样不会压掉。
我是选用存成js变量，淘宝的同学是用提class的方式 MHTML在ie7+/vista缺少结束分割符无法显示，win03sp2缺少会有安全提示，原因都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.tulaoshi.com/n/20160220/1633274.html

上一篇： word中如何才能打出“不等号”
下一篇：如何使用jQurey打造动态渐变效果

看过《JavaScript组件打包css image》的人还看了以下文章更多>>

VB打包技巧

加卸载程序项，可以选择“新建项”按钮，然后在“目标”栏中输入$(WinPath)\st6unst.exe -n "$(AppPath)\ST6UNST.LOG"，包括双引号。在“开始”项目中选择“$(WinPath)”，不包括双引号。

romfs.img,image.rom,image.ram(1)

标签： Linux Linux命令 Linux安装 Linux编程 Linux桌面 Linux软件 Linux内核 Linux管理

Q: 编译之后在 images 目录下生成的那些文件都是什么意思 A: 对于一些可能出现的文件,这里做一个解释: romfs.img: 这个文件是通过 tools/romfs-inst.sh 脚本,生成 romfs 目录及其下面的文件,然后通过 genromfs 程序打包成一个文件 romfs.img romfs.img 既可以放在 flash 中,也可以放在 ram 中,但需要在编译内核时在 driver/block/blkmem.c ...

CSS幻灯片教程:制作高效可维护组件化的CSS代码

标签： Web开发

国外前端开发者的CSS教程，PPT形式展示，主要探讨如何制作高效，可维护，组件化的CSS代码。里面有许多基础性的内容，总体整合在一起是个相当不错的CSS视频教程。本文由腾讯的童鞋翻译

image.rom,image.ram,romfs.img(3)

标签： Linux Linux命令 Linux安装 Linux编程 Linux桌面 Linux软件 Linux内核 Linux管理

优龙论坛 (http://www.ucdragon.com/bbs/index.asp)-- FS44B0X系列 (http://www.ucdragon.com/bbs/list.asp?boardid=44)---- 请问如何生成image.rom 和 image.ram (http://www.ucdragon.com/bbs/dispbbs.asp?boardid=44&id=907) 优龙论坛 (http://www.ucdragon.com/bbs/index.asp)-- FS44B0X系列 (http://www.ucdragon.com/bbs/list.asp?boar...

CSS Javascript滑动文本选项卡显示

标签： Web开发

CSS+Javascript实现新闻滑动文本选项卡显示，在网页中应用选项卡可以使网页显得更紧凑，结合AJAX技术可以使页面在有限的空间内展现更多的内容：以下是引用片段： !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" HTMLHEADTITLE绝对经典的滑轮新闻显示(jav...

查看更多精彩>>