把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获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
JS自定义右键菜单实现代码解析
Jul 16 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/11/26 PHP
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
PHP读取xml方法介绍
2013/01/12 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
微信小程序开发探究
2016/12/27 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
体育教育专业自荐信范文
2013/12/20 职场文书
学生思想表现的评语
2014/01/30 职场文书
高中生物教学反思
2014/02/05 职场文书
法律专业自荐信
2014/06/03 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
Python基础详解之描述符
2021/04/28 Python
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers