当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 把JS与CSS写在同一个文件里的书写方法

Javascript
JMenuTab简单使用说明
简单的JS多重继承示例
js另类写法
javascript cookie解码函数(兼容ff)
Javascript的一种模块模式
详解new function(){}和function(){}() 区别分析
YUI 读码日记之 YAHOO.lang.is*
用JS得到字符串中出现次数最多的字母
YUI 读码日记之 YAHOO.util.Dom - Part.1
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
利用js对象弹出一个层
js用图作提交按钮或超连接
通过 Dom 方法提高 innerHTML 性能
javascript 通用滑动门tab类
二行代码解决全部网页木马
JavaScript的面向对象方法以及差别
悟透JavaScript整理版
try finally 妙用,防止内存泄漏

Javascript 中的 把JS与CSS写在同一个文件里的书写方法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 149 ::
收藏到网摘: n/a

我们经常把多个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 .