准备工作肯定是要有的。由于我这次又准备对硬盘分区做一番大动作，资料备份是必不可少的了。整理了一下移动硬盘里的东西，然后把 /home/upsuper 里面的大量资料和部分配置文件移入了移动硬盘，费了大概一个多小时的时间。接下去打开了我的上网本，打开当时在 LinuxToy 刊登的 Arch Linux 安装指南，这是非常必要的。对于一个用惯了 Ubuntu 这样几乎纯图形界面配置的人来说，一个更接近于 LFS 的系统没有参考自然是不敢随便动手的。

不过有了这个参考，其实 Arch Linux 说实话也就比 Ubuntu 要麻烦那么一点点了……安装的过程中虽然有很多与那个指南不一样的地方，不过因为各种原因没有一一记录下来……比较有印象的是分区，是2个主分区，4个逻辑分区。虽然很多人说过，现在已经不再需要把 /boot 单独分出来了。不过考虑到我准备将默认文件系统弄成 ext4，而 Arch Linux 默认又不提供 Grub2 作为启动器，那我就只能非常无奈的单独分出一个 /boot 了……这就是第一个主分区。另外一个主分区留了 500MB，准备改天在里面放个 FreeBSD 什么的耍耍~4个逻辑分区是不能免俗的 /tmp、根分区、/home 和交换区。本来有点想像上网本里弄得那样把 /tmp 弄到内存里面去。不过想来想去，觉得 1GB 的内存对于上网本来说够了，可是对于台机来说还是不算很大的，于是就作罢了，单独分区。给了 /tmp 1GB，交换区 512MB，根目录 20GB，剩下的就照例都给了 /home。

我在安装的时候没有如安装指南所说的使用 Arch Linux 原本的源，而是转而直接使用了网易的源。由于这个原因，后面的安装配置过程异常迅速，因为网易的源在我这里的下载速度可以达到 1MB+/s！突然想起 Arch Linux 貌似还有多点下载的技术，我就不去研究了，不然可能 4MB/s、5MB/s 都能给我飙出来……接下去就直接赶英超美了……事实证明，福建电信还是比较厚道的~

我记得，那个 20GB 的空间，刚刚装完 Arch Linux 的核心部分，大概只占用了 8%，接着我开始大装软件。什么 python、erlang、texlive、gnome、jdk、jre、openoffice 之流都装上去，现在看看，已经占用了 33% 了……

因为一开始记了一张软件单子，按着单子安装软件也是十分的方便，在进入图形界面前就已经把需要的软件安装好大半了。话说 Arch Linux 的启动没有启动画面，这点让我有点不适应。而且看启动也没有加入 quiet 参数，启动过程各种信息喷涌而出。本想自己给他加上的，后来想想也就作罢了，没所谓的事情。

倒是字体的问题纠结了我一些时间，最后我还是从 AUR 上安装了文泉驿微米黑，然后手动把所有字体调为微米黑，现在显示效果相当赞。最后就是 Firefox 的插件问题了。因为插件我也列了张单子（这次可是准备充分嗯！），然后一个一个装上，最后用 Xmarks 同步一下书签，现在 Firefox 和我换系统之前几乎是一模一样了~当然，效率比原来那个提高了不少~

不得不说的是，Arch Linux 初装后的效率确实是没得说的快，比 Ubuntu 快多了。不过不知道是不是因为默认安装的东西少，还是希望这种效率能够不断保持下去。现在用 Arch，估计在以后的很长一段时间里不会再换了，也不会再重装了，Arch 你要给我好好表现~

最后上一张图把，超赞 Bisigi 的新主题 AirLines：

我要记录下在这个过程中遇到的种种问题和解决方法，以后再遇到就有地方查了~

客户端部分

很早就听说了 jQuery，上次看完 wp-codebox 的代码才顿觉 jQuery 的强大，因此这次选择了这个。经过短暂的学习就基本了解了，还是比较简单的。此外，jQuery 的插件库相当强大，里面找到了所有我需要的东西，包括上传文件的插件和播放器的插件等。

编写客户端代码最艰苦的部分就是配色和设计界面，以及在各个浏览器中调试。关于兼容性的问题放在后面说，前面先写点关于 JavaScript 代码的事。

第一个比较有趣的问题是关于浮点数保留精度的问题。虽然保留精度大是件好事，可是 JavaScript 没有如 C 中的 printf 那么方便的东西（不过网上似乎也有类似实现，不过 JavaScript 实现这个东西……还是算了吧……）。而一下把很长很长的浮点数显示在用户面前，也绝对不是件好事。经过搜寻，最后使用下面代码实现：

1
2
3
4
5
6

Number.prototype.fix = function (num) {
  with (Math) return round(this.valueOf() * pow(10, num)) / pow(10, num);
};
String.prototype.fix = function (num) {
  return parseFloat(this).fix(num);
};

第二个问题就是关于 MP3 播放器背景的问题。我用的这个播放器插件极具可定制性，背景色和前景色都能定制，不过要求都要使用十六进制的形式传入。为了更好的适应主题颜色，我就使用 jQuery 的 .css 方法在脚本中现场获取当前在 CSS 中定义的前景色和背景色。结果发现，其在 Firefox 内返回的是类似 rgb(0, 0, 0) 这样的颜色表大形式。据说在 Firefox 中永远放回这种形式，而 IE 中则总是返回你实际设置时使用的格式。针对这个问题，我写了下面代码来解决（毋庸置疑，这又是抄的）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var hex = function (n) {
  if (n == null) return '00';
  n = parseInt(n);
  if (n == 0 || isNaN(n)) return '00';
  n = Math.round(n);
  if (n < 0) n = 0;
  else if (n > 255) n = 255;
  return '0123456789abcdef'.charAt((n - n % 16) / 16) +
         '0123456789abcdef'.charAt(n % 16);
};
var color2hex = function (color) {
  if (color.search(/rgb/i) > -1) {
    color = color.substring(4, color.length - 1).split(', ');
    return hex(color[0]) + hex(color[1]) + hex(color[2]);
  } else if (color.charAt(0) == '#') {
    color = color.substring(1);
    if (color.length == 3) {
      return color.charAt(0) + color.charAt(0) +
             color.charAt(1) + color.charAt(1) +
             color.charAt(2) + color.charAt(2);
    } else {
      return color;
    }
  }
};

另外就是，为了防止大家大量重复提交同样音乐，这次加入了搜索功能，而且在提交一个音乐的时候就会自动进行搜索，并提示用户检查是否已有相同曲目被提交。至于搜索的实现，采用的是客户端搜索，算法上采用了非常著名而简单的 LCS (Longest common subsequence, 最长公共子序列) 这一 oier 的居家旅行杀人放火必备算法。事实证明，这一算法其实是很有效的~

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function lcs(str1, str2) {
  if (! str1 || ! str2) return 0;
  var arr = [];
  var i, j;
  for (i = 0; i < str1.length; ++i) {
    arr[i] = [];
    for (j = 0; j < str2.length; ++j) {
      arr[i][j] = Math.max(i ? arr[i-1][j] : 0, j ? arr[i][j-1] : 0);
      if (str1.charAt(i) == str2.charAt(j))
        arr[i][j] = Math.max(arr[i][j], i && j ? arr[i-1][j-1] + 1 : 1);
    }
  }
  return arr[str1.length-1][str2.length-1];
}

搜索算法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function search(type, text, callback) {
  text = text.replace(/\s+/g, '').toLowerCase();
  var threshold = text.length * 0.25;
  var result = [];
  getList(type, function (value) {
    if (! value || typeof value == 'number') {
      callback(value);
      return;
    }
    var itemtext, item, i;
    for (i = 0; i < value.length; ++i) {
      item = value[i];
      itemtext = (item.source + item.title).replace(/\s+/g, '').toLowerCase();
      item.len = itemtext.length;
      item.lcs = lcs(text, itemtext);
      if (item.lcs > threshold) result.push(item);
    }
    result.sort(function (item1, item2) {
      if (item1.lcs > item2.lcs) return -1;
      if (item1.lcs < item2.lcs) return 1;
      if (item1.len < item2.len) return -1;
      if (item1.len > item2.len) return 1;
      return 0;
    });
    callback(result);
  });
}

还有一个是关于换肤的。上一次有一篇文章测试过了基于更换 link 标签 href 属性换肤的可行性分析，这次就应用于了这个平台上。但在测试中发现 IE 并不像想像的那么完美。事实上，IE 在这个的测试过程中是非常废品的，几乎相当于不能换。经过多次实验，发现原因出在——IE6 在页面加载完毕后永远不会显示其还没有下载的样式信息。也就是说，更改 href 后，虽然 IE6 将原来的样式表无效化了，但此时发现新的样式表不在其缓存中，便拒绝启用新的样式表。但奇怪的是，IE6 这个时候事实上会连接服务器下载新的样式，因此在下一次访问的时候上次点过的皮肤就可以用了。这说明，我们只要要求 IE 预装载以后可能用到的东西就可以了。因此我就在页面底部加入了一个隐藏的 iframe 用于下载样式表和需要的图片。

除此之外，就是一些关于样式的新发现。我第一次知道当一个元素的 position 属性设置为 relative 的时候，对这个对象本身没有影响，但却使得其使用 position 属性的子元素的位移变由相对页面的位移变为相对该元素的位移。这的上传进度条的实现方法便是应用这一机制。

说到上传进度条，不得不说 Uploadify 这一插件真的很强大……我将其默认的上传进度和管理通过对各个必要函数绑定返回 false 来屏蔽掉了。

最后是关于 jQuery 优化的问题。虽然 jQuery 的官方测试表明，jQuery 的效率非常惊人，但优化下总归是有好处的。参考的资料见下面了，说说我大体做了哪些优化吧。一是缓存 jQuery 对象，防止重复调用选择器带来的性能损失。第二个是为选择器加上上下文限制，第三个是将部分效果移至 $(window).load 里。

在客户端的脚本部分的最最后，小小的埋怨一下 JavaScript 这个语言……我觉得实在是没有 Python 优美啊！什么时候 Python 能成为通用的客户端脚本啊，那个时候用 Python 就可以通吃服务器端和客户端了……

说完了脚本，来说说这次的界面。这次界面个人还是很满意的。在界面设计中，我自认为值得一提的是那个圆角，为什么呢？因为我以前一直以为 GIMP 不能画圆角。这次去网上找了才知道，GIMP 远比我想象的强大的多！猜猜圆角是怎么画出来的？是通过高斯模糊+调整色阶。具体的实现方法放在下面参考资料里面了，这里就不详述了。但我真的觉得很强大，虽然 GIMP 和 Photoshop 等商业软件还有差距，不过对于我来说，看来足够了。

最后再提下这次发现的不同浏览器的兼容性问题：

对于不显示的 Flash，IE 无法与其交互

对于曾经被隐藏但再次出现的 Flash，IE6 无法与其交互

解决方案：完全销毁原有 Flash 对象并重建

IE 中隐藏的 Flash MP3 播放器可以发出声音，但 Firefox 不行

解决方案：统一的办法就是直接销毁播放器，而非单单让其隐藏

IE 的 JavaScript 解析器不支持用 [index] 的方式索引字符

解决方案：使用原有标准的 .charAt(index) 方式索引

在 IE6 中，显示时尚未下载完成的 CSS 元素永远不会显示（如背景图片）

解决方案：在页面中加入一个隐藏的 iframe 用于预加载

IE6 中的双倍外边距 bug

解决方案：给相应对象加上 display:inline; 属性，或通过 hack 专门调低在 IE6 下的外边距

IE6 对于 display 的 inline-block 属性支持不完善

解决方案：给相应对象加上 zoom:1; 属性

