vifix.cn » Atelier http://vifix.cn/blog compile the dream, compile tomorrow Tue, 15 May 2012 11:42:35 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 HTML5 修改浏览器url而不刷新页面 http://vifix.cn/blog/html5-modify-browser-url-without-reloading-page.html http://vifix.cn/blog/html5-modify-browser-url-without-reloading-page.html#comments Tue, 07 Feb 2012 05:46:18 +0000 Mac http://vifix.cn/blog/?p=2238

嘛，起因是黑子大叔在微博上的一条@信息，找起了这个的实现，看了一圈google的中文信息内似乎还没有怎么提到这个的内容，就发表上来。

详细效果就是类似于用Firefox4+/Chrome 5+/Safari 5+/Opera 11.5+登录新浪微博后看到的个人时间轴，在翻页时可以观察到这个效果，地址栏URL变动，但是页面没有刷新，用firebug观察也观察不到刷新整个页面，只有ajax请求的翻页数据。从先前的理解来说，URL的修改必然引起（请注意我不是在说通过锚点修改）浏览器重载页面，但利用HTML5新加入的history.pushState();和history.replaceState();可以完全自己维护一个历史记录列表绕开历史记录完全由浏览器控制的机制，从而实现比锚点更加完美的一种页内更新的体验。

代码方面很简单，只要在需要修改url的地方插入一行：

window.history.pushState({"html":response.html,"pageTitle":response.pageTitle}, 'title', urlPath);
//三个参数，分别为：状态对象，标题（目前被浏览器忽略），地址

即可在历史记录里面产生一个新的历史记录（另一个replaceState方法参数完全相同，只是替代掉当前的状态）。
在体验上，非常接近于使用锚点（window.location = “#foo”;），但是mozilla的文档提出了以下三点好处：

  • 新的URL可以是和原始页面URL同域下的任何URL，如果用锚点，只能更新#后面的部分
  • 仅在需要时更新URL，锚点的历史记录在相同时不会创建（即当前已经是”#foo”的情况下，如果再将当前页面锚点设置为”#foo”，不会产生新的历史记录）
  • 可以记录下任意类型的数据，使用锚点的话将要自己维护一份历史数据列表或者把数据转码到一个字符串里

（翻译&描述的有点别扭，见笑了，不过其实应该自己也能体会到这些好处才是）

我自己实现的一个例子：
http://vifix.cn/atelier/demos/html5-update-browser-url-without-reloading-page

代码：

<?php
if(!isset($_REQUEST['page'])){
	$page = 1;
}
else{
	$page = intval($_REQUEST['page']);
}
 
if(isset($_REQUEST['ajaxload'])){
	echo "第{$page}页的内容";
	die;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML5 修改浏览器url而不刷新页面</title>
<script type="text/javascript">
var domLoaded = function(){
	if(ua != null && ua[1] < 10){
		alert('您的浏览器不支持');
		return ;
	}
 
	if(location.href.indexOf("?") > -1){
		var urlparts = location.href.match(/(.+?)\?.+/i);
		var urlbase = urlparts[1];
	}
	else{
		var urlbase = location.href;
	}
	var page = <?php echo $page;?>;
	var ua = window.navigator.userAgent.match(/msie (\d\.\d)/i);
	var content = document.getElementById("content");
	var loading = document.getElementById("loading");
 
	window.history.replaceState(
		{
			content:content.innerHTML,
			page:page
		},
		page,
		urlbase + (page > 1 ? '?page=' + page : '' )
	);
 
	var ajax = new XMLHttpRequest();
	var ajaxCallback = function(){
		if(ajax.readyState == 4){
			loading.style.display = 'none';
			content.innerHTML = ajax.responseText;
			window.history.pushState(
				{
					content:content.innerHTML,
					page:page
				},
				page,
				urlbase + "?page=" + page
			);
			next.href = urlbase + "?page=" + (page + 1);
		}
	};
 
	var next = document.getElementById('next');
	var nextClickEvent = function(event){
		if(loading.style.display != 'block'){
			loading.style.display = 'block';
			page++;
			ajax.open('GET', urlbase + '?page=' + page + '&ajaxload=on', true);
			ajax.onreadystatechange = ajaxCallback;
			ajax.send('');
			event.preventDefault();
		}
	};
	next.addEventListener('click', nextClickEvent, false);
 
	var popstate = function(){
		content.innerHTML = history.state.content;
		page = history.state.page;
	};
	window.addEventListener('popstate', popstate, false);
};
 
try{
	window.addEventListener('DOMContentLoaded', domLoaded, false);
}
catch(e){
	alert('您的浏览器不支持');	
}
</script>
</head>
<body>
	<p id="content">
		<?php echo "第{$page}页的内容";?>
	</p>
	<p>
		<a id="next" href="?page=<?php echo $page+1;?>">下一页</a>
	</p>
	<div id="loading" style="display:none;">
		加载中
	</div>
</body>
</html>

mozilla的文档
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

stackoverflow上的相关问题：
http://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-page
http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page

]]> http://vifix.cn/blog/html5-modify-browser-url-without-reloading-page.html/feed 0 SimpleSnake – Hello, Android World http://vifix.cn/blog/simplesnake-hello-android-world.html http://vifix.cn/blog/simplesnake-hello-android-world.html#comments Fri, 20 Jan 2012 06:39:13 +0000 Mac http://vifix.cn/blog/?p=2229

