求教taobao这个是怎么实现的
<link href="http://a.tbcdn.cn/p/??header/header-min.css,fp/2010c/fp-base-min.css,fp/2010c/fp-channel-min.css,fp/2010c/fp-product-min.css,fp/2010c/fp-mall-min.css,fp/2010c/fp-category-min.css,fp/2010c/fp-sub-min.css,fp/2010c/fp-gdp4p-min.css,fp/2010c/fp-css3-min.css,fp/2010c/fp-misc-min.css?t=20100902.css" rel="stylesheet" />
合并加载了所有css..
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
找到一段，但似乎不是现在这个。
apache2.2.14的rewrite的语法不熟悉，用php来搞
场景1，外部脚本
http://a.tbcdn.cn/tbra/2.1/header/header-min.js
场景2，内部脚本
http://a.tbcdn.cn/yui/3.0.0/build/oop/oop-min.js
场景3，内外（内内，外外）合并脚本
http://a.tbcdn.cn/combo?yui/3.0.0/build/oop/oop-min.js&tbra/2.1/header/header-min.js
rewrite配置
RewriteEngine On
RewriteRule ^/combo?(.+)$ /get.php?$1 [QSA,L]
RewriteEngine On
RewriteRule ^/(.+)$ /get.php?$1 [QSA,L]
<?php
/**
* set e-tag cache
*/
function cache($etag){
$etag = $etag; //标记字符串，可以任意修改
if ($_SERVER['HTTP_IF_NONE_MATCH'] == $etag){
header('Etag:'.$etag,true,304);
exit;
}
else header('Etag:'.$etag);
}
function get_contents($url){
$ch =curl_init($url);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$str =curl_exec($ch);
curl_close($ch);
if ($str !==false) {
return $str;
}else {
return '';
}
}
//得到扩展名
function get_extend($file_name) {
$extend =explode("." , $file_name);
$va=count($extend)-1;
return $extend[$va];
}
/**
* logic begin
*/
$files = array();
//cdn上存在的各种可能的文件类型
$header = array(
'js' => 'Content-Type: application/x-javascript',
'css' => 'Content-Type: text/css',
'jpg' => 'Content-Type: image/jpg',
'gif' => 'Content-Type: image/gif',
'png' => 'Content-Type: image/png',
'jpeg' => 'Content-Type: image/jpeg',
'swf' => 'Content-Type: application/x-shockwave-flash'
);
$type = '';
foreach ($_REQUEST as $k => $v) {
//各种可能的替换规则
$k = preg_replace(
array('/_(js|css|gif|png|jpg|jpeg|swf)$/','/yui/2_8_0r4/','/yui/3_0_0/','/(d+)_(d+)_(d+)/','/(d+)_(d+)/','/_v(d)/'),
array('.$1','yui/2.8.0r4','yui/3.0.0','$1.$2.$3','$1.$2','.v$1'),
trim($k,'/')
);
if(empty($type)) {
$type = get_extend($k);
}
//文件存在
if(file_exists($k)) {
//处理文本
if(preg_match('/js|css/',$type)){
$files[] = file_get_contents($k);
}else{
//处理非文本
$files[] = array(file_get_contents($k));
}
}else{
//文件不存在
//文本的处理
if(preg_match('/js|css/',$type)){
$files[] = '/* http://a.tbcdn.cn/'.$k.' */';
$files[] = join('',file('http://a.tbcdn.cn/'.$k));
}else{
//非文本的处理
$files[] = file('http://a.tbcdn.cn/'.$k);
}
}
}
header("Expires: " . date("D, j M Y H:i:s", strtotime("now + 10 years")) ." GMT");
//文本的处理
header($header[$type]);//文件类型
if(preg_match('/js|css/',$type)){
$result = join("n",$files);
}else{
//非文本的处理
$result = join("",$files[0]);
}
cache(md5($result));//etag,处理Etag是否多余?
echo $result;
?>
需要具体解决方案。
此实现对前端模块化和项目整体是很有好处的。
我的看法是：加载的应当是一个css选择器，?后面字符串（css文件名）是参数。抛砖引玉
css、js压缩，有很多这样的工具
http://www.oschina.net/p/tengine 用淘宝的Tengine来实现的一个请求合并加载多个资源文件
至于生成这种格式的html代码，是由另外一套工具来生成的。