把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 Div中加载其他页面的实现代码
Feb 27 Javascript
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
关于jQuery object and DOM element
Apr 15 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
vue组件实例解析
Jan 10 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
微信小程序自定义组件
Aug 16 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
React Native项目框架搭建的一些心得体会
May 28 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
MySql中正则表达式的使用方法描述
2008/07/30 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
php中error与exception的区别及应用
2014/07/28 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
js 页面输出值
2008/11/30 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
python创建线程示例
2014/05/06 Python
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
快速查询Python文档方法分享
2017/12/27 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
Python创建临时文件和文件夹
2020/08/05 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
上海中网科技笔试题
2012/02/19 面试题
汽车驾驶求职信
2013/10/25 职场文书
中介业务员岗位职责
2014/04/09 职场文书
工作目标责任书
2014/07/23 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang