简短的几句js实现css压缩和反压缩功能
写在前面
最近一直在整理css,但因为现在Visual Studio 2013太智能了,它每每在我按ctrl+E+D进行格式化代码的时候,就会将css进行层次格式化(如下图所示),而这个格式让我老大实在无法忍受,我老大认为它实在是太浪费空间了。
那我应该怎么办呢,每次将本地代码上传之前都打开另外一个vs10,然后复制粘贴,可是下次从服务器拉下来代码我一编辑,手痒一下就又变成上面这个鬼样,折磨的我呀
刚刚看了豪情的一篇文章,http://www.cnblogs.com/jikey/archive/2010/04/19/1715474.html 才发现有这么简单的方法来实现css的格式化,瞬间觉得弱爆了
CSS压缩效果见下
body * { font-size:10pt; }/* ss sda */ p { clear:left; padding:5px 10px; } td , fieldset { padding : 10px ; } textarea { width:90%; height:10em; }
压缩代码 格式(多行) 格式(单行) 还原代码
大家可以点击上面的“压缩代码”、“格式多行”等按钮试一下效果
JS实现CSS压缩及格式化原理
<script type="text/javascript">function $(id) { return document.getElementById(id); }function cssCode(obj) {this.init = function () {var code = obj.value;if (!this.code || this.code == "") this.code = code;//先保存起来 以方便后续还原code = code.replace(/(\n|\t|\s)*/ig, '$1');code = code.replace(/\n|\t|\s(\{|\}|\,|\:|\;)/ig, '$1');code = code.replace(/(\{|\}|\,|\:|\;)\s/ig, '$1');return code;}this.compress = function () {var code = this.init();return code;}this.format = function () {var code = this.init();code = code.replace(/(\{)/ig, ' $1');code = code.replace(/(\{|\;)/ig, '$1\n\t');code = code.replace(/\t*(\})/ig, '$1\n');code = code.replace(/(\*\/)/ig, '$1\n');return code;}this.formatOver = function () {var code = this.init();code = code.replace(/(\})/ig, '$1\n');code = code.replace(/(\*\/)/ig, '$1\n');return code;}this.recover = function () {return (this.code) ? this.code : obj.value;}var my = this;obj.onkeydown = function () {my.code = "";}}var code = new cssCode($('cssCode'));</script>
大家看到没有,简简单单的几句话,也就是利用正则将换行、tab键、空格等去掉来实现压缩。
哎,发现自己太弱了,还是应该多跟园子里的大神学习下。(写这篇博文的意义还在于,原来让自己的博文上出现界面展示效果其实原理也很简单,只要把相关script和style插入到博文的html里面就可以了)
简短的几句js实现css压缩和反压缩功能相关推荐
- 压缩与反压缩之 COMPRESS 与 EXPAND
转自Alexis Zhang's Blog,ITECN的blog水平比起51cto是高不少的,只是牛人们一般不爱写blog,所以更新很慢.... 压缩与反压缩之 COMPRESS 与 EXPAND 笔 ...
- JS 文件压缩与反压缩
压缩 js 代码不但可以大大减小 js 文件大小, 还能给用户设置一定的技术门槛使其不能直观的阅读 js 源代码. 下面推荐一个在线压缩 js 工具 Dean Edward's packer: htt ...
- [转载]在ASP.NET MVC中,使用Bundle来打包压缩js和css
在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原 ...
- java Web程序使用wro4j合并、压缩js、css等静态资源
在Web项目中,js.css合并压缩,不仅有利于减少Http请求数量.减少宽带资源占用,还能有效的管理各种js.css的引入,使整个项目更加有序.而对于访问用户来说,其更大的好处是增加了页面的打开速度 ...
- js合并压缩 java_Java Web程序使用wro4j合并、压缩js、css等静态资源
在Web项目中,js.css合并压缩,不仅有利于减少Http请求数量.减少宽带资源占用,还能有效的管理各种js.css的引入,使整个项目更加有序.而对于访问用户来说,其更大的好处是增加了页面的打开速度 ...
- java css js 合并_java Web程序使用wro4j合并、压缩js、css等静态资源
在Web项目中,js.css合并压缩,不仅有利于减少Http请求数量.减少宽带资源占用,还能有效的管理各种js.css的引入,使整个项目更加有序.而对于访问用户来说,其更大的好处是增加了页面的打开速度 ...
- 压缩你的JS和CSS代码
压缩你的JS和CSS代码 2008年04月01日 星期二 15:40 减小代码在传输中的大小,就能提高页面的传输速度,打开网页也就快了.在上一篇文章中提到了使用Apache2的mod_deflate模 ...
- Visual Studio 编译任务压缩js和css文件
如今网站都在说优化,压缩js和css文件就成了最基本的一种方法,js和css压缩有很多方法,很多网站也提供了这样的功能,也可以用YUI提供的包手动压缩,但是这都不效率啊,能不能在vs生成部署包的时候把 ...
- java 压缩js css,java YUI压缩JS跟CSS
项目需要压缩JS和CSS,文件和文件夹太多,一一处理又比较麻烦,写个程序吧: import java.io.File; import java.io.FileInputStream; import j ...
最新文章
- 机器学习(15)精确率召回率F1-score(查看癌症预测结果的精确率、召回率)
- 关于ccflow的编译错误
- DoubleSlider
- h3c怎么创建虚拟服务器,h3c 设置虚拟服务器
- 基于Web的质量和测试度量指标
- 椭圆形中间一个大写的v_年轻人想要的出街姿态,新CR-V整的明明白白
- 【Linux】一步一步学Linux——head命令(41)
- linux系列之:告诉他,他根本不懂kill
- 机器学习的简单逻辑回归的Advanced Optimization
- xalan_如何以10倍速加速Apache Xalan的XPath处理器
- Sharepoint学习笔记—习题系列--70-573习题解析 -(Q136-Q138)
- 如何彻底搞懂 Java 数据结构?|CSDN 博文精选
- ios支付 选择货币_iOS开发中金钱货币的计算问题
- zen cart 操作
- pandas 批量修改列名_十分钟想搞定pandas?
- 数据挖掘中的关联规则
- oppo r11s鸿蒙固件,OPPO R11s官方出厂rom系统刷机包下载_卡刷升级包降级回退包
- GIS 基础知识简介
- oracle cpu 消耗,解决Oracle CPU高度消耗(100%)的数据库问题
- 【人工智能】人工智能如何影响社会经济:关于近期文献的一个综述