0

0

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

高洛峰

高洛峰

发布时间:2016-11-24 14:27:42

|

1520人浏览过

|

来源于php中文网

原创

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

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

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

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

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

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

立即学习前端免费学习笔记(深入)”;

1,用function

function include(filename) {
 document.write("zuojiankuohaophpcnscript language='JavaScript' type='text/javascript' src='" + filename + "'youjiankuohaophpcnzuojiankuohaophpcn/scriptyoujiankuohaophpcn");
}
 
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;izuojiankuohaophpcnjsarray.length;i++){
 document.write("zuojiankuohaophpcnscript type='text/javascript' src='"+jsarray[i]+"'youjiankuohaophpcnzuojiankuohaophpcn/scriptyoujiankuohaophpcn");
}

三,模板文件

海外代购系统源码
海外代购系统源码

该软件是一个以asp+access进行开发的代购企业网站源码。代购优势:随着经济全球化与互联网的发展,带动了许多新新行业,也不缺少成功的案例,淘宝只是其中的一个。而在物流行业中,像代购网站和转运网站都是非常有发展潜力的,消费者可以通过代购网站买到在国内买不到的东西,并且价格也会相对便宜,这些都是代购的优势。代购方式包括有:代购、直购、团购、秒杀、拼单等,首先由客户提交代购订单,然后进行物流选择,可

下载
{foreach from=$jsArr item=js}
zuojiankuohaophpcnscript src="{$js}" type="text/javascript"youjiankuohaophpcnzuojiankuohaophpcn/scriptyoujiankuohaophpcn
{/foreach}

四,调用模板的php文件

public function addCss($css) {
 if (!is_array($css)) {
 $this-youjiankuohaophpcntpl-youjiankuohaophpcnappend('cssArr', $css);
 } else {
 $this-youjiankuohaophpcntpl-youjiankuohaophpcnappend('cssArr', $css, true);
 }
 }
 
 public function addJs($js) {
 if (!is_array($js)) {
 $this-youjiankuohaophpcntpl-youjiankuohaophpcnappend('jsArr', $js);
 } else {
 $this-youjiankuohaophpcntpl-youjiankuohaophpcnappend('jsArr', $js, true);
 }
 }
$this-youjiankuohaophpcnaddJs("./js/test.pkg.js");

五,总结

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

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

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

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

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

4

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 8.6万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 3.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号