重写了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）模版制作过程中省去了填写域名地址的繁琐，等到网站正式上线的时候会自动添加域名地址
先写到这里，等有时间了再更新上来。
我来说两句: