把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 相关文章推荐
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
javascript中的delete使用详解
Apr 11 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
js实现移动端轮播图滑动切换
Dec 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获取远程图片并把它保存到本地的代码
2008/04/07 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
php建立Ftp连接的方法
2015/03/07 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
Python功能键的读取方法
2015/05/28 Python
python实用代码片段收集贴
2015/06/03 Python
Python语言的变量认识及操作方法
2018/02/11 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
在vscode中配置python环境过程解析
2019/09/28 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
浅谈Python __init__.py的作用
2020/10/28 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
小学新教师培训方案
2014/02/03 职场文书
开工仪式策划方案
2014/05/23 职场文书
情人节活动总结范文
2015/02/05 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
asyncio异步编程之Task对象详解
2022/03/13 Python