对网站中的js,css文件进行打包

时间：2022-04-24 13:33:37

一，为什么要用smarty进行打包

apache中也有给js,css这样的静态文件进行打包压缩的模块，但是本文所说的不是以这种方式进行的打包，而是和smarty结合的方式来把网站中的js,css文件进行打包。

为什么要进行打包呢，主要目的是为了合理的管理自己的代码。现在有好多网站，你查看一下网站的源码的话，你会发现网站的头部有大量的JS文件和CSS文件，网站的尾部也有可能有大量的JS文件。以webqq为例吧：

  1. <script type="text/javascript" src="js/util.js?20100429001"></script>  
  2. <script type="text/javascript" src="js/webeditor.js?20100429001"></script>  
  3. <script type="text/javascript" src="js/helptip.js?20100429001"></script>  
  4. <script type="text/javascript" src="js/window.js?20100429001"></script>  
  5. <script type="text/javascript" src="js/main-panel.js?20100611001"></script>  
  6. <!-- this script is for flashplayer version detection -->  
  7. <script type="text/javascript" src="js/fp_detect.js"></script>  
  8. <!--script type="text/javascript" src="js/tab-msgbox.js?20090311"></script-->  
  9. <script type="text/javascript" src="js/tab-buddystate.js?20090927001"></script>  
  10. <!--script type="text/javascript" src="js/tab-buddyimpression.js?20090311"></script-->  
  11. <script type="text/javascript" src="js/tab-addbuddy.js?20091210001"></script>  
  12. <script type="text/javascript" src="js/main.js?20100611001"></script>  
  13. <script language="javascript" src="http://pingjs.qq.com/ping.js"></script>  
<script type="text/javascript" src="http://blog.163.com/lgh_2002/blog/js/util.js?20100429001"></script>
<script type="text/javascript" src="http://blog.163.com/lgh_2002/blog/js/webeditor.js?20100429001"></script>
<script type="text/javascript" src="http://blog.163.com/lgh_2002/blog/js/helptip.js?20100429001"></script>
<script type="text/javascript" src="http://blog.163.com/lgh_2002/blog/js/window.js?20100429001"></script>
<script type="text/javascript" src="http://blog.163.com/lgh_2002/blog/js/main-panel.js?20100611001"></script>
<!-- this script is for flashplayer version detection -->
<script type="text/javascript" src="http://blog.163.com/lgh_2002/blog/js/fp_detect.js"></script>
<!--script type="text/javascript" src="http://blog.163.com/lgh_2002/blog/js/tab-msgbox.js?20090311"></script-->
<script type="text/javascript" src="http://blog.163.com/lgh_2002/blog/js/tab-buddystate.js?20090927001"></script>
<!--script type="text/javascript" src="http://blog.163.com/lgh_2002/blog/js/tab-buddyimpression.js?20090311"></script-->
<script type="text/javascript" src="http://blog.163.com/lgh_2002/blog/js/tab-addbuddy.js?20091210001"></script>
<script type="text/javascript" src="http://blog.163.com/lgh_2002/blog/js/main.js?20100611001"></script>
<script language="javascript" src="http://pingjs.qq.com/ping.js"></script>

上面的代码是放在webqq的底部，看着很不爽，如果只显示一个话，看着是不是很舒服呢？结果是肯定的。

二，用一个JS文件来包涵多个JS文件

1，用function

  1. function include(filename) {  
  2.  document.write("<script language='JavaScript' type='text/javascript' src='http://blog.163.com/lgh_2002/blog/" + filename + "'></script>");  
  3. }  
  4.   
  5. include("js/jquery-1.3.2.js");  
  6. include("js/test.js");  
function include(filename) {
 document.write("<script language='JavaScript' type='text/javascript' src='http://blog.163.com/lgh_2002/blog/" + filename + "'></script>");
}

include("js/jquery-1.3.2.js");
include("js/test.js");

2，用数组

  1. var jsarray = new Array();  
  2. jsarray[0] = "js/jquery-1.3.2.js";  
  3. jsarray[1] = "js/test.js";  
  4. for(i=0;i<jsarray.length;i++){  
  5.  document.write("<script type='text/javascript' src='http://blog.163.com/lgh_2002/blog/"+jsarray[i]+"'></script>");  
  6. }  
var jsarray = new Array();
jsarray[0] = "js/jquery-1.3.2.js";
jsarray[1] = "js/test.js";
for(i=0;i<jsarray.length;i++){
 document.write("<script type='text/javascript' src='http://blog.163.com/lgh_2002/blog/"+jsarray[i]+"'></script>");
}

三，模板文件

  1. {foreach from=$jsArr item=js}  
  2. <script src="{$js}" type="text/javascript"></script>  
  3. {/foreach}  
{foreach from=$jsArr item=js}
<script src="http://blog.163.com/lgh_2002/blog/{$js}" type="text/javascript"></script>
{/foreach}

四，调用模板的php文件

  1. public function addCss($css) {  
  2.  if (!is_array($css)) {  
  3.  $this->tpl->append('cssArr', $css);  
  4.  } else {  
  5.  $this->tpl->append('cssArr', $css, true);  
  6.  }  
  7.  }  
  8.   
  9.  public function addJs($js) {  
  10.  if (!is_array($js)) {  
  11.  $this->tpl->append('jsArr', $js);  
  12.  } else {  
  13.  $this->tpl->append('jsArr', $js, true);  
  14.  }  
  15.  }  
  16. $this->addJs("./js/test.pkg.js");  
public function addCss($css) {
 if (!is_array($css)) {
 $this->tpl->append('cssArr', $css);
 } else {
 $this->tpl->append('cssArr', $css, true);
 }
 }

 public function addJs($js) {
 if (!is_array($js)) {
 $this->tpl->append('jsArr', $js);
 } else {
 $this->tpl->append('jsArr', $js, true);
 }
 }
$this->addJs("./js/test.pkg.js");

五，总结

这样做的好处是什么呢，个人分析了以下二点：

1，把一个页面包涵的js，css文件转变成一个，代码简单

2，把这些js,css放到一个js文件里面，便于管理，如果我想加一个js，减一个js很方便，你就不用在去改模板了，如果模板多的话，你都要一个页面，一个页面去改的话，很烦人的。

标签：

相关文章