零度の热情

腾讯微博技术分析之广播消息转换为可视化过程

deeka , Jul 4 16:31 , 技术领域 » PHP/MYSQL , 评论(0) , 引用(0) , 阅读(375) , 本站原创

最近大伙都比较热衷于玩腾讯微博，喜欢新鲜事物的我（喵了个咪）也不例外，不过玩的同时，喜欢想这个是怎么实现的那个是怎么实现的，所以有了这篇文章。

大家都知道，一段文字：

大家说@deeka和@admin是不是#牛人#, 个人博客http://www.hdj.me?

经过广播之后，会变成大概这个样子：

大家说<a href='http://www.yourdomain.com/deeka'>大笨</a>和<a href='http://www.yourdomain.com/admin'>超级管理员</a>是不是<a href='http://www.yourdomain.com/t/牛人'>#牛人#</a>, 个人博客<a href='http://www.yourdomain.com/url/4f6beca52ee37c537d1fa85bc374679f' title='http://www.hdj.me'>http://www.yourdomain.com/url/4f6beca52ee37c537d1fa85bc374679f</a>。

但这整个过程是怎么实现的呢？

正则替换！对了，就是利用了正则替换。

但是简单的正则替换还是不能完全完成这一过程，需要更复杂一些的正则\e修正模式支持。

花了一点点时间写了一个演示：

<?php
$accounts = array(
  'admin'=>'超级管理员',
  'deeka'=>'大笨',
);

function showaccount($s=''){
  global $accounts;
  if($accounts[$s])
    return "<a href='http://www.yourdomain.com/{$s}'>{$accounts[$s]}</a>";
  else
    return $s;
}

function showurl($s=''){
  $md5 = md5($s);
  $url = "http://www.yourdomain.com/url/{$md5}";
  return "<a href='{$url}' title='{$s}'>{$url}</a>";
}

function showtopic($s=''){
  return "<a href='http://www.yourdomain.com/t/{$s}'>#{$s}#</a>";
}

$s = "大家说@deeka和@admin是不是#牛人#, 个人博客http://www.hdj.me。";
$p = array(
  "/(http\s?:\/\/[\w+\.\-\_]+)/e",
  "/@(\w+)/e",
  "/#(.*?)#/e",
);

$r = array(
  "showurl('\\1')",
  "showaccount('\\1')",
  "showtopic('\\1')",
);
$s = preg_replace($p, $r, $s);
var_dump($s);
?>

仿腾讯微博/谷歌阅读器滚动加载效果

deeka , Jun 28 22:22 , 技术领域 » JS/CSS , 评论(1) , 引用(0) , 阅读(251) , 本站原创

腾讯微博在“我的主页”查看最新的广播列表时，为了更好的用户体验，并没有使用传统的分页，而是改用滚动加载，当用户把页面滚动到底部的时候，自动加载下一页的内容。谷歌阅读器也正是使用了这种效果。

花了一点点时间山寨了一个，欢迎指正和交流。

Demo:http://www.hdj.me/demo/javascript/reachBottom/index.html

命令行下7z解压问题及解决办法

deeka , Jun 26 21:19 , 那点屁事 , 评论(0) , 引用(0) , 阅读(51) , 本站原创

大家都知道7z是开源的压缩工具，支持不少平台，除了界面还支持命令行。
在命令行下解压一个7z文件的时候遇到了比较郁闷的问题，压缩包里的目录如果包含@符号的时候，会导致无法正常解压。对@进行转义也不行。

命令：7z e test.7z "@dir@/filename.txt"

查看了7z的手册才知道@有特别用途，是指定列表的意思。

官方没有说到关于目录名包含@符号的转义方法。后来用?或*来代替@就OK了。

[转载]前端优化之Page Flushing

deeka , Jun 25 23:36 , 技术领域 » PHP/MYSQL , 评论(0) , 引用(0) , 阅读(35) , 本站原创

Page Flushing不是啥新概念，几年前雅虎就在Best Practices for Speeding Up Your Web Site里提过Flush the Buffer Early，可惜我一直没太在意，不过今天在翻看Velocity 2010 Speaker Slides & Video中的资料时，发现了Building Performance Into the New Yahoo! Homepage，里面再次强调了这个问题。

Page Flushing的目的在于让让浏览器尽可能快的得到数据，以便渲染，在PHP里有一个flush函数很有用：

</head>
<?php flush(); ?>
<body >

通过在head后面放置flush，即便后面的内容还没有生成，也可以先让客户端得到头部的内容，从而尽快开始下载css数据（这里我没说js,因为从完美角度看，js应该尽可能放在页面尾部，而不是放在head里），如此一来速度会快一些，从而改善前端的用户体验。

在head后放置flush是最常见的方法，但不便于演示，下面看看在body中使用flush的例子：

<html>
<head>
<title>DEMO</title>
</head>
<body >
<div>hello</div>
<?php ob_flush(); flush(); sleep(1); ?>
<div>world</div>
<?php ob_flush(); flush(); sleep(1); ?>
</body>
</html>

注意：因为有的PHP环境会打开输出缓冲，所以上面使用了ob_flush方法排除这种情况。

使用Firefox浏览上面代码，就能看到效果了，但是如果你使用IE浏览的话，会发现无效，原因在PHP手册中对flush函数的描述里已经说得很清楚了：

引用

Some versions of Microsoft Internet Explorer will only start to display the page after they have received 256 bytes of output, so you may need to send extra whitespace before flushing to get those browsers to display the page.

也就是说如果内容太短的话，IE会先缓冲内容，到了一定的长度再输出，如果你遇到了这个问题，可以发送空白字符来凑数。

最后再说一个问题：

<html>
<head>
<title>DEMO</title>
</head>
<body >
<table>
<tr><td>
long string...
<?php ob_flush(); flush(); sleep(1); ?>
</td></tr>
<tr><td>
long string...
<?php ob_flush(); flush(); sleep(1); ?>
</td></tr>
</table>
</body>
</html>

这段代码和上面的代码相比，多了一个页面级的table包裹，如果这样设计话的，即便使用了flush，但由于table标签标签未闭合，所以浏览器不会立即开始渲染，必须等到table标签闭合才可以，如此一来，flush就无意义了，不过经过测试，我发现虽然IE有这个问题，但Firefox似乎不受影响，可不管怎么说，在使用Page Flushing技术的时候，还是应该尽可能避免页面级别的元素包裹，把内容打散，多多使用flush。