把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的漂亮的代码片段
Jun 05 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
React实现动效弹窗组件
Jun 21 Javascript
Python机器学习之决策树和随机森林
Jul 15 Javascript
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
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中如何判断AJAX提交的数据
2012/02/05 PHP
php中stdClass的用法分析
2015/02/27 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
jQuery实现的分页插件完整示例
2020/05/26 jQuery
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
你应该知道的python列表去重方法
2017/01/17 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
广州品高软件.net笔面试题目
2012/04/18 面试题
年度考核评语
2014/01/19 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
2014年纪委工作总结
2014/12/05 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书