合龙JS文件和CSS文件
日期：2014-05-17 浏览次数：20855 次
合并JS文件和CSS文件
合并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文件很多人都知道，也用过，目的是为了减少请求数。但有时候我们觉的把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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
