把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加密解密7种方法总结分析
Oct 07 Javascript
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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
PHP中的加密功能
2006/10/09 PHP
一个ubbcode的函数,速度很快.
2006/10/09 PHP
JQuery小知识
2010/10/15 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
JS实现页面打印功能
2017/03/16 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
Python与R语言的简要对比
2017/11/14 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
python3.7 sys模块的具体使用
2019/07/22 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
英国综合网上购物商城:The Hut
2018/07/03 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
C语言中break与continue的区别
2012/07/12 面试题
信息部岗位职责
2013/11/12 职场文书
电子信息工程专业推荐信
2014/02/14 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
理财学专业自荐书
2014/06/28 职场文书
树转促学习心得体会
2014/09/10 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python