把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 验证插件 Web前端设计模式(asp.net)
Oct 17 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
动态改变div的z-index属性的简单实例
Aug 08 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
js时间戳与日期格式之间转换详解
Dec 11 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 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
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
Javascript面向对象编程
2012/03/18 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
vue中appear的用法
2017/08/17 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
如何根据业务封装自己的功能组件
2019/04/19 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
python+django快速实现文件上传
2016/10/24 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
西安当代医院管理研究院笔试题
2015/12/11 面试题
工商学院毕业生自荐信
2013/11/12 职场文书
教师简历自我评价
2014/02/03 职场文书
关于保护环境的建议书
2014/08/26 职场文书
投标邀请书范本
2015/02/02 职场文书
八年级语文教学反思
2016/03/03 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android
Python实现视频中添加音频工具详解
2021/12/06 Python