zoukankan      html  css  js  c++  java
  • 把JS和CSS合并到1个文件

    合并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次请求了。 希望有知道的朋友指点下。
  • 相关阅读:
    201521123076《java程序设计》第12周学习总结
    个人作业4——alpha阶段个人总结
    软工网络15个人作业3——案例分析
    软件工程网络15结对编程作业(201521123083)
    软件工程网络15个人阅读作业2-提出问题
    软件工程第一次个人阅读作业
    java课程设计——博客作业教学数据分析系统(201521123083 戴志斌)
    201521123083《Java程序设计》第13周学习总结
    201521123083《Java程序设计》第12周学习总结
    201521123083《Java程序设计》第11周学习总结
  • 原文地址:https://www.cnblogs.com/ranran/p/4040538.html
Copyright © 2011-2022 走看看