把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 相关文章推荐
jQuery Ajax 实例全解析
Apr 20 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
详解Vue组件之作用域插槽
Nov 22 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
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
js图片上传的封装代码
2017/08/01 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
js+css实现打字效果
2020/06/24 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
Python实现检测文件MD5值的方法示例
2018/04/11 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
Python ini文件常用操作方法解析
2020/04/26 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
不用游标的SQL语句有哪些
2012/09/07 面试题
销售顾问的岗位职责
2013/11/13 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
入伍通知书
2015/04/23 职场文书
车辆管理制度范本
2015/08/05 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
浅谈Python 中的复数问题
2021/05/19 Python
Go 语言结构实例分析
2021/07/04 Golang
git stash(储藏)的用法总结
2022/06/25 Servers