把JS与CSS写在同一个文件里的书写方法


Posted in Javascript onJune 02, 2007

我们经常把多个CSS或者多个JS并成一个,以节省请求,但是这样最少还是要两个。在MSDN的Blog上看到原来也是可以把JS和CSS并在一个文件里,那怎样做呢?利用注释,先看一下这代码。 
<!-- /*
window.onload=function(){
document.getElementById("test2").innerHTML="传说中滴JS测试者。如果你看到我,那<strong>JS</strong>也生效了";
}
<!-- */ 
<!-- #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}

CSS处理时会忽视掉<!--,这时JS部分只是CSS的注释/* js */,而JS处理时把<!--转成// 也就是JS的单行注释,单行注释会把后面的/*和*/干掉,同时也干掉了CSS,不废话了,看演示的例子。

在网上运行时还要通过程序输出个“*/*”的头,不然MIME不对有的浏览器不干活。PHP的是这样:

<?header('Content-type: */*');?>

理论上在服务器上指定某种后缀的MIME是“*/*”应用也行得通,不过我没有试。把JS跟CSS写在同一个文件特别适合第三方调用的那种,虽然文件大了一点,但能少了一半的请求数,帅帅滴

当然,这样的格式写起来一定很不爽,不过配合程序来读原来已经的,并处理一下就可以,这样就可以保持原来文件也方便维护,输出文件又省点请求,如果想的话,处理处理缓存,跟静态文件差不多了。这里有份C#的,据说是官方滴,我的是PHP的,因为还没写缓存的机制就不拿出来丢人了,其实原理也很简单,会编程的三两下就搞定。

再其实,我是想找把多份CSS合并的方式,合成一个不难,可以是处理好各模块化的分离同时能在客户端缓存及方便程序调用才是难的,CSS又不像JS可以在客户端异步调用,谁有好的方式介绍一下给我。

传说中的测试
传说中的测试者一号。如果你看到我有边框跟颜色,那就是说CSS生效了。

传说中滴JS测试者。如果你看到我,那JS也生效了

使用同一份文件:jscss.php  
<link type="text/css" rel="stylesheet" href="jscss.php" /><script type="text/javascript" src="jscss.php"></script>jscss.php的内容  
<?header('Content-type: */*');?>  
<!-- /*  
window.onload=function(){  
    document.getElementById("test2").innerHTML="传说中滴JS测试者。如果你看到我,那<strong>JS</strong>也生效了";  
}  
<!-- */   
<!-- #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}  
Copyright © 2006-2007 aoao , Some Rights Reserved . 
Javascript 相关文章推荐
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
理解 JavaScript EventEmitter
Mar 29 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
JS实现京东商品分类侧边栏
Dec 11 Javascript
使用refresh_token实现无感刷新页面
Apr 26 Javascript
JavaScript 不只是脚本
May 30 #Javascript
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 #Javascript
[原创]站长必须要知道的javascript广告代码
May 30 #Javascript
JSON 学习之完全手册 图文
May 29 #Javascript
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 #Javascript
JScript的条件编译
May 29 #Javascript
javascript学习网址备忘
May 29 #Javascript
You might like
屏蔽浏览器缓存另类方法
2006/10/09 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
菜鸟javascript基础整理1
2010/12/06 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
js数组操作学习总结
2013/11/04 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
Python base64编码解码实例
2015/06/21 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
Python的logging模块基本用法
2020/12/24 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
大学生涯自我鉴定
2014/01/16 职场文书
国旗下演讲稿
2014/05/08 职场文书
地质灾害防治方案
2014/05/14 职场文书
校本教研活动总结
2014/07/01 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书