重写了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)模版制作过程中省去了填写域名地址的繁琐,等到网站正式上线的时候会自动添加域名地址

先写到这里,等有时间了再更新上来。

    评论:

    1. 麦杰机械 回复2014年06月21日 10时17分
      磨者

    2. 我来说两句:

        切换  

      磨途歌检测发现,您当前使用的浏览器版本过低,要想使用画板模式,请先更新浏览器

        切换  

      磨途歌随机验证码