一,为什么要用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模板的话也是一样,都可以拿出来的,如果没用模板的话也是可以的,在这里只是表达一种思想。
分享到:
相关推荐
分享自己做的的打包工具,希望能帮助到平时为一堆补丁文件class(自动包含class内部类),jsp,html,js,css,xml,jar等文件花费很长时间整理的朋友,有了我这个工具,似乎这一切都变得简单,你只需要选择路径,然后在...
扒网站界面神器(一键下载:html,css,js,img等文件)扒网站界面神器(一键下载:html,css,js,img等文件)扒网站界面神器(一键下载:html,css,js,img等文件)扒网站界面神器(一键下载:html,css,js,img等文件)扒网站界面...
使用脚本+yuicompressor对js,css文件打包.pdf
该工具可按指定的方案合并、压缩dojo或符合dojo规范的js文件、压缩css文件。 使用方便,无需安装配置, 下载置入dojo源码下的任意目录即可一键完成打包压缩. 该工具可自动分析HTML文件生成打包方案,自动排除没有用到的...
maven打包使用yui压缩css和js文件
官方原码和打包文件js,css打包文件在sweetalert2-master\dist里面,配套齐全,拎包开发,导入即可进行弹窗使用
在一个Web项目中 会引入很多文件 例如css文件 js文件 字体文件 图片文件 模板文件 等 引入过多文件将导致网页加载速度变慢 而Webpack则可以解决各个包之间错综复杂的依赖关系 Webpack是前端的一个项目构建工具 基于...
使用Gzip打包JavaScript、CSS文件,Java后台Filter解压缩
用于CSS和JS的压缩,混淆,经测试可以减小Js或CSS文件一半的体积。经过淘宝封装,直接点击install.cmd安装,然后在JS或CSS上右键点击即可使用
页面内引用element ui的js 及css离线版 便于不想通过webpack 打包和前后端分离使用
使用Ant构建批量压缩js、css文件脚本
ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler, 使用<link type="text/css" rel="Stylesheet" href="HttpCombiner.ashx?" />,具体的参数请参考程序中的介绍。
"tmp_js_json_dir": "D:\\projects\\github_project\\merge_js_css\\examples\\json\\js", //js合并中间过程文件目录 "tmp_css_json_dir": "D:\\projects\\github_project\\merge_js_css\\examples\\json\\css", /...
在项目中经常会需要将一些接口的配合文件或者某些样式文件,分离出来单独打包,便于后期改动,这里我以css文件为例,介绍实现两种方法: 项目目录: 如上图所示,现在我需要将项目中的scBtn.css文件单独打包出来。...
css html javascript jquery php
处理css文件中 @import。递归处理css文件中的@import,自动合并为一个css文件。 Features 支持 css样式文件 支持 @import 递归处理 支持线上的import url 自动下载再合并 Usage var gulp = require('gulp'); var co...
将web页面内的多个JS文件、CSS文件请求,批量发送至客户端,减少请求次数,压缩、缓存
在Web项目的开发中,js,css文件会随着项目的开发变得越来越多,越来越大,这就给给性能方面带来一些问题,如,页面引入的的js,css越多的话,那么对就增加了http请求数,解决该问题的一个好的方法就是合并js,css文件....