重写了mPHP的视图类,更好的实现合并压缩多个js与css
[文章作者:磨延城 转载请注明原文出处: https://mo2g.com/view/114/ ]
以前为了减少浏览器打开页面需要加载的外部资源总数,就为mPHP框架写了一个file_merger函数,再通过非主流的方式实现了合并多个CSS或JS的功能.最初确实没考虑清楚,直接就把需要加载的css跟js文件全部写在controller控制器里,进行合并处理后再输出到页面中.这种方式确实给controller控制器增加了额外的代码,更不美观.
以前为了减少浏览器打开页面需要加载的外部资源总数,就为mPHP框架写了一个file_merger函数,再通过非主流的方式实现了合并多个CSS或JS的功能。最初确实没考虑清楚,直接就把需要加载的css跟js文件全部写在controller控制器里,进行合并处理后再输出到页面中。这种方式确实给controller控制器增加了额外的代码,更不美观。
最近有点时间,就重新规划了一下合并压缩流程,于是乎,mPHP框架的view视图类又被重写了。
大致说一下更新后的的view视图类实现的功能:
1)获取模版中本地的js与css文件路径
2)系统运行在调试模式,则js与css添加时间戳,并按原始顺序生成资源加载代码
3)系统运行在正常模式,则js与css先经过合并压缩,再生成相应的资源加载代码
a)压缩文件不存在,则生成压缩文件
b)压缩文件存在,则遍历需要压缩的js或css,如果有文件被修改过,就重新生成新的压缩文件
4)最后:把模版中特殊的标签替换为资源加载代码,css暂定为<link />,js暂定为<script></script>
例如如下模版代码:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>XXX最大的门户网站</title> <link type="text/css" rel="stylesheet" href="http://xxx.xxx.com/bootstrap.min.css"/> <link type="text/css" rel="stylesheet" href="/1.css"/> <link type="text/css" rel="stylesheet" href="/2.css"/> <link /> </head> <body> <script type="text/javascript" src="http://xxx.xxx.com/jquery.min.js"></script> <script scr="/1.js"></script> <script scr="/n.js"></script> <script></script> </body> </html>
调试模式下输出:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>XXX最大的门户网站</title> <link type="text/css" rel="stylesheet" href="http://xxx.xxx.com/bootstrap.min.css"/> <link type="text/css" rel="stylesheet" href="/1.css?1402822313"/> <link type="text/css" rel="stylesheet" href="/2.css?1402822313"/> </head> <body> <script type="text/javascript" src="http://xxx.xxx.com/jquery.min.js"></script> <script scr="/1.js?1402822313"></script> <script scr="/n.js?1402822313"></script> </body> </html>
正常模式下输出:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>XXX最大的门户网站</title> <link type="text/css" rel="stylesheet" href="http://xxx.xxx.com/bootstrap.min.css"/> <link type="text/css" rel="stylesheet" href="http://xxx.xxx.xxx/1280742189.css"/> </head> <body> <script type="text/javascript" src="http://xxx.xxx.com/jquery.min.js"></script> <script type="text/javascript" scr="http://xxx.xxx.xxx/1119734213.js"></script> </body> </html>
有一点要注意的是,要合并压缩的js、css路径地址是以斜杠(/)开头的绝对路径,这样的作法有如下好处:
1)更好的区分站内资源与外部资源
2)模版制作过程中省去了填写域名地址的繁琐,等到网站正式上线的时候会自动添加域名地址
先写到这里,等有时间了再更新上来。
我来说两句: