当前位置:首页 > 开发 > 编程语言 > 编程 > 正文

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

发表于: 2012-12-03   作者:dcj3sjt126com   来源:转载   浏览:
摘要: 一,为什么要用smarty进行打包 apache中也有给js,css这样的静态文件进行打包压缩的模块,但是本文所说的不是以这种方式进行的打包,而是和smarty结合的方式来把网站中的js,css文件进行打包。 为什么要进行打包呢,主要目的是为了合理的管理自己的代码 。现在有好多网站,你查看一下网站的源码的话,你会发现网站的头部有大量的JS文件和CSS文件,网站的尾部也有可能有大量的J

一,为什么要用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);
 } else {
 $this->tpl->append('jsArr', $js, true);
 }
 }
$this->addJs("./js/test.pkg.js"); 

 五,总结

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

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

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

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

 

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
今天在使用MVC4打包压缩功能@Scripts.Render("~/bundles/jquery") 的时候产生了一些疑惑,问什么在A
最近项目想使用在maven打包的时间压缩js,css文件,采用yuicompressor-maven-plugin插件进行压缩,但
作者:zccst 四、在视图层(../views/..)添加CSS文件或JavaScript文件 Yii::app()->clientScript
介绍 使用许多小得JS、CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维 护性,这是一个很
介绍 使用许多小得JS、CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维护性,这是一个很好
介绍 使用许多小得JS、CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维护性,这是一个很好
一些泛WEB 2.0网站为了追求用户体验,可能会大量使用CSS和JS文件。这就导致在服务器带宽一定的情况
一些泛WEB 2.0网站为了追求用户体验,可能会大量使用CSS和JS文件。这就导致在服务器带宽一定的情况
在Asp时代有一个NetBox 产品可以把整个Asp网站AllInOne的打包成一个exe,在没有IIS的情况下可以单独
在Asp时代有一个NetBox 产品可以把整个Asp网站AllInOne的打包成一个exe,在没有IIS的情况下可以单独
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号