年末了，相对来说工作已经比较清闲，于是趁着机会研究了一下Android的游戏开发，花了一个下午写了这个贪吃蛇的应用。

使用的游戏引擎是libgdx，虽然目前看起来文档比较缺少，但是，最大的好处是可以在Winodows/OSX/Linux上运行，android上则只需要额外几行代码就可以运行，极大的方便了调试和跨平台的工作。

下载apk请点击此处 – simplesnake （必须要800×480的分辨率才可以正常运行，如果大于这个分辨率仍然可以运行但按钮将错位，低于这个分辨率则可能出现奇怪的问题并且按钮缺失，因为只是hello, world，所以也不打算进一步优化各个分辨率了）

另外推荐下libgdx原作者的博客badlogic，以及他写的书：google book，豆瓣，像我这样的游戏开发初学者看看挺不错的。

一篇国产PC/Android游戏引擎LGame作者cping1982同学的介绍libgx的科普文章也很值得一看：http://blog.csdn.net/cping1982/article/details/6176191

]]> http://vifix.cn/blog/simplesnake-hello-android-world.html/feed 0 吃巧克力节没人约无处去只好毁歌有感（？） http://vifix.cn/blog/happy-valentine-20100214.html http://vifix.cn/blog/happy-valentine-20100214.html#comments Sun, 14 Feb 2010 14:59:15 +0000 Mac http://vifix.cn/blog/?p=1352

那么标题图是今天基友呃不对宅友送的宅物，konata一只，当然了，还有konata手上的好人卡，嗯（严重误）

于是下面是一年一度的自娱自乐和毁灭狗耳计划……

===警告===

继续阅读此帖可能会引起大脑神经短路，狗耳烧坏等不适症状，请务必自备避雷针和氪金狗耳后再考虑进入 orzorzorzorz

歌曲选的是Valentine Kiss的网球王子的一个声优的版本，这歌本身是老歌了，没记错的话，是1985年的歌了，原唱是国生小百合，自Lucky Star的Tsukasa酱在ending的卡拉OK里面唱了一遍后被萌到。

但请注意这里的物体：

  • 渣演唱
  • 渣混音
  • 渣剪辑（完整版有3分半，发现后面的自己今天是唱不下来了，就瞎剪了……）

链接在此（点击后在线播放） （flash播放器的下载以及缓冲可能会较慢……

对于一切因为以上mp3造成的伤害本人概不负责 orz

好吧这是去年的传送门……

大年初一的出来吓人，真是对不起各位了TVTbbb

]]> http://vifix.cn/blog/happy-valentine-20100214.html/feed 15 新的主题，新的开始 http://vifix.cn/blog/new-wordpress-theme-new-beginning.html http://vifix.cn/blog/new-wordpress-theme-new-beginning.html#comments Sun, 31 Jan 2010 16:03:12 +0000 Mac http://vifix.cn/blog/?p=1331

总之，效果想必点击进来的也已经看到了，实际上这个主题我连名字也没有认真的想，一想现在是冬天，就随手命名成了vifix-winter。虽说春天都快到了。

使用了很多CSS 3.0的特性，所以在Firefox 3.5+和Chrome以及Safari的最新版本上才可以看到最好的效果。一些特性IE8上也得不到支持，写了专门的CSS修正，更不要说那个诡异的IE6了，所以IE6上访问本站将是一个缩水后的版本（并且还会有一个简单的提示） orz

背景的蓝色渐变是纯天然的，就是上面照片中的最右边的一个像素宽的内容，2009年10月摄于南京。

]]> http://vifix.cn/blog/new-wordpress-theme-new-beginning.html/feed 11 利用Google Map API获取地址坐标 http://vifix.cn/blog/convert-address-to-coordinates-google-map-api.html http://vifix.cn/blog/convert-address-to-coordinates-google-map-api.html#comments Sat, 06 Jun 2009 14:41:29 +0000 Mac http://vifix.cn/blog/?p=941 Google.com

朋友拜托改的一段PHP小代码，其实就是Google MAP API FAQ里面提到的例子稍作修改，原文例子还用到了MySQL作为存储因此扯了一堆MySQL和PHPMyAdmin，只是想简单查下的就显得没必要了。

修改 @ 2009-06-07 :

于是今天写了一个Javascript版本的：http://vifix.cn/atelier/address_to_coordinates/
，代码都在HTML里面了，感兴趣可以右键查看源码。

下面是PHP版本的代码：

define("MAPS_HOST", "maps.google.com");
define("KEY", "更换成你的KEY，可以去 http://code.google.com/intl/zh-CN/apis/maps/signup.html 申请");
$base_url = "http://" . MAPS_HOST . "/maps/geo?output=xml" . "&amp;key=" . KEY;
$address = "上海东方明珠塔";  // 需要查询的地址
$request_url = $base_url . "&amp;q=" . urlencode($address);
$xml = simplexml_load_file($request_url) or die("url not loading");
 
$status = $xml-&gt;Response-&gt;Status-&gt;code;
if (strcmp($status, "200") == 0) {
	// Successful geocode
	$geocode_pending = false;
	$coordinates = $xml-&gt;Response-&gt;Placemark-&gt;Point-&gt;coordinates;
	$coordinatesSplit = split(",", $coordinates);
	// Format: Longitude, Latitude, Altitude
	$lat = $coordinatesSplit[1];
	$lng = $coordinatesSplit[0];
 
	echo "坐标: $lat,$lng";
 
} else if (strcmp($status, "620") == 0) {
	echo "请求频率过快";
} else {
	echo "请求失败";
}
]]> http://vifix.cn/blog/convert-address-to-coordinates-google-map-api.html/feed 9 一个PHP简易访问计数 http://vifix.cn/blog/ezcounter.html http://vifix.cn/blog/ezcounter.html#comments Sun, 31 May 2009 12:52:18 +0000 Mac http://vifix.cn/blog/?p=922 source_php

嘛，受朋友所托写的，不是什么大不了的东西，贴上来就当给初学者参考吧
只有计数功能，利用session防止重复计数

注意只能运行在PHP5+上

代码见页内：

/**
 *  ezcounter
 *  http://vifix.cn
 *  MIT Lisence
 */
 
class ezcounter{
 
	const display_only = 1;
	const display_and_count = 0;
 
	private $file;
	private $hits;
 
	// 构造函数
	public function __construct($name = 'ezcounter'){
 
		// 存放计数的文件
		$this->file =  dirname(__FILE__) . "/$name.txt";
 
		// 判断文件是否存在，不存在则创建
		if(file_exists($this->file))
		{
			$this->hits = file_get_contents($this->file);
		}
		else
		{
			file_put_contents($this->file, "1");
			$this->hits = 1;
		}
	}
 
	// 获取计数
	public function gethits($flag = self::display_and_count){
		switch($flag)
		{
			case self::display_and_count:
				@session_start();
				if(!$_SESSION['ezcounter'])
				{
					$this->hits++;
					file_put_contents($this->file, $this->hits);
					$_SESSION['ezcounter'] = true;
				}
				return $this->hits;
				break;
			case self::display_only:
				return $this->hits;
				break;
		}
	}
 
	// 重定向计数
	public function redirect($url){
		@session_start();
		if(!$_SESSION['ezcounter'])
		{
			$this->hits++;
			file_put_contents($this->file, $this->hits);
			$_SESSION['ezcounter'] = true;
		}
		header("Location: $url");
	}
 
}

用法1，只是显示访问计数

require_once("ezcounter.php");
 
$counter = new ezcounter();
echo $counter->gethits(ezcounter::display_and_count);

用法2，转发计数（比如可以用于下载计数）

//download.php
require_once("ezcounter.php");
 
$counter = new ezcounter('another_file_name');
$counter->redirect('/target');
//view.php
require_once("ezcounter.php");
 
$counter = new ezcounter('another_file_name');
echo "<a href="download.php">" . $counter->gethits(ezcounter::display_only) . "</a>";
]]> http://vifix.cn/blog/ezcounter.html/feed 3 vxtodo http://vifix.cn/blog/vxtodo.html http://vifix.cn/blog/vxtodo.html#comments Tue, 12 May 2009 14:39:28 +0000 Mac http://vifix.cn/blog/?p=895 vxtodo

这段时间研究Google App Engine的成果，今天发布。

一个个人TODO-List管理程序，支持邮件提醒。

服务器端是Python，客户端自然还是 HTML + CSS + JS，话说Javascript的代码比Python还多一倍，没jQuery的话代码量应该会更加冗长……不过用Google App Engine来写程序还是挺幸福的。

欢迎各位使用（会有人用么？），以及帮忙测试和报告Bug

在GPL第二版协议下开源。

地址：
http://vxtodo.ihfs.net/
http://vxtodo.appspot.com/

获取源代码前往：
http://code.google.com/p/vxtodo/

PS.I: google app engine还无法支持.cn域名，因此只好用这个ihfs.net来进行绑定了……
PS.II: 话说appspot偶尔会被GFW掉，无奈……
PS.III: 于是咱也玩了把云计算了啊～

更新@2009-05-14:

  1. 修正了无法输入\和回车的bug
  2. 加入Prism的说明
  3. 制作了LOGO

更新@2009-05-15:

  1. 修改了数据模型，删除了一些无用的测试数据（没办法的选择，这种键-值数据库无法修改“表结构”，只能清空数据库然后重新添加

更新@2009-05-17:

  1. 对状态图标加上了事件，点击可以直接转换状态
  2. 将代码导入Google Code，以GPLv2开源

更新@2010-01-17:

  1. 解决一个换行的问题
]]> http://vifix.cn/blog/vxtodo.html/feed 15 WordPress主题vifix9发布 http://vifix.cn/blog/vifix9-wordpress-theme-publish.html http://vifix.cn/blog/vifix9-wordpress-theme-publish.html#comments Wed, 15 Apr 2009 09:17:31 +0000 Mac http://vifix.cn/blog/?p=827 vifix9-wp-theme-screenshot

最近三天做的东西，生平第一个WordPress的主题，主要是为了和splash页保持一致，顺便化解一下⑨的冲动（不知道我在说啥的无视这句）

效果嘛，见这个Blog目前的状态就知道了。

在创作共用署名-非商业性使用-相同方式共享2.5版协议下发布，感兴趣的可以点击下面的图标链接获取。

vifix9.zip

右侧的About区域可以自定义使用的gravatar头像和信息（如果没有设定则使用用户列表中的第一位的电子邮件来生成头像）。上面的“⑨”位置的超级连接也可以修改（自带Options页面）。另外，用了一些WordPress 2.7才有的函数，所以在2.7之前的版本上是无法使用的。

目前仍然有诸多问题（好像每次发布点啥都有问题……）

  • 在添加自定义的widget添加上去的不美观，写CSS写到累了，还是以后再改了 orz
  • 一些文本调用了WordPress的本地化文件，而一些文本则没有调用，在中文的WordPress上，会看到自带的widget中英文标题共同显示的情况……

updated @ 2009-04-16

0.2版本发布，修改了链接的风格，解决一个HTML上的Bug

]]> http://vifix.cn/blog/vifix9-wordpress-theme-publish.html/feed 13 首页更新 http://vifix.cn/blog/vifix-cn-homepage-updated.html http://vifix.cn/blog/vifix-cn-homepage-updated.html#comments Sun, 12 Apr 2009 11:42:55 +0000 Mac http://vifix.cn/blog/?p=825 vifix9

觉得先前的首页在载入效率上很有问题，于是干脆一鼓作气重新做了一个，总共消耗大概16个小时。并且加入了一些细节和效果和内容（主要是一些个人的作品）。嘛，今年过后也得找工作了，就当广告先做起来吧～

访问：http://vifix.cn

眼下似乎还有一些问题，慢慢进行调整了。

滚动和音效分别使用了这两个jQuery插件：jQuery.jScrollPane, jQuery.flashSound

PS: 搞这个东西时项目目录命名为vifix9（因为是09年），真有改成⑨的冲动……

]]> http://vifix.cn/blog/vifix-cn-homepage-updated.html/feed 7 Java中的支持重试，有限任务数量线程池 http://vifix.cn/blog/java-limited-task-amount-threads-pool.html http://vifix.cn/blog/java-limited-task-amount-threads-pool.html#comments Tue, 24 Mar 2009 09:18:47 +0000 Mac http://vifix.cn/blog/?p=788 threadpooldemo_output

