把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查询DBpedia小应用实例学习
Mar 07 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 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实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
python实现端口转发器的方法
2015/03/13 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
开办加工厂创业计划书
2014/01/03 职场文书
社区安全检查制度
2014/02/03 职场文书
销售人员获奖感言
2014/02/05 职场文书
办护照工作证明
2014/10/01 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书