posts - 36, comments - 419, trackbacks - 0, articles - 0
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

把JS和CSS合并到1个文件

Posted on 2010-04-18 18:56 BearRui(AK-47) 阅读(10393) 评论(6)  编辑  收藏 所属分类: WEB
合并JS文件和CSS文件很多人都知道,也用过,目的是为了减少请求数。但有时候我们觉的把JS合并到1个文件,CSS又合并到另外1个文件也是浪费,我们如何能把CSS和JS一起合并进1个文件了?

这里需要使用1个常见的注释符<!-- 主要是利用css,js解析器对<!-- 进行不同的解析来实现JS和CSS合并的。

   1. CSS解析器 会忽略<!--符号,
   2. JS解析器会把<!--当作注释符号,与// 注释相同。

看看下面的列子:   
 <HEAD>
  <TITLE>test</TITLE>
  <style type="text/css">
   <!--.d{color:red;}
  </style>
  <script>
    <!-- function showMsg(m){alert(m);}
  </script>
 </HEAD>
 <BODY>
   <div class='d'>颜色变成红色</div>
   <input type="button" value="不会弹出" onclick="showMsg('js');" />
 </BODY>
  
运行上面的代码,会发现CSS是正常的,而JS确失效了,因为上面的代码等价于: 
  <style type="text/css">
   .d{color:red;}
  </style>
  <script>
    // function showMsg(m){alert(m);}
  </script>

利用这个特性,我们就可以实现把js和CSS合并到1个文件中:
  
  test.jscss 文件
  <!-- /* 
   function showMsg(m){
    alert(m);
  }
  <!-- */ 

  <!-- .d{color:red;} 

index.html
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
    <title>test</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <script type="text/javascript" language="javascript"  src="test.jscss"></script>
    <link rel="stylesheet" rev="stylesheet" type="text/css" href="test.jscss" />
  </head>
 <body>
   <div class='d'>颜色变成红色</div>
   <input type="button" value="不会弹出" onclick="showMsg('js');" />
 </body>
</html>

 上面代码的JS和CSS都能正常运行,虽然test.jscss被链接了2次,但因为缓存的原因,其实只会下载一次。

    注:上面代码中chrome中运行有问题,这是因为chrome中下载同1个文件之后只解析一次,比如你先用<script 加载了test.jscss,chrome就会使用js解析器来解析test.jscss,而当你再用link加载test.jscss文件的时候,chrome会直接把用js解析器解析后文件传递给link,而不会使用css解析器再解析一次,这就导致上面的代码只有js生效,而css无效,如果把link标签放在前面,则js会失效。目前还没找到很好的解决版本,虽然可以在第二次加载的时候在url后带1个参数解决,但这样又变成2次请求了。希望有知道的朋友指点下。


[作者]:BearRui(AK-47)
[博客]: http://www.blogjava.net/bearrui/
[声明]:本博所有文章版权归作者所有(除特殊说明以外),转载请注明出处.
英雄,别走啊,帮哥评论下:  

精彩推荐 好文要顶 水平一般 看不懂 还需努力

评论

# re: 把JS和CSS合并到1个文件  回复  更多评论   

2010-04-18 19:24 by FFF
有点意思

# re: 把JS和CSS合并到1个文件  回复  更多评论   

2010-04-19 18:00 by HiMagic!
挺有新意的用法,原创?

# re: 把JS和CSS合并到1个文件  回复  更多评论   

2010-04-19 20:57 by BearRui(AK-47)
@HiMagic!
呵呵,其实发现使用<!--来合并JS和CSS的并不是我,大概2,3年前就看到过文章使用这个来合并JS和CSS,不过一直没去实践过,最近实际使用了下,发现在chrome中有点问题,就顺便写出来。

# re: 把JS和CSS合并到1个文件[未登录]  回复  更多评论   

2010-04-23 15:35 by john
可以用来玩玩

# re: 把JS和CSS合并到1个文件  回复  更多评论   

2011-01-11 11:12 by tt
不错呀,但这个好像不能通用

# re: 把JS和CSS合并到1个文件  回复  更多评论   

2014-08-30 22:42 by 唐辉
不建议优先利用bug做功能

只有注册用户登录后才能发表评论。


网站导航: