鬼の领地 » Javascript

一中2009音乐征集系统推荐平台

upsuper — Sat, 31 Oct 2009 06:47:19 +0000

经过约两周的努力编写和调试，终于在昨天晚上完成了。因为做这个网站的缘故，再次新学习了大量东西，比如 jQuery，以及 Linux 下 Photoshop 的替代品 GIMP 等。同时也权当是一次练手，毕竟很久没写这种东西了。不过这次又一次与 IE 的 bug 及非标准化进行了顽强的斗争……

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

客户端部分

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

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

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

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 中则总是返回你实际设置时使用的格式。针对这个问题，我写了下面代码来解决（毋庸置疑，这又是抄的）：

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 的居家旅行杀人放火必备算法。事实证明，这一算法其实是很有效的~

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];
}

搜索算法：

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 就知道了……

使用部件

参考资料

对字符串加长和数组合并的效率比较

upsuper — Fri, 13 Feb 2009 04:59:02 +0000

对于字符串累加的处理，在 PHP 或 JavaScript 中似乎都可以通过类似 += (.= for PHP) 的方式实现，但有不少人抱怨道，这种方式效率很低。事实上，在我还在用 VB 的时候我就注意到这样的效率很低，当时的效率低是因为累加需要反复申请内存，而解决方法也很简单，就是用 Space$ 命令事先申请内存，然后用 Mid$ 来修改，这样效率大大提高！

然而在这里就不一样了，PHP 和 JavaScript 的内存机制我不是非常了解，同时我们似乎也不再使用预申请的方法来加速了（似乎也比较困难……），而是直接用上了 += 这样的符号。

下面就是问题了：这样的效率低吗？

很多人（包括我自己最初）根据自己的想象，认为使用添加数组内容，最后合并数组为字符串，这样效率比简单的 += 要快，但我经过反复实验认为并不是这样的。首先是 JavaScript，我使用的测试代码如下：

function getTime() {
	return (new Date()).getTime();
}
function testit() {
	for (i = 0; i < 10; ++i) {
		st = getTime();
		t = '';
		for (j = 0; j < 100000; ++j) {
			t += 'test';
		}
		et = getTime();
		document.write(et - st);
		document.write('\t');
 
		st = getTime();
		a = [];
		for (j = 0; j < 100000; ++j) {
			a.push('test');
		}
		t = a.join();
		et = getTime();
		document.write(et - st);
		document.write('\n');
	}
}

以下是我在 Firefox 3.0.6 下执行的结果：

可以看出，+= 的效率并不比数组合并低，甚至略快于数组合并。

下面我们看看 PHP 呢？

下面是测试用 PHP 代码：

for ($i = 0; $i < 10; ++$i) {
	$st = microtime(true);
	$str = '';
	for ($j = 0; $j < 10000; ++$j) {
		$str .= 'test';
	}
	$et = microtime(true);
	printf("%.7F\t", $et - $st);
 
	$st = microtime(true);
	$arr = array();
	for ($j = 0; $j < 10000; ++$j) {
		$arr[] = 'test';
	}
	$str = implode($arr);
	$et = microtime(true);
	printf("%.7F\n", $et - $st);
}

结果则如下：

0.0039599	0.0461071
0.0070710	0.0408709
0.0052779	0.0322330
0.0061541	0.0294971
0.0051920	0.0230181
0.0039949	0.0204601
0.0038750	0.0246589
0.0043111	0.0245950
0.0047810	0.0232542
0.0038841	0.0230379

可以看出，数组合并的效率远低于字符串直接叠加！

上一次用 spidermonkey-bin 中的 js 命令做了一下实验，结果在这种条件下，字符串叠加的效率也是远优于数组合并，而不像在 Firefox 中这样。

我对于这些脚本语言对字符串和数组的具体实现机理不是很清楚，但可以肯定的是，个个常用的脚本引擎都对字符串处理做了许多优化，我猜测（因为 Ubuntu 下暂时没有 stable 的 Chrome）Chrome 的 V8 引擎中，字符串直接叠加的效率将继续远超数组。因此，我们不应该想当然地认为某某方式效率高，而应该用测试结果说话……

Linux 没有不能运行的脚本

upsuper — Fri, 06 Feb 2009 14:21:20 +0000

很早以前，我就知道，在 Windows 里面我们可以直接运行非二进制文件的 bat/cmd 命令行文件，还有那个 vbs 脚本文件。

到了 Linux，我发现，在这里，每一样都比 Windows 里面先进……虽然不能运行 vbs 或 bat/cmd，但这里有 bash、python、perl、ruby……
好吧，我承认还是有脚本不行的，但 Linux 下即使 bash 都比 vbs 强大……

后来知道了 php 也可以……php-cli 模式可以在 Linux 下直接执行 php 脚本。

今天又知道了……原来 JavaScript 脚本也可以直接执行。先是把一个 JavaScript 脚本设置为可执行，但是没法运行。然后到 bash 中找什么命令能执行 JavaScript……我试了一下 javascript 命令，没有，又试了下 js，bash 提示我，在 spidermonkey-bin 包中包含这个命令。联想到刚刚看过一个资料说到 Spidermonkey 是 Firefox 的脚本解析器，我就用 apt 安装了个（今天新加的网易源实在太快了！）

随后，修改了一下脚本，大约是这个样子的：

1 2	#!/usr/bin/js print("Hello world!");

执行，在 bash 中输出了 Hello world! 太高兴了！

Linux 下真是没有不能执行的脚本，Windows 永远也比不上……
我就不理解了，这么先进的 Linux 怎么就没什么人用呢？多少功能比 Windows 方便……

修改 ASCIIMathML.js 适应 Discuz! 6.0

upsuper — Sun, 31 Aug 2008 03:17:00 +0000

前几天，一位大牛 (Mathself) 提议给论坛安装上一个数学插件，并且告诉我参看奥数之家论坛。我经过研究发现，就是一个叫做 ASCIIMathML.js 的文件在起作用，这个文件将类 LaTeX 的公式转换为 MathML。Firefox 提供原声的 MathML 支持，而 IE8 以下的版本需要 MathPlayer 插件支持，Opera 自 9.5 起提供原生的 MathML 支持。

经过研究，首先发现，ASCIIMathML.js 默认不提供 Opera 的支持，对 ASCIIMathML.js先做了点小修改：

function AMisMathMLavailable() {
  if (navigator.appName.slice(0,8)=="Netscape") 
    if (navigator.appVersion.slice(0,1)>="5") return null;
    else return AMnoMathMLNote();
  else if (window.opera)
    return null;
  else if (navigator.appName.slice(0,9)=="Microsoft")
    try {
        var ActiveX = new ActiveXObject("MathPlayer.Factory.1");
        return null;
    } catch (e) {
        return AMnoMathMLNote();
    }
  else return AMnoMathMLNote();
}

不过话说 Opera 对 MathML 的支持实在有限……感觉看起来很囧的说……

把这个弄到服务器以后，我就钻空子注册了一个带公式的用户名。结果 Doggy 瞬间出台规定禁止……我说还不如从代码上禁用……又经过一番研究，发觉只要改 ASCIIMathML.js 的代码就可以了，下面是研究成果：首先是修改 onLoad 直接调用的 generic：

function generic()
{
  translate(true);
};

那个 true 表示仅转换需要的地方。

然后是修改处理的地方：

function AMprocessNode(n, linebreaks, spanclassAM) {
  var frag,st;
  if (spanclassAM!=null) {
    frag = document.getElementsByTagName("div")
    for (var i=0;i<frag.length;i++)
      if (frag[i].className == "t_msgfont")
        AMprocessNodeR(frag[i],linebreaks);
  } else {
    try {
      st = n.innerHTML;
    } catch(err) {}
    if (st==null || 
        st.indexOf(AMdelimiter1)!=-1 || st.indexOf(AMdelimiter2)!=-1) 
      AMprocessNodeR(n,linebreaks);
  }
  if (isIE) { //needed to match size and font of formula to surrounding text
    frag = document.getElementsByTagName('math');
    for (var i=0;i<frag.length;i++) frag[i].update()
  }
}

为什么这样改呢……因为在 Discuz! 里面帖子内容都是在 div 标签里……而且这些标签有一个共同特征，那就是有 t_msgfont 这个 class！于是这样改完，就可以仅仅在帖子内容中使用 MathML 了！

我是根据很早以前的 1.4.7 版本改的……虽然据说有很新的版本……2.x 什么的……不想管了……
如果不想自己改的话，直接从这里下载改好的文件：ASCIIMathML.js。

the Ship of Culture, we are ready!

upsuper — Sat, 24 May 2008 15:36:09 +0000

今天基本完成了我网页制作的任务，其他人的幻灯片和书应该也基本完成了。刚刚把那个上传的上面：http://mondialogo.upsuper.org/。

最早是Neipoor初稿设计的，后来为了体现交流，对其设计做了些许修改，就成了现在的样子。主要修改在几个地方：一是宽度由原来的1024减为980；然后是在那边加了两国国旗；还有就是给那三行字加了我很喜欢的投影效果~另外就是加了很美的鼠标放到链接上时会有发亮的效果，不过IE不支持（使用IE7测试），我的Firefox和Opera都支持。据说支持没有href属性的标签使用hover伪类是CSS2的特性，所以IE不能完全支持……另外就是加了下面的footer，是我后来使用Neipoor留下的素材独立制作的，个人觉得效果蛮赞的说。

这次里面的导航栏完全没有使用A标签或者MAP标签，而是用了新的方式——DIV+Javascript。我个人觉得这种很大的好处是链接放置的位置相当自由，而且很符合我要在背景图上放链接的要求。这次的排版是靠TABLE排的，不过可以几乎认为是absoluted的DIV。个人觉得这次做的不错~