加载中…
个人资料
IT-朱玉兵
IT-朱玉兵
  • 博客等级:
  • 博客积分:0
  • 博客访问:151,968
  • 关注人气:34
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

简单的js 和css 合并方法

(2014-10-28 14:38:43)
分类: PHP程序


1.前端开发组 在制作页面的时候, 在页面中会引用很多的css和js文件。

比如下面前端开发人员制作的html页面。
 < html>
< head>
< /head>
< body>
< script src="http://s.emao.net//js/common/tabSlider.js" type="text/javascript">< /script>
< script src="http://s.emao.net/js/common/zjBanner.js" type="text/javascript">< /script>
< script>
jQuery(function($){
        $('.cat-fan-zj-banner').zjBanner();
    }
);
< /script>
< /body>
< /html>

上面的代码引用了2个js文件, 另外在页面中还写了一部分js代码。 上面的写法会导致请求次数多,不利于做cache

 

如果要合并以上js代码,在 static的svn目录创建一个.php结尾的js文件 内容参见下面

 
< ?php
echo file_get_contents(ROOT.'/js/common/tabSlider.js');
echo file_get_contents(ROOT.'/js/common/zjBanner.js');
?>
jQuery( function( $) {
    $('.cat-fan-zj-banner').picCarousel();
   }
);


 

在页面中引用直接按照下面的方式引用对应的js文件引用不需要加 .php结尾,如下面标红的代码。其中1.0表示版本号。目录和版本号,可以自定义。

http://s.emao.net/1.0/bbs/footmark.js

  < html>
< head>
< /head>
< body>
< script src="http://s.emao.net//bbs/1.0/footmark.js" type="text/javascript">< /script>
< /body>
< /html>

js和css代码合并原理,在开发环境中,在nginx的虚拟主机配置rewrite规则

不存在的js和css文件都重定向到相应的php处理,方便调试开发。

nginx重定向配置规则:

        location / {
                if (!-e $request_filename){
                        rewrite /(.*)\.(css|js)$ /js_css.php?f=$1&t=$2 last;
                }
         }

在生产环境中,配置/etc/php.ini文件增加 emao.online=1 ,js_css.php 根据配置信息生成合并好的js和css代码。
js_css.php 代码参考:
<?php
//auther zhuyubing@gmail.com
define('ROOT',dirname(__FILE__).'/');
//去掉特殊字符
function filter($string){
        return preg_replace('/[^a-z0-9\/\.\_\-]/i','',str_replace('..','',$string));
}

$file=filter($_GET['f']);
$ext= filter($_GET['t']);
$fn = sprintf('%s.%s.php',$file,$ext);

header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past

'js'==$ext ? header('Content-Type: text/javascript') : header('Content-Type: text/css');


if (!file_exists($fn)){
    echo 'file not exists   '. $fn;
}else {
   if (!get_cfg_var('emao.online')){
       include $fn;
   } else {
       ob_start();
       include $fn;
    //生产环境根据情况对$contents代码进行压缩
       $contents = ob_get_contents();
       ob_end_clean();
    file_put_contents(sprintf('%s%s.%s',ROOT,$file,$ext) ,$contents);
       echo $contents;
   }
}
?>

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有