或者是为了确保JS执行时,所依赖 CSS 文件已经下载完成。
你是否想过要把CSS和JS写到一个文件里呢?
今天学了一招,正好 解决这个 问题!
[原作者的BLOG: http://blogs.msdn.com/shivap/archive/2007/05/01/combine-css-with-js-and-make-it-into-a-single-download.aspx]
这其实是利用了浏览器特性的一种HACK手法!
作者说在IE和FF下能正常使用。我用opera9.02测试过了,可以正常运行。
关键点:CSS和JS解析器在处理注释的区别
1.CSS解析器在碰到“<!--”的时候会直接抛弃
2.JS解析器在碰到“<!--”的时候,会把他当作"//"处理。也就是说把他当做行注释处理!
看看下面这个 代码片段:
1
<!--
/*
2 function test(){alert("虽然使用性有待商榷。\n但想法值得称赞!");}
3 <!-- */
4 <!-- body { background-color : #f00 ; }
CSS解析时,它等价于下面这段代码
2 function test(){alert("虽然使用性有待商榷。\n但想法值得称赞!");}
3 <!-- */
4 <!-- body { background-color : #f00 ; }
1
/*
2 function test(){alert("虽然使用性有待商榷。\n但想法值得称赞!");}
3 */
4 body { background-color : #f00 ; }
而JS解析时,他却等价于如下代码
2 function test(){alert("虽然使用性有待商榷。\n但想法值得称赞!");}
3 */
4 body { background-color : #f00 ; }
1
//
/* ----行注释
2 function test(){alert( " 虽然使用性有待商榷。\n但想法值得称赞! " );}
3 // */ ----行注释
4 // body { background-color: #f00; } ----行注释
问题是不是解决了呢?
2 function test(){alert( " 虽然使用性有待商榷。\n但想法值得称赞! " );}
3 // */ ----行注释
4 // body { background-color: #f00; } ----行注释
将这段代码,保存成1.jcs。[或其他任意文件名,引用的时候做对应修改就行了]
然后,将下面代码保存成任意文件。和他放在同一目录下即可!
1
<
link
type
="text/css"
rel
="stylesheet"
href
="1.jcs"
/>
2 < script type ="text/javascript" language ="javascript" src ="1.jcs" ></ script >
3 < input type ="button" value ="点我一下,看包含的函数是否可以执行" onclick ="test()" />
link 和 script标签虽然两次
链接该文件。但是由于缓存的缘故,只会发一次请求!
2 < script type ="text/javascript" language ="javascript" src ="1.jcs" ></ script >
3 < input type ="button" value ="点我一下,看包含的函数是否可以执行" onclick ="test()" />
当然,代价是增加了约等于“4*css行数”的冗于代码。正常情况下,这个冗于在1K以内!