Package js and css files in the website-PHP开发-php.cn

Package js and css files in the website

高洛峰

Release： 2016-11-24 14:27:42

Original

1394 people have browsed it

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

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

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

&lt;script type="text/javascript" src="js/util.js?20100429001"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/webeditor.js?20100429001"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/helptip.js?20100429001"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/window.js?20100429001"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/main-panel.js?20100611001"&gt;&lt;/script&gt;
&lt;!-- this script is for flashplayer version detection --&gt;
&lt;script type="text/javascript" src="js/fp_detect.js"&gt;&lt;/script&gt;
&lt;!--script type="text/javascript" src="js/tab-msgbox.js?20090311"&gt;&lt;/script--&gt;
&lt;script type="text/javascript" src="js/tab-buddystate.js?20090927001"&gt;&lt;/script&gt;
&lt;!--script type="text/javascript" src="js/tab-buddyimpression.js?20090311"&gt;&lt;/script--&gt;
&lt;script type="text/javascript" src="js/tab-addbuddy.js?20091210001"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/main.js?20100611001"&gt;&lt;/script&gt;
&lt;script language="javascript" src="http://pingjs.qq.com/ping.js"&gt;&lt;/script&gt;

Copy after login

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

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

1，用function

function include(filename) {
 document.write("&lt;script language=&#39;JavaScript&#39; type=&#39;text/javascript&#39; src=&#39;" + filename + "&#39;&gt;&lt;/script&gt;");
}
 
include("js/jquery-1.3.2.js");
include("js/test.js");

Copy after login

2，用数组

var jsarray = new Array();
jsarray[0] = "js/jquery-1.3.2.js";
jsarray[1] = "js/test.js";
for(i=0;i&lt;jsarray.length;i++){
 document.write("&lt;script type=&#39;text/javascript&#39; src=&#39;"+jsarray[i]+"&#39;&gt;&lt;/script&gt;");
}

Copy after login

三，模板文件

{foreach from=$jsArr item=js}
&lt;script src="{$js}" type="text/javascript"&gt;&lt;/script&gt;
{/foreach}

Copy after login

四，调用模板的php文件

public function addCss($<a href="http://www.php1.cn/category/72.html">css</a>) {
 if (!is_array($<a href="http://www.php1.cn/category/72.html">css</a>)) {
 $this-&gt;tpl-&gt;append(&#39;<a href="http://www.php1.cn/category/72.html">css</a>Arr&#39;, $<a href="http://www.php1.cn/category/72.html">css</a>);
 } else {
 $this-&gt;tpl-&gt;append(&#39;<a href="http://www.php1.cn/category/72.html">css</a>Arr&#39;, $<a href="http://www.php1.cn/category/72.html">css</a>, true);
 }
 }
 
 public function addJs($js) {
 if (!is_array($js)) {
 $this-&gt;tpl-&gt;append(&#39;jsArr&#39;, $js);
 } else {
 $this-&gt;tpl-&gt;append(&#39;jsArr&#39;, $js, true);
 }
 }
$this-&gt;addJs("./js/test.pkg.js");

Copy after login

五，总结

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

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

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

如果用的不是smarty模板的话也是一样，都可以拿出来的，如果没用模板的话也是可以的，在这里只是表达一种思想。