IE6 不支持半透明的 png 图片

解决方案：采用 IE 专有的过滤器 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 可以完美解决

IE 的兼容性烦死人啊……看看我的 ie6-fix.css 和 ie7-fix.css 就知道了……

使用部件

• jQuery: The Write Less, Do More, JavaScript Library
• Uploadify – jQuery File Upload Plugin Script
• SWFObject
• jMP3: Sean O’s JavaScript MP3 Player / jQuery plugin
• JSON plugin for jQuery

参考资料

• jQuery中文入门教程
• 如何格式化浮点数计算结果 JavaScript – CSDN社区
• jQuery.sifrSettings
• jQuery性能优化指南 (全部) – 烟雨博客
• 1.3 圆整圆角 – The Gimp – 思魂轩
• Uploadify • View topic – Uploadify doesnt fire uploadifyUpload/uploadifyClearQueue
• IE6下margin双倍问题 – 绯雨的天空
• Making Internet Explorer use PNG Alpha transparency

1
2
3
4
5
6
7
8

function a($t) {
  define('T', $t);
  echo T;
}
 
a('a');
echo T;
a('b');

结果发现，输出的三个字符都是 a，而且没有报错。这说明，无论常数在哪里声明，都是全局有效的，而且定义后不可再被更改了（废话……不然还叫常数）。从定义发生的时机看，确实是第一次调用函数 a() 的时候被定义的，而后再次调用函数 a() 时没有被修改也没有报错。还真是有趣的说~

话说今天发现 PHP 的 link 函数的文档中写着“5.3.0 This function is now available on Windows platforms.”！十分好奇，Windows 下也有文件硬链接？载来 PHP 5.3.0 RC2（又一惊，5.3.0 已经到 RC2 了！）的代码，细细观赏一番，发现在 ext/standard 下有一个文件叫 link_win32.c，打开看到如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

PHP_FUNCTION(link)
{
/* ... 此处省略数行 ... */
#ifndef ZTS
	ret = CreateHardLinkA(topath, frompath, NULL);
#else 
	ret = CreateHardLinkA(dest_p, source_p, NULL);	
#endif	
	if (ret == -1) {
		php_error_docref(NULL TSRMLS_CC, E_WARNING, "%s", strerror(errno));
		RETURN_FALSE;
	}
	RETURN_TRUE;
}

CreateHardLinkA 难道是一个 API 函数？再一查，发现 MSDN 上有文档：CreateHardLink Function (Windows)，上面还写着“Establishes a hard link between an existing file and a new file. This function is only supported on the NTFS file system, and only for files, not directories.”，只有 NTFS 才能用。看来只好认为是学 Linux 的了……竟然支持，真是不可思议，不过 Windows 为什么默认却没有办法在 GUI 中使用这个功能呢？

用 tar jxvf php-5.3.0beta1.tar.bz2 解压了文件，进入文件夹，开始 configure。

刚刚 configure 没一会儿，提示找不到 C 编译器。冷了，连 gcc 什么的都没装。又 apt 了个 gcc 和 g++。再 configure，提示没找到 libxml2。apt 了 libxml2，还是找不到，去网上一查，发现还要 libxml2-dev，又 apt 了下来。

最后终于 configure 过了，开始 make。提示没有 make。其实这早在我的意料之中……apt 了 make 和 automake，开始 make，make 完提示说别忘了 make test，我就 make test……等他 test 完告诉我提交报告，那就提交报告吧……麻烦……提交完我就开始 sudo make install。安装完，试一下 cli 的 php，可以使用了。很兴奋的回到外面在浏览器输入 phpinfo 的页面，结果提示下载……

失败了……在网上又一整查找，看到一篇 Ubuntu 下编译安装 5.2.8 的，里面的编译参数看不懂 _-b 所以我就一个都没敢加……不过我觉得实在费解，为什么要编译安装 5.2.8 呢……5.2.8 似乎没什么新特性，而且 Ubuntu 自带的 PHP 5.2.6 是加了 Suhosin Patch 的，安全！最后找到 PHP 的官方文档才明白，那个 –with-apxs2 是表示 Apache2 的……

用 find |grep ‘apxs’ 发现我饿 apxs2 在 /usr/bin/apxs2，就又重新开始 configure 了。这次 configure 倒也顺利（因为改装的都装好了），本想也顺便 –with-mysql 个，结果发现 mysql 没装……而且装了还是不过，就干脆不要了。

configure 完成后，照例是 make、make test、sudo make install。这或许就像 Windows 里的下一步一样。不过在 Ubuntu 的 apt 下，连这个都省了，我也被惯懒了……

sudo make install 果然出错了，提示 httpd.conf 至少应该有一个 LoadModule。想起上面那篇编译 5.2.8 的里面也写了这些东西，遍在 httpd.conf 里面加入了

1
2

# Dummy LoadModule directive to aid module installations
# LoadModule dummy_module /usr/lib/apache2/modules/mod_dummy.so

竟然真的过了 _-b 电脑还真好骗……

安装完成后，再次重启 apache2，打开浏览器，查看 phpinfo。终于出来了，我的 PHP 5.3！

真是辛苦……本来以为用了这么久 Ubuntu 对 Linux 还算有点了解了，经过这么一折腾，发现自己原来连门都还没入……

好吧，PHP 5.3 的测试就再说吧……今天就这样了……

ujudger 是我准备编写的基于 Linux 的测评程序，采用 GPL 协议。由于一直以来找不到 Linux 下的测评程序，因此准备自己写一个。ujudger 的 u 既是取我网名的第一个字母，也是 ubuntu 的第一个字母，表示这个程序应该会在 ubuntu 下完成编写。而 ujudger-base 是 ujudger 的基础程序，表现 ujudger 的测评核心，即耗时和内存耗用的取得。使用 time 命令和系统监视器监视器的资料对比一下，ujudger-base 获得的信息还是比较体现程序的真实情况的。

ujudger-base 并不复杂，不过也不简单（自少我这么觉得）。在编写的过程中，开始不知道 Linux 下的进程控制，后来知道了 fork() 函数。开始觉得很奇怪，后来也就慢慢明白了。不就是返回两次么，有什么了不起的~然后就是exec族的函数，成功了就不返回了_-b

然后就是等待的办法。网上有些人是直接用 wait4 快速返回来等待，但我觉得这样很影响速度，因此采用了 usleep 等待 100ms（有没有一点像 Cena 的方法？）。

同时，我还查找了有关程序运行数据读取的相关问题，最后采用的是读取 /proc/<pid>/stat 文件的方法。具体采用的一些技术层的资料我准备明天发一篇来讲。

除此之外就是几乎第一次大规模的采用 C++ 的推荐风格编写程序（以前写OI的程序，为了效率不得不放弃许多 C++ 优美的特性），因此有写丑的地方也请多多指教。

里面的注释很多了，由于我的英语水平有限（My English is limited!），如果注释有什么语法错误，也请多多指教！

点击这里下载源代码：ujudger-base-0.1.cpp (3.6 KB)

已经写了一个有一点点功能的版本http://www.fzyz.cn/forum/newwap，但因为写得太乱了，于是重新大改，构成了这个正在做的版本http://www.fzyz.cn/forum/w。

DZ果然是一个逊霸，完全没有为后面开发做考虑…… Doggy 说WP在这点做的很好，不过我没写过WP的插件，不做评论。

题目：20080209.pdf (344.99KB)

解题报告： 20080209_solution.pdf (278.79KB)

测试数据：20080209_data.rar (357.12KB)

推荐时长：3 小时

题目难度：NOIP 级

这个Online Judge我准备做成类似Cena的网页版，准备使用PHP+MySQL+Apache+Windows2K3作为运行环境，AJAX做界面，C++程序做后台测评程序。采取类似USACO的提交立即测评，在线等待结果的测评方式。

现在我正在撰写文档，估计正式编写工作从下一周开始。