有关 JavaScript 的技术文章和行业分析文章。
这两天重拾Phonegap发现一个Bug，用localStorage保存的东西，更新版本或者关掉重进就没了。我的环境是Phonegap 2.6 + Miui V5（Android 4.1）。
我逐个尝试了使用window.localStorage替代localStorage、将调用localStorage的时机改到deviceready后等做法，均无效。Google、StackOverflow，亦没有结果。最后想起来，Phonegap不是开源的嘛，有issue list啊，一看，果然，从2.5开始Android版的localStorage就无法正常持久存储了。这个Bug要到2.7才会修复。
以前还是太低端了，以后还是多逛逛Wiki和issue才是。
正如我在前一篇文章《前端框架点评》中所说，jQuery UI库中最有用的是那几个 xxxable，而不是里面的组件（因为自带样式且较丑）。所以当它们在某些环境下没法正常工作就比较老火了，比如draggable，在iPad之类的移动设备中，就无法使用，因为它没有针对触摸事件进行侦听。
经过Google，发现有人已经解决了这个问题，就是我说的jquery-ui-touch-punch，开源，代码托管在github。直接在html中引用jQuery UI和这个补充包，后者会覆盖前者的实现，帮助它支持触摸拖动。感兴趣的同学可以到这个页面去尝试。感谢它的作者furf。
顺便说下我对开源、免费、盗版的态度。开源和免费都是好东西，影响着改变着我们的世界。但是决定一个作品一段代码一款产品是否开源免费的人，只能是其作者或者其版权拥有者，别人无权“替”他们做出选择。换句话说，我是反盗版的，对于海盗湾也无甚好感，对于那些有意无意忽视盗版危害反而替海盗湾摇旗呐喊的人，很是反感。
现在的版权政策和专利制度，确实在某种程度上阻碍着创新，也给流氓（比如苹果）留下可乘之机。但是在更好的方案出台之前，我们只应该尽力输送好的原创作品给开源社区，而不是盗版他人的东西，再冠以自己“开放、分享”之名。那样太无耻了。
以前没在Android下做过原生HTML开发，所以一直觉得大家的吐槽很莫名其妙——不同于桌面错综复杂的环境，高度统一的webkit内核浏览器能整出什么幺蛾子来？结果这次遇到了，才发现原来早期Android系统的WebView真的很奇葩。
先是有一块文字，可能比较长，我就在作容器的div上写样式为overflow:scroll，以为这样就能用手指触摸滚动了，拿来小米1S一试，通过。结果后来同事找来，说他的手机不行。研究半天，在StackOverflow上看到Android 3.0之后才开始支持触摸滚动，想在2.x系统上实现还得自己写JS实现。一看他的手机，2.3.5。OK，写JS嘛，好说。
事先我已经知道触摸事件的触发机制，所以很自然的就去侦听touchstart，touchend，touchmove。结果，不行，滚不起来。我以为自己记错了，去MDN上查了查，没错；又猜是事件用错了，尝试touchleave和touchcancel，也不行；2.x的系统不能装Chrome，测试也不好搞。后来终于通过输出发现，touchmove只触发一次，然后Google之，原来Android设计的机制就是只触发一次，想要自主控制事件结束的时机只能event.preventDefault()。这……难道touchmove不是对应mousemove么？
只这两点就花了我不少时间，不知道还有没有其它的坑。反正做完这个需求我不禁感慨，早期Android的WebView真的很奇葩啊。
PS：这篇博文应该早于上一篇，换言之就是这个时候我为了在本地调试打开了“Emulate Touch Events”开关的。
如题。代码就是最简单的，一个装满对象的数组根据某个值排序：
sortArray.sort(function (a, b) {
return a[key] - b[key];
});
开始某些对象的值是NaN，我试了下，排序正常，结果稳定，就没再管。
今天突然发现排序失败，没有报错，查了半天不见异常，只好下手排查一切可能因素。第一个就是INFINITE，翻找MDN无果，想办法过滤掉，排序正常。
想来负无穷也会影响，所以先判断除数不能为0 还是很有必要的啊。
做前端的，基本都会用上各种开源的框架、类库。在项目中引用它们，就可能需要把用到的文件纳入版本库，这样每次类库更新，我们也得跟着更新文件，比较麻烦。而且，我们知道，浏览器对同一个域名下的资源同时加载的数量是有限制的，加载页面时光类库的CSS和JS就得搞半天，整体速度也会被拖累。
好在很多仁人志士已经提供免费的CDN分流服务，帮助我们托管类库。我用到的主要有这些：
jQuery流行度毋庸置疑，所以微软和Google都提供了jQuery系列，包括UI和Mobile的CDN，Google的CDN还包括一些其它类库，比如prototype和Mootools等。
微软：http://www.asp.net/ajaxlibrary/cdn.ashx#jQuery_Releases_on_the_CDN_0
Google：https://developers.google.com/speed/libraries/devguide
Bootstrap是由来自twitter的两名“Nerd”工程师创建的前端框架，非常棒，刚好覆盖了网站页面所需，组合使用无往不利。BootstrapCDN为我们提供了相应的服务：
cdnjs.com 这种业界良心提供了最丰富的CDN资源，还包括了每种类库的官网或者其在github上的链接（好吧，很多时候他们就是一回事儿），我觉得甚至可以把这个站点当成学习的出发点。肉大师项目中用到的Underscore和Backbone就取自这里，感谢他们。
值得一提的是他们的域名也很好记~
JavaScript界关于是否应该加分号的争论由来已久。在我看来，这就跟《格利佛游记》中“大头党”、“小头党”一样，纯粹蛋疼，一群衣食无忧的达人，领着一群不明所以的小白战来战去。
吐槽时间结束。我本来对于分号不是很在意，一般每行都加，函数和条件后面不加。后来学会了“模块化”的写法——即每个逻辑用一个立即执行函数——(function () { // 逻辑主体 })()包裹，就开始混用。一直没遇到什么问题，直到今天是 Ant + Closure Compiler 编译部署肉大师，莫名其妙的挂掉了。排查半天发现是分号的问题。
原来的代码可能是这个样子：
// 模块1
// 前面有若干代码
var Manager = {
prop: '',
method: function () {
}
}
// 模块2，开头是个立即执行函数
(function () {
// 代码
})()<
经过压缩后变成这个样子：
// }}(function 那里，会被当成一个函数来执行，于是整体的解析就会出错了
var Manager = {prop: '',method: function () { // code }}(function () {// 代码})()
这时只要给每个文件的末尾加上分号，就解决了。还有种做法，就是在开头加上分号，很多开源代码也是这样做的：
;(function () {
// code
})()
如此，便给JavaScript代码写分号添了一个理由。
被报告了一个很诡异的Bug，在且只在三星Nexus S上出现，系统版本4.0.4和4.1.1都有：
一次点击，会触发两次点击事件。两次事件的 target 和 currentTarget 都相同。
因为只在三星Nexus S上出现，调试相当困难，反复无果。后来想起来我用zepto类库作为底层库，而且编译时把touch部分也编译进去了，所以尝试着将 click 替换为 tap ，居然解决了……
具体问题症结，以后再研究吧。
知道node.js这个东西后，一直想尝鲜。今天终于下手，先要安装环境，看了好多教程，没看太明白，似乎很难的样子。
最后按照官方文档自己尝试了才知道，原来现在安装node.js已经完全自动化了。我用的是Ubuntu 10.4，先更新一下源：
sudo apt-get update sudo apt-get upgrade
然后安装GNU make和git，接着clone代码，最后make就ok了。
sudo apt-get install gcc sudo apt-get install git-core git clone git://github.com/joyent/node.git cd node ./configure make make install
make的过程比较久，让它慢慢跑就是了，完成后，就可以在命令行里测试了。现在node.js已经是0.9.3-pre版了，看到版本号很高，心里很高兴呀～
node -v // v0.9.3-pre
node
> console.log('hello, world') // hello, world
今天先到这里，将来哪天开新项目的时候用node.js做后端吧。
这个，咱们必须承认版本管理不是万能的，尤其对于像我这样习惯不好的人来说，更是如此。比如，上次不知道改了什么东西，导致肉大师制作的杂志在 iOS 里突然就变卡了，而且不仅卡，还伴随黑块、切换图片的最后会闪一下。
开始我一直以为是性能问题，调啊调啊调啊，就是不见好。于是 Google “ios phonegap 闪烁”，然后发现一篇文章，内容是解决 iOS 下 Safari 渲染 Transition 时页面闪动的问题。说只要加一句 -webkit-backface-visibility: hidden; 就行，这样可以避免元素转换时显示元素背面。虽然听起来莫名其妙，不过我觉得有戏，但是文章里没有提应该加在哪儿，所以我想了想，在样式表里加了一句：
#container {
-webkit-backface-visibility: hidden;
}
因为我用到 iScroll，而负责动画的CSS是加在 #container 上，所以我就理所当然的把这段代码加在这里。测试，没有效果。
于是我一发狠，把这段样式加在所有元素上，居然问题就解决了。
#viewport * {
-webkit-backface-visibility: hidden;
}