對網站中的js,css檔案進行打包

一，為什麼要用smarty進行打包

apache中也有給js,css這樣的靜态檔案進行打包壓縮的子產品，但是本文所說的不是以這種方式進行的打包，而是和smarty結合的方式來把網站中的js,css檔案進行打包。

為什麼要進行打包呢，主要目的是為了合理的管理自己的代碼 。現在有好多網站，你檢視一下網站的源碼的話，你會發現網站的頭部有大量的js檔案和css檔案，網站的尾部也有可能有大量的js檔案。以webqq為例吧：

<script type="text/javascript" src="js/util.js?20100429001"></script>  

<script type="text/javascript" src="js/webeditor.js?20100429001"></script>  

<script type="text/javascript" src="js/helptip.js?20100429001"></script>  

<script type="text/javascript" src="js/window.js?20100429001"></script>  

<script type="text/javascript" src="js/main-panel.js?20100611001"></script>  

<!-- this script is for flashplayer version detection -->  

<script type="text/javascript" src="js/fp_detect.js"></script>  

<!--script type="text/javascript" src="js/tab-msgbox.js?20090311"></script-->  

<script type="text/javascript" src="js/tab-buddystate.js?20090927001"></script>  

<!--script type="text/javascript" src="js/tab-buddyimpression.js?20090311"></script-->  

<script type="text/javascript" src="js/tab-addbuddy.js?20091210001"></script>  

<script type="text/javascript" src="js/main.js?20100611001"></script>  

<script language="javascript" src="http://pingjs.qq.com/ping.js"></script>  

上面的代碼是放在webqq的底部，看着很不爽，如果隻顯示一個話，看着是不是很舒服呢？結果是肯定的。

二，用一個js檔案來包涵多個js檔案

1，用function

function include(filename) {  

 document.write("<script language='javascript' type='text/javascript' src='" + filename + "'></script>");  

}  

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

include("js/test.js");  

2，用數組

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='"+jsarray[i]+"'></script>");  

 三，模闆檔案

{foreach from=$jsarr item=js}  

<script src="{$js}" type="text/javascript"></script>  

{/foreach}  

 四，調用模闆的php檔案

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);  

 $this->tpl->append('jsarr', $js, true);  

$this->addjs("./js/test.pkg.js");   

五，總結

這樣做的好處是什麼呢，個人分析了以下二點：

1，把一個頁面包涵的js，css檔案轉變成一個，代碼簡單

2，把這些js,css放到一個js檔案裡面，便于管理，如果我想加一個js，減一個js很友善，你就不用在去改模闆了，如果模闆多的話，你都要一個頁面，一個頁面去改的話，很煩人的。

如果用的不是smarty模闆的話也是一樣，都可以拿出來的，如果沒用模闆的話也是可以的，在這裡隻是表達一種思想。