昨天学校网络没有续费没法上网，晚上找事情干，就翻着O’Reilly的《Java线程》（第三版）看了一些内容然后写的实验性质的代码，主要是对于Konachan的线程池代码很不满意而写的。

这些代码主要包括：

  1. 三个线程复用的线程池（利用ThreadPoolExecutor）
  2. 通过判断线程池现有的活动线程数量限制ThreadPoolExecutor执行新任务
  3. 如果执行出错，可以自动重试（这里的“任务”有80%的成功率）
  4. 利用Hashtable<Integer, String>来记录“任务”的运行状态，如果不在Hashtable中，表示任务已经结束
  5. 每个“任务”耗时0到10000毫秒（利用Thread.sleep模拟）

然而这个实现也让人觉得不够优雅，也许自己实现一个RejectedExecutionHandler接口的类，然后绑定为ThreadPoolExecutor的弹出策略才是王道吧。另外，觉得应该还需要自己还要再写一个队列。

完整的代码（Eclipse工程在文末）：

Main:

package cn.vifix.concurrentLab;
import java.util.Hashtable;
import java.util.concurrent.SynchronousQueue;
import java.util.concurrent.ThreadPoolExecutor;
import java.util.concurrent.TimeUnit;
 
public class ThreadPoolDemo
{
	public static Hashtable<Integer,String> jobs;
 
	public static void main(String[] args)
	{
		new ThreadPoolDemo();
	}
 
	public ThreadPoolDemo()
	{
		jobs = new Hashtable<Integer, String>();
		int taskCount = 30;
		for (int i=0; i<taskCount; i++)
		{
			jobs.put(i, "todo");
		}
		SynchronousQueue<Runnable> queue = new SynchronousQueue<Runnable>();
		ThreadPoolExecutor exec = new ThreadPoolExecutor(3, 3, 20, TimeUnit.SECONDS, queue, new ThreadPoolExecutor.DiscardPolicy());
		while(jobs.size() > 0)
		{
			try
			{
				Thread.sleep(500);
			}
			catch (Exception e)
			{
				e.printStackTrace();
			}
			if (exec.getActiveCount() == 3)
			{
				System.out.println("Thread count == 3; Skip this loop...");
				continue;
			}
			for (int i = taskCount - 1; i > -1; i--)
			{
				if (jobs.containsKey(i))
				{
					if (jobs.get(i) == "todo")
					{
						jobs.put(i, "doing");
						exec.execute(new ThreadPoolDemoWorker(i));
						break;
					}
				}
			}
			synchronized(System.out)
			{
				System.out.print(jobs.size());
				System.out.print(" Task Left:");
				System.out.print(" List:");
				System.out.println(jobs);
			}
		}
		System.out.println("All done.");
		System.exit(0);
	}
}

Worker:

package cn.vifix.concurrentLab;
 
public class ThreadPoolDemoWorker implements Runnable
{
	private int idx;
 
	@Override
	public void run()
	{
		try
		{
			new ThreadPoolDemoJob(idx).process();
		}
		catch (Exception e)
		{
			System.out.println(e);
		}
	}
 
	public ThreadPoolDemoWorker(int i)
	{
		idx = i;
	}
}

Task:

package cn.vifix.concurrentLab;
import java.util.Random;
 
public class ThreadPoolDemoTask
{
	private int idx;
	private Random random;
 
	public ThreadPoolDemoTask(int i)
	{
		idx = i;
		random = new Random();
	}
	public void process() throws Exception
	{
		try
		{
			Thread.sleep(random.nextInt(10000));
		}
		catch (InterruptedException ex)
		{
			ex.printStackTrace();
		}
		this.doTask();
	}
 
	private void doTask() throws Exception
	{
		if (random.nextFloat() > 0.8)
		{
			ThreadPoolDemo.jobs.put(idx, "todo");
			synchronized(System.out)
			{
				System.out.println(" Task " + idx + " failed.");
			}
			throw new Exception("Task " + Integer.toString(idx) + " failed, retry.");
		}
		else
		{
			synchronized(System.out)
			{
				System.out.println(" Task " + idx + " done.");
			}
			ThreadPoolDemo.jobs.remove(idx);
		}
	}
}

Eclipse工程，欢迎共同研究！

]]> http://vifix.cn/blog/java-limited-task-amount-threads-pool.html/feed 1