对网站中的js,css文件进行打包
2023-09-14 08:59:48 时间
一,为什么要用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");
for(i=0;i jsarray.length;i++){ document.write(" script type=text/javascript src="+jsarray[i]+" /script ");
这样做的好处是什么呢,个人分析了以下二点:
1,把一个页面包涵的js,css文件转变成一个,代码简单
2,把这些js,css放到一个js文件里面,便于管理,如果我想加一个js,减一个js很方便,你就不用在去改模板了,如果模板多的话,你都要一个页面,一个页面去改的话,很烦人的。
如果用的不是smarty模板的话也是一样,都可以拿出来的,如果没用模板的话也是可以的,在这里只是表达一种思想。
js、css与高度(宽度)共享 高度共享,是高度共享和宽度共享的总称。是笔者总结的一个针对某些问题解决的思路。并不是一个新的技术点或模式 —— 至少目前来说。甚至可能你已经在项目中用过类似的。它的核心就是:降低 js 复杂计算和耗时操作在类似场景中的比重。没啥说的,通过两个业务场景描述一下即可。
相关文章
- YUI Compressor插件压缩后war中的js/css文件未压缩的解决方法(被maven打包顶替了)
- 【说站】js中for-of语句如何理解
- ajax 长轮询_js 轮询
- js读取本地json文件_jquery读取本地json文件
- vue中如何引入js文件_vue调用外部js方法
- Qml使用js读写文件
- js base64转file文件详解编程语言
- 快速掌握JS操作MySQL数据库技巧(js操作mysql数据库)
- 窗口没有提示自动关闭的js代码
- 封装了一个js图片轮换效果的函数
- Js四则运算函数代码
- 如何使用jquery动态加载js,css文件实现代码
- 上传的js验证(图片/文件的扩展名)
- 浅析Js中的单引号与双引号问题
- JS中判断null、undefined与NaN的方法
- js动态修改css文件的方法