2009 年于我是重要的一年，从一年前的明天开始就是这样。保送考试，1月2日-1月3日，同济，浙大。其实对于我来说，这两个考不考的上，也都是无所谓的，因为厦大那边是没什么问题的了，按照彬哥哥的说法就是，我们有大学上了。至于浙大，其实本来就不抱什么很大的希望的，因为录取太少了。09的上半年，大约也就忙那么一两天了，反正有大学上了，高考我是肯定不屈的，去了大抵也好不了，至少以我的语文成绩来说是这样。保送这件事情，说起来我是有些后悔的，第一个后悔的便是没有去报交大，因为据说今年由于与北清时间冲了，报的人少，录取率很高；而第二个，便是放弃了厦大。待在福建气候好，有神灵庇护，而且某位同学去了厦大……（要淡定……）不过既然来到了同济，就不想那么多了，毕竟没去高考总是万幸的。

如围观社物语所说，一中着实是一个人间天堂，如果不用上课，不用参加各种考试，还能天天泡图书馆或机房，那就更是这样了。那些惬意日子的伊始，是在机房里度过的。其实我也不大清楚当时在做些什么，大抵写写网页，做点程序什么的吧。尔后，在教师的电子备课室里有了一席之地。再后来，看到其他保送生都开始为大学的学习做起了准备，弄得我都不好意思地也开始先学些东西……在那段时间里，每天在一起的，便是图书馆党的众位。有这么些有趣的孩子们在一起，必然比一个人宅在家里要更好的多了。那些日子的作息时间也从每天6点半准时起床到睡到7点多8点，午饭永远在放学前5分钟在食堂解决。吃完饭回机房的路上，便会逆着人流走，不时地遇到几个熟识的同学，对我表示出轻微的不满和羡慕之情。保送生绝对是不能回到班上去的，这是我们达成的一致共识，回去会被diao翻的……不过我倒是每次体育课都去上，因为每天宅着也不好，偶尔运动运动，顺便见见班上久违的同学们~记得有一段时间我还每天下去一起做广播操来着~幸福的时光~

还有那时想筹备的计算机社，也就是如今的 SCAN 社，在不知道费了多少功夫之后终于弄成了，可那时我也要走了……

随着高考的临近，惬意的日子也总是会有一些变化的。虽然我们不需要参加高考，但并不代表我们不忙，只不过没什么压力罢了。各种神奇的活，如各种盖章、搬运或者值班、买票等等等等。那时候的图书馆党在一起干活，有说有笑的，欢乐呀~

记得高考前的那天，我回家了，理由是三年前黄群大牛给的：如果别人早上起来都去高考了，看你一个人还在那里睡觉，心里会怎么想。接着，在高考最后一科的那天下午再次回到了学校，又是各种忙碌，以及，毕业典礼。虽然出了各种情况，但或许总体上还是不错的，倒是很欣慰……记得毕业典礼上校长为每个人发毕业证书时，看到我，很高兴地和我握了握手。我接过毕业证书的照片在一中的新闻里还可以找到囧……那个新闻和照片是森辰弄的吧，太猥琐了！

六月，这个月，高考的结束伴随着和一中和高考有关的大悲大喜。先是高分段的缺失，后又得知本一率和平均分的惊人。

接下去的七月和八月永远是最模糊的月份，日子长得总感觉到不了尽头，各种宅和各种聚会混杂其中。但今年的八月却有了一丝新意——美国。7月的最后一天离开中国，在美国待了20天上下，踏遍了美国东西海岸，第一次出国去见了见世面，也算是一个突破吧。在美国的见闻前面写过东西了，这里就不再详述了。不过在那里我却有一件事还记得很清楚，一个热心的美国人告诉我（用英文），他18岁那年一个人出去旅游，没有和妈妈一起，然后走到哪里都有人帮助他，所以让我不要怕。我觉得他说的很对，没什么好怕的，这世上总归好人要多于坏人的嘛。

九月就是来到同济的日子了。同济，我觉得是在不太大，跟一中比起来。大学的生活一点也没有想象中的轻松，不小心加入了学生会，又在半期考前终于完成了一中音乐征集的推荐平台，然后半期考英语挂了，高数堪忧，这让我顿感压力很大……又看到部门中有如王佳晟、王一行等众牛人，突然觉得自己就是个垃圾……

大学的时光更是混沌不清的，于是我也不知道做了些什么。然后日子就一下子没了，到了现在。

胡乱写了些无聊的东西，谨以此来纪念即将逝去的2009……

最后，祝大家新年快乐，考试顺利~新的一年，加油！

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

客户端部分

很早就听说了 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

因为我是在上面管音乐什么的，典礼几乎没有看，所以也什么感觉都没有，直到那个时候，通知我准备去领毕业证书的时候……排队在走廊里等候，突然才对毕业有了感觉，感觉怎么这样就要毕业了……拿证书的时候，校长看到我，很高兴地伸出手和我握了个手，说“你好”，然后把毕业证书交到我手上，我轻轻说了声谢谢……突然觉得好不舍，就这样毕业了，可我还不想走……

典礼结束后，因为找不到成林小朋友，森辰要我带我初中的班主任逛，所以也又没有拍什么照片留恋……

有人说，没有高考，我的高中生活是不完整的。我觉得，连我的毕业都是不完整的……

毕业了，不知道应该高兴呢，还是应该悲伤呢……