PageTalks

A Truth about Mobile App Dev

Robin — Sat, 21 Aug 2010 09:20:52 +0000

最近要做一个产品的DEMO，身为前端开发的我干起了Android开发。之前在iphone上写过一些WebApp，所以任务下来的时候没有任何迟疑，心想做手机的应用应该都差不多吧⋯⋯

开发Android要有耐心⋯⋯

我从下载Android的Eclipse插件的那一刻我就后悔了⋯⋯由于考虑到可能要改变设备，我就义无反顾的选择了PhoneGap。看到版本是0.9，我心就凉了一截，但是实在无奈，因为这个产品的Prototype很有可能马上转向iPhone上，到时候重写代码那就悲剧了。

这个完全继承了Eclipse插件的特点：莫名其妙的这么多安装选项、复杂的安装顺序——Dependency和Version的问题安装程序你不能自己判断么？好吧，这个不怪Google了。

经过了漫长的Download，终于进入了Eclipse ADT环境。话说有个AVD管理程序，可以添加虚拟设备。好吧，就是模拟器吧⋯⋯神啊，Android原来有这么多个版本，还有这么多选项。

启动试试，我在工作站上竟然等了快1分钟，这个模拟器连真机的启动速度都模拟了，NB！

对比一下iPhone官方的模拟器的选项和那瞬间启动速度⋯⋯

之后写了个HelloWorld，进行了一下调试，找了台Xperia 10i来做了下真机调试。由于以前写Java的时候用Eclipse，所以调试和发布阶段我都还算熟悉⋯⋯

Windows is a hell for developers!

假定你熟悉Eclipse，如果你第一次接触Android，完成“之后写了个HelloWorld，进行了一下调试，找了台Xperia 10i来做了下真机调试。”这句话的内容也是个巨大的困难。在Mac下完成你可能需要1个小时，而在Windows上你很可能需要一天——我如同找虐一般在Windows和Mac两个环境下完成了PhoneGap的HelloWorld，得出了这个结论。

PhoneGap需要Ruby、ApacheAnt、JDK、Android SDK。除了最后一个，前三个Mac自带⋯⋯汗，就算没有也可以用无敌的port命令在线安装。

Github？！好吧，Windows的Github也有，就是蹩脚一些，没办法，要不然你没办法clone别人的代码啊。

而Windows就悲剧了。Ruby的安装就会难死一排人，假设你幸运的发现有个Ruby Installer可以减轻你的痛苦。接下来的PATH配置依旧会让你疯狂。

我发誓我诸如ANT_HOME, JAVA_HOME, ANDROID_HOME全部配置正确，PATH变量下面也是对的。但是运行那个初始化工程的ruby脚本就是报错。在经过排列组合PATH的内容后，问题莫名奇妙的解决了⋯⋯

而iPhone的开发呢？安装一个XCode就完事了，整个生命周期都是在Xcode里面跑的⋯⋯潇洒的iPhone开发者们，我羡慕你们啊～

Google想干嘛？

我这次是用PhoneGap开发的Android程序，没有碰任何java代码。其实Apple Dashcode本身就支持这样的开发，只是Mobile Safari缺乏对手机硬件层的访问。PhoneGap在iPhone上就是套了这样一个支持硬件访问的外壳。

而Android上，如此复杂的开发模式如果不用PhoneGap，对开发者的要求就非常高。

个人认为手机平台是一个将设计师和程序员的界限模糊的地方。而Google Android平台有浓重的程序开发成分，根本就是将那些想尝试开发手机应用的设计师完全挡在门外。

转眼看iPhone，程序员可以用Cocoa(Cocoa和java在移动平台GUI开发就根本没有可比性，java被秒杀)写强大的iPhone应用；不喜欢用Cocoa的开发者可以选择用Dashcode或其他编辑器写HTML5的WebApp，一样可以部署在iPhone上面。套一层PhoneGap就可以达到和Cocoa程序类似的级别。

最大的有点是，XCode和Dashcode都比Eclipse好用N倍——没有令人迷惑的安装、插件以及快速的模拟器，有的只有给程序员的高效、易用的界面。

从开发者的软件来看，Google就传达了一个差劲的用户体验标准。用这么稀烂的工具还指望能做出比iPhone上的应用更好的程序么？

另一方面，在Windows上做Mobile开发（可能对所有开发都是这样？）就是一个灾难，果断放弃Windows，选择Mac或者Linux吧！

HTML5 and CSS3 Must-have Online Resources

Robin — Sat, 07 Aug 2010 11:50:29 +0000

好吧～到了掏家底的时候了。最近看了很多相关资料，所以还是有很多可以说的。相信大家在消化这些资料之后，应该会对HTML5和CSS3有较为深入的了解。

Well, It’s time for me to share something about HTML5 and CSS3. We’ve discussed too much about them and it’s necessary to really dive into these techs……

Future Trends

Tutorials for Novices

Important Documentations

Live Demos

Compatibility

Open Source Projects

HTML5 Canvas for Internet Explorer
Modernizer.js
CAKE – Canvas Animation Kit Experiment
Gordon – An open source Flash™ runtime written in pure JavaScript with SVG
Smokescreen – convert flash to HTML5/Javascript
Raphaël: Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web
Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets.
Cappuccino is an open source framework that makes it easy to build desktop-caliber applications that run in a web browser.

Online Tools

JS Bin – an online sandbox for js
CSS3 Generator
CSS3, Please!
Adobe BrowserLab
Linear Gradients-Css3 Demo
Box Shadow – Css3 Demo
transform and transform-origin Css3 Demo
border-radius Css3 Demo
Transform Matrix – Css3 Demo
MockFlow

列了这么多文章，其实大家看完会发现，有些东西经过多个人的理解、诠释后会变为，所以，还不如直接去看看源头——W3C的文档。如果你看别人的教程真的看不懂了，直接去看官方文档吧！

So many articles? You will steadily find it clear that docs on w3c will be most of use. Therefore, if you feel puzzled by these articles, just dig into docs from w3c!

Samsung telephone suijo bus schedule * Bicycle speedometer odometer george post

Revelation of HTML5, CSS3 and more…

Robin — Sat, 07 Aug 2010 10:38:49 +0000

就在我还在写这篇文章的时候，HTML5的标准还在不断完善。当然，开发者已经习惯W3C和其他“砖家”组织慢慢吞吞的编写，再加上W3C和WHATWG的恩怨，“~~2020~~2022年才会成为Proposed Recommendation”实在是意料之中的事情。

但是看看现实状况，你会非常有喜感，Safari 5、FF3、Chrome 5都已经支持了60％以上的HTML5功能，甚至连IE9 Preview3里面都有好多新功能的支持。

我们何去何从？

完全放弃之前的HTML是不可能的，广大的IE用户群会让你发疯。但这本身就是一种博弈，你如果继续将IE，尤其是IE6作为你的WebApp的主要客户端，那么你就在助长IE6，到头来让开发者更痛苦。

Yahoo所提倡的Progressive Enhancement和Graceful Degradation是两个美好的准则，面对于日益扩张的产品线、快速的产品更新速度，让你觉得多花一行代码给那些垃圾浏览器做功能支持都觉得蛋疼——有时候你甚至连SWFObject都不想用。

当然，我们不能继续停留在抱怨诸如IE之类（也就只有IE）这种垃圾浏览器的怪圈之中。

现在，已经有开发者拥有足够勇气去放弃IE6的支持了。包括google在内的一线厂商，实际上已经再为高级浏览器和IE6单独开发不同的版本的应用。也就是说，如果用户使用老掉牙的IE6进行浏览，他会看到一个催促他们换浏览器的对话框，以及一个Web 1.0的传统应用程序（没有ajax、没有canvas、没有offline功能）。

好吧，在做出这个决定的时候，你可能要说服你的主管去做用户调研以及SWOT分析。

我们不得不承认，我们自己和那些使用高级浏览器的用户没有理由去忍受因为某些弱智浏览器而削弱的用户体验。用户喜欢圆角边框、界面动画、离线存储和更智能的表单等等。

好吧。那些高级浏览器就很好么？其实，大家又回到了上次浏览器大战。Netscape和IE不断的添加自己的私有属性和方法，这就是这次我们遇到的。

诸如”-webkit-”、”-moz-”之类的前缀根本就无法通过W3C的验证，而你也无法保证这些私有的CSS属性的效果是一致的。也许大家写一个CSS3的旋转就得这个样子：

.box_rotate {
     -moz-transform: rotate(7.5deg);  /* FF3.5+
       -o-transform: rotate(7.5deg);  /* Opera 10.5
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome
             filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
                     M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104); /* IE6,IE7
         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
                     M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104)"; /* IE8
               zoom: 1;
}

实在是太华丽了，这一条CSS规则就可以增大3到4倍，乐观估计整个CSS文档会因为兼容性需求增大2倍吧？

那JS方面呢？webkitTransitionEnd、webkitAnimationEnd⋯⋯乖乖，你这兼容性到底怎么做？

门户站点的前端工程师会哭的，所以HTML5的使用真的是要深思熟虑，考虑到自己的目标浏览器。

总是有人诟骂Adobe Flash是个私有技术，不如HTML5通用，就目前这种状况，现实版的HTML5就是每个浏览器厂商的“私有技术”。每个公司都维护这一套自己的命名规则，自己的文档⋯⋯原来W3C所提倡的“共产主义”就和XX一样⋯⋯

那HTML5真的是爷爷不疼奶奶不爱么？

面向广大的PC端，HTML5的应用需要大量的兼容性代码，甚至考虑到制作IE的降级版本，这个成本，对于小巧型的APP完全ok，做Gmail级别的？还是别找刺激了。

个人认为手机市场才是HTML5的天下。本身手机市场里，系统软件和手机本身都有开发商控制。iPhone下跑Safari的人绝对是占大多数，如果做iPhone4的webapp，完全有可能按照Apple的那些私有版本的HTML5写程序。基本上，满足了webkit引擎，大部分的智能机你都可以搞定了。

再加上还有个WebOS的概念在，可以期待HTML5在移动平台上会先火起来！

另一个HTML5的栖息地，可能是各大厂商的研发中心里。HTML5给了广大开发者另一个快速原型工具。以往，一个设计流程走下来，最终不管你愿意与否，你只能用Flash去实现那些复杂的动画和应用程序逻辑，但是我们现在有Flash。

CSS3的Animation和Transition，HTML5的Canvas足以满足大部门DEMO的要求了吧？

虽然这样，HTML5和CSS3已经“沦为”一个RPD工具了，但是它仍旧证明了其价值所在。

在那些CEO眼里，HTML5也将成为遏制Adobe Flash扩张的法宝。微软的Silverlight如此疲软，Apple也是希望能够将效率地下的Flash敢出移动平台⋯⋯

好吧，让我们拭目以待。我们能做的，可能只有把HTML5和Flash全部学一遍吧⋯⋯泪⋯⋯

When can I use HTML5 & CSS3?

Robin — Tue, 08 Jun 2010 06:28:08 +0000

As web designers we want to know when we can start to roll out HTML5 and CSS3 functionality on our client’s sites and we want to share that knowledge. So last Autumn we built findmebyip.com; a free testing tool that sends you a live, detailed report of what your client’s browser supports.

HTML5和CSS3的功能已经让许多前端工程师垂涎三尺，可显示总是残酷的。与MS奋斗了这么多年，我们还是无法为仍然广泛使用的IE6做出任何改进（似乎，IE6不死，前端就无法进步啊！）；而最新的IE9对标准的支持也是微乎其微。
本文分析了HTML5和CSS3的现状，以便大家在实际工作中量而为。

FAQs in Interviews of Front-end Engineers

Robin — Thu, 20 May 2010 13:40:09 +0000

今年准备去公司混下经验，投了一些简历，经历了N多的电话面试，有必要在这里整理一下，也和大家分享一下。因为，前端的面试经验似乎很少见吧？
面试一般有两部分，技术面试和HR面试。基本技术官经过2～4轮（这个数字因情况而定）后，会安排HR面试，如果你接到了HR的面试，基本上也就可以确定企业对你的技术还是比较满意了，要考察你的RP了，呵呵。

HR的面试很简单。你的个人素质，例如以前的团队领导经验（要求描述一个详细的团队活动以及你在其中的角色）、人文素养（最近读什么书，平常有什么爱好）；工资岗位相关，例如你现在在哪个城市、期望的待遇等等。一般来说，只要不是太宅的，都应该能过去的。

这里我详细说说技术面试里的高频问题。感觉还是蛮有趣的问题的。

DTD的作用

DTD 规定了使用通用标记语言(SGML)的网页的语法。
诸如 HTML 这样的通用标记语言应该使用 DTD 来规定应用于某种特定文档中的标签的规则，这些规则包括一系列的元素和实体的声明。
在通用标记语言(SGML)的文档类型声明或 DTD 中，XHTML 被详细地进行了描述。
XHTML DTD 使用精确的可被计算机读取的语言来描述合法的 XHTML 标记的语法和句法。XHTML DTD、Recommended Doctype Declarations to use in your Web document

XHTML和HTML区别

HTML 可以认为是 XML 版本的 HTML，为符合 XML 要求，XHTML 语法上要求更严谨些。
以下是 XHTML 相对 HTML 的几大区别：

XHTML 要求正确嵌套
XHTML 所有元素必须关闭
XHTML 区分大小写
XHTML 属性值要用双引号
XHTML 用 id 属性代替 name 属性
XHTML 特殊字符的处理

常用的开发流程（工具、方法）

涉及到很多知识了。SVN和常用IDE的使用。其中Apatana等工具是重点。常用的调试工具：FF的Firebug、Opera的DragonFly、Safari的开发者工具、IE的开发工具条、Companion.JS、Debugbar甚至是Visual Studio。一些系统开发的瀑布流程。Js里面比较重要的组件式开发等等。

Javascript优化

这个也很多了，这里说一点细节。例如，遍历数组前先取出数组length、禁用eval、禁用with、一个函数体内一次变量申明、尽量使用原生方法等等

CSS基本布局实现思想

这个肯定重要了，两栏、三栏的布局，流动和固定的。并且还要懂得不同的实现方法，很复杂也很枯燥。还好很多人已经总结过一些Css Layout

一些浏览器兼容性问题：hasLayout相关，IE怪癖、box model

你必须要读的文章：On having layout、Quirks mode and strict mode、CSS权威指南里面对于Box model的讲解、JS权威指南讲浏览器环境的那部分，特别是事件处理和ajax开发

基本脚本库：jQuery、YUI

熟悉jquery的api，了解基本用法，知道如何创作插件。能了解并学会符合使用yui3更好。整体来说，在面试环节没有强制要求你掌握某一个库

网站前端优化（YSlow的一些指标）

这个下个YSlow看看就知道。也可以参考《High Performance Web Sites》这本书

HTML5的特点

这个真的没辙，现在市面上书籍很少，中文资料更少。大多数人也没有勇气去阅读w3c的标准文档的。多看看老外的博客吧，当问到这个问题的时候你要清楚那个面试官其实也不太清楚的。主要了解DOM Storage、新的文档遍历API、doctype声明等等

如何解决ajax夸域问题

这个思路很多的，jsonp、服务器代理、iframe等等

内存泄露问题

读这篇文章就够了JavaScript 中的内存泄露模式，其实问题主要出在IE。如何测试呢？请查阅javascript 内存泄露工具使用

事件代理

这个名词当时把我忽悠了。简单的说就是利用事件冒泡把实际处理逻辑委托到一个对象上统一处理。往往是比较上层的对象，比如body节点。这个平常大家都在用，不过这个词不一定熟悉。

From Java to JS, and Thinking in Modern Langs

Robin — Thu, 13 May 2010 07:28:33 +0000

有人看着标题可能就要发笑，两个完全不同的东西干嘛来放在一起比较呢？的确，本质上，Javascript（后文统称“JS”）是一种浏览器中的脚本语言，Java是更为强大的解释型语言。后者需要预先编译，并在自己的容器（JVM）中运行。但是仔细品味，其实两门语言的核心特性上，有太多的相似之处，不禁引人深思。借以本文，希望能给身处不同阵营的成序言一些关于语言融汇贯通的启发。

前世今天

曾几何时，JS还没有多大名气的时候，Java已经非常流行了。那个时候JS的名字乱七八糟，而且每个厂商也有自己的标准。Netscape的LiveScript，MS的JScript，总之这种目前最为流行的浏览器脚本语言，在当初连个确定的名字都没有。之后，随着标准的推出，大家习惯称为Javascript。Netscape也是为了借用Java的名气，推广自己的Javascript，才取名“Java”Script的。

其实在几年前，Java也被运行在客户端的，大家都知道的Applet技术不就是为了客户端编程的嵌入式小程序么？可是Applet并没有火，反而这种轻量、快速的JS流行起来，一发不可收拾。虽然，Java的性能和功能都比JS强大不止一点点，JS着实是把Java赶出了浏览器，而Java则是在服务器端站稳了脚跟。

尽管近年来，Java Web Start、Java FX的兴起意味着在RIA的风潮下，Java还是想重回浏览器市场，但此时的浏览器客户端内，JS已经不是那个之前连名字都不确定的脚本语言了，众多的框架和调试工具已经可以让人们意识到它就是浏览器端编程的成熟标准了。

这样，不管是Applet还是Web Start，都已经成为了类似Adobe Flex、Adobe Air的一种针对某些特定情景的选择了。当然，业界普遍认为这些技术的前景是无限光明的。另一方面，HTML5和ECMAScript v5的推出将继续延续这种传统HTML＋CSS＋JS的RIA解决方案。

数据类型

JS的基础数据：Number、Boolean、null、undefined
Java的基础数据：int、byte、short、long、char、float、double、boolean
JS中的Number实际是Java中的double，这意味着不管数字有多大，有多少精度，都被当作double。

JS中没有char，也没有String？JS中没有char（JS内部的每个字符是16位的），但是有String。但JS的String，即不算作基础类型，也不能算作引用类型。JS中的String是immutable的，即不可改变。虽然可以可以通过拼接和String的相关函数进行操作，但实际上是返回一个新的结果字符串。

讲到这里，java程序员就疯掉了。为什么JS会有这么“粗糙”的类型系统？
因为，JS是“若类型”（loose typing）。JS首先是有类型（typing）的，可是它不去检查，声明的时候也只是用var，不管你后面想申明一个Number，还是Boolean。
那不是很容易出错？JS的若类型允许你把这个变量存放任何类型的东西，也就不存在出错了。

Java的严格类型是为了编译前检查，可JS没有编译这个步骤，自然严格类型对JS来说也就失去了很大一部分作用。

换个角度来看，这种弱类型是不是很轻巧呢？是的！事实上，这种轻巧的类型系统再加上各种各样的字面量，就催生了伟大的JSON。

迷惑的对象系统

面向对象几乎被看作当代语言的一个特性。JS显然是基于对象的，但却不能说是面向对象的。因为它没有传统的基于继承树的继承系统，也就没有所谓的父类和子类。众多宣称是“面向对象”的编程语言，严格上来说，只能算作“基于对象”。但JS有自己的继承方式，就是原型继承。

使用到了对象的prototype属性。这个prototype属性是JS继承机制的基础。JS对象是“直接从另一个对象那里继承”的。默认情况下，每一种数据类型都又一个指向默认原型对象的引用，即prototype属性。当你更改这个属性值的时候，意味你想让当前对象“继承”于你新指定的那个对象。如果你修改prototype中的那个对象，你是想要修改所有当前类型的对象的方法、属性。示例如下：

var animal = {
    name: "general animal",
    eat: function(){
        alert(this.name + " is eating!");
    },
    sleep: function(){
        alert(this.name + " is sleeping!")
    }
}

function cat(){
    var o = function(){
    };
    o.prototype = animal;
    o.name = "cat";
    o.catchMice = function(){
        alert(this.name + " is catching mice!");
    }
    return o;
}

这个其实很像GoF设计模式中模板方法，只是这个东西是内置在JS之中的，无需你再去实现一个模板机制。Java种的模板方法很常用，例如Spring的JDBC Template。
尽管如此，一部分前端工程师选择了使用一种伪继承（Pseudo-Classical）的方式实现对象系统。采用这种思维，上面的那段示例应该编写如下：

function Animal(){
    this.name = "general animal";
}

Animal.prototype.eat = function(){
    alert(this.name + " is eating!");
};

Animal.prototype.sleep = function(){
    alert(this.name + " is sleeping!");
};

function Cat(){
    Animal.apply(this);
    this.name = "cat";
}

Cat.prototype = new Animal();

Cat.prototype.catchMice = function(){
    alert(this.name + " is catching mice!");
}

这样，程序员可以使用“new”关键字来实例化一个对象。这种方式，只是在表面上模拟传统的OOP风格，但是骨子里还是通过prototype实现了对象系统。
包括Google在内的诸多厂商大量采用了这种风格，分析其原因是前端工程师大量由传统程序员转型，或者说，至少受到了传统程序语言的较大影响，并希望获得这种OOP风格。尽管，在这种风格下，大部分JS的优雅特性都泯灭了。
这里，却体现出语言之间相互影响的典型案例。很多语言为了赶上OOP的风潮，都选择了OOP的风格，可是谁也说不清骨子里是否真是OOP。

动态特性

有趣的事情是，下面这段代码，可能让很多Java程序员迷惑：

var scope = "global";
function f(){
    alert(scope);
    var scope = "local";
    alert(scope);
}

Java程序员肯定会说，显示的是“global”；可是JS程序员会告诉你，显示的是“local”。这里尽管第二个scope的声明在第一个alert的后面，一个block内的var会被编译器提前到第一排，虽然此时scope还没有赋予新值。
这里我想说的是，JS没有严格的块级作用域（block scoping）。正是由于JS的动态特性，以往再OOP种所提倡的“越晚用到，就越晚声明”的原则是不适用的，JS里的变量应该在每个函数的开头就全部声明。
更疯狂的是，在众多的引用型数据类型里，竟然有Function？！function被看作了一种数据。

var sayHello = function(){
    alert("hello world");
};

这个被称为lambda函数。有人说JS是“Lisp in C’s clothing”，JS的很多特性都是有道理的。由于Java又沿用了很多C的语法特性，所以JS和Java的相似也是不奇怪的。
这种lambda函数，似乎已经不是函数了，它更像pointer，可是比pointer安全、简单。

当你发现function是数据类型的时候，你应该能想到一个function返回另外一个function的情景。

var producer = function(x){
    if (x == 1)
        return function(){
            alert("x == 1");
        };
    if (x == 2)
        return function(){
            alert("x == 2");
        };
}

既然JS里Function是一种对象，那么对象有自己的属性和方法就不奇怪了。
从这里，大多数Java程序员就已经疯掉了，JS的精髓所在就是这种方式所引发出的“闭包”。

闭包与prototype

所谓闭包，就是一个函数。但往往人们是指的一种特殊情况下的函数——即被另一个函数作为返回值所返回的函数。这个被返回的函数最大的特点就是依旧能访问原来外部函数的作用链（Scope Chain），好像原函数的那些变量都依旧存在，尽管你可能无法再显示地访问到原函数和它里面的那些变量了。
JS的闭包提供一些类C语言想都想不到的功能，例如像这样实现函数的柯里化：

var add = function(){
    var i, n = arguments.length, s = 0;
    for (i = 0; i < n; i++) {
        if (typeof arguments[i] == 'number' && isFinite(arguments[i])) {
            s += arguments[i];
        }
    }
    return s;
};

//From Javascript the Good Parts
Function.prototype.curry = function(){
    var slice = Array.prototype.slice, args = slice.apply(arguments), that = this;
    return function(){
        return that.apply(null, args.concat(slice.apply(arguments)));
    };
};

alert(add.curry(22).curry(11)()); //prompt 33

在这里，首先定义了一个add函数，它实际上接受无限个参数，并将其中的数字项目进行相加求和。

可最后一行没有直接调用add，并传入参数，而是执行了add的curry方法。
上例中，引用了《Javascript the Good Parts》中的一个实例代码，其扩展了Function这个构造函数的prototype对象，即为每个function添加了一个curry方法。该方法维护了一个运算数的数组args，以及总是指向原函数引用的that。通过闭包的作用，通过return返回的另一个function中，that依旧持有对原函数的引用，这里that没有被垃圾收集（Garbage Collection）！

这里，连续调用了两次curry方法，每次都返回一个新的function对象；其args和that都持有上一个函数对象的参数和函数本身的引用，这样迭代下来，最终执行效果就是把参数收集起来，传入了add函数。

可见，JS的闭包则是提高JS效率，完成复杂逻辑的利器！JS工程师对自己JS的这种强大的特性十分自豪，殊不知，其实Java也有闭包。

Java实际很早就提供了一种内部类（InnerClass）的东西。简单的来说，在一个类体申明另外一个类体，那么里面的那个类就叫做“内部类”。大部分学习过Java的同学都知道内部类，但大多数同学应该不会想到去使用它。

内部类在Java中的作用是提供一种使用接口之外的多继承机制。除此之外，内部类还提供了一种和JS中的闭包一样的效果，这里我们仅说明内部类的闭包特性：

public class TestClosure {

	private int number = 0;

	class Closure {
		public void increment() {
			System.out.println(number++); //More specifically, TestClosure.this.number++
		}
	}

	public Closure getCallback() {
		return new Closure();
	}

	public static void main(String[] args) {
		TestClosure tc = new TestClosure();
		Closure c = tc.getCallback();
		c.increment();
		c.increment();
		c.increment();
	}

}

这里有一个名为Closure的内部类，持有了对父类的所有成员访问权。这意味着Closure内的方法，可以访问父类TestClosure中的number。Java甚至提供了一种严格的访问规则，例如number也可以用TestClosure.this.number来进行引用。
上面那段代码，用JS来表现就是这样的：

function TestClosure(){
    var number = 0, Closure = {};
    Closure.increment = function(){
        return number++;
    }
    return Closure;
}

var tc = TestClosure(); // Important; there is no "new" keyword here!
console.log(tc.increment());
console.log(tc.increment());
console.log(tc.increment());

这里，TestClosure作为一个可以生产Closure对象的“构造函数”加工了一个Closure对象，并返回。这个Closure对象可以访问TestClosure下的任何变量或方法，自然也包括number。
实际上，大量的Java闭包被用于MVC界面的编程之中，例如Swing。在未来版本的Java种，会有更强大的闭包特性。笔者在这里猜测，应该这些特性是会像JS闭包学习的。

现代语言特性与人们的喜好

现在市面上的变成语言层出不穷，但权威机构的月度程序语言流行度统计分析，前10名之中，C语言是最稳定的，其次是C++、Java、JS。紧接着的，ActionScript、Ruby等语言浮动性非常大。

可见，年龄越长的主流语言其使用度就越高，也就是更加经得起“时间的考验”。
而这些“存活”下来的佼佼者，却越来越多的拥有一些共性。这就是文章讨论Java和JS两种使用环境完全不一样的语言的目的——即使环境完全不相关，这些语言的语法、风格特性都有惊人的共通之处，只是实现的方式、难以程度不大一样而已。

对于数据类型来说，一部分语言需要有强大的性能，那么对数据类型要尽可能的达到算法中较低的空间复杂度。这导致的是多种而全面的数据结构，伴随的可能是编译时的严格类型检查。而另一部分语言，它们的使用环境很少会要求有高强度的计算，甚至只是辅助性的，他们要求能够快速的完成开发流程、松散的维护一组数据，那么基本够用的数据类型、弱类型就可能是这个语言的基本特性了。

对于数据的访问，几乎大多数现代语言都使用了点访问符，区别在于访问的规则不一样。有的语言拥有块级的作用域，一组花括号（或其他界定符）之外是无法通过访问符得到花括号内部的引用的。但对于另一部分语言，你却可以设法让变量在整个程序的生命周期中被任意访问。这种灵活程度是一个语言设计中的博弈，较大的灵活程度可以得到一个轻盈、敏捷的编程风格，但是也意味着对程序员的要求也随之提高（这个在类C语言的程序员写JS的时候就很容易体现出来）。

由于上面所说的两个方面，数据结构的编写也会造成性能上巨大的差异。因为，同一种算法，其理论性能是确定的，但是实际性能由于实现载体不一样会造成很大的区别。人们更乐于谈论到，这种性能差异，而去忽视语言的其他差异。社区内部的一些诸如“Java还是C#”的问题就这样产生了。

当你仔细去观察这些已经有相应产品的编程语言，他们都是出色的，只是富有不同的特色罢了。现代语言经过用户的“自然选择”，已经进化到具有某一些通性。这种通性是我们掌握一种语言后，对其他语言的学习曲线变得更平缓。这就如同学过C语言的学生，去学习Java、C++会容易很多；学过Java、C++，去学习ActionScript也会觉得似曾相识。

但一种语言的存在必定拥有起特异性。这种特异性使得人们去在特定场合去使用这种语言，而放弃其他语言。例如，被大多C/C++程序员诟病的PowerScript等数据库开发的应用语言，在C/S架构下的数据库应用中仍有一席之地，特别是项目对于开发周期有较严格要求的情况下。同时，这种语言特性，也使得这种程序员很难完全掌握这门语言的全部特性。所以往往，对这些特性的掌握情况也就是衡量一名程序员对该门语言掌握程度的重要界定指标之一。

结束语

如今的大多数开发都逃脱不了少数几门语言。在网络应用的开发过程种，前端工程师和Java或C#程序员却俨然称为某种对立的存在。文章以JS和Java为例，从各自的语言特性出发，寻找其本质上的相同点和不同点。程序员在只有在充分了解语言与语言之间的这些特性之后，才能客观的去评价某一个语言以及更好地去驾驽自己所喜欢地语言。

参考文献

《Thinking in Java》 4th Edition，P246，Using .this and .new
《Thinking in Java》 4th Edition，P261， Closures & callbacks
《Javascript the Good Parts》，P52，Functional
《Javascript the Good Parts》，P37，Closure
《Javascript the Good Parts》，P43，Curry
《Javascript the Good Parts》，P47，Pseudoclassical
《Javascript the Definitive Guide》5th Edition，Prototypes and Inheritance
《Javascript 语言精髓》，为Javascript正名

Wow, This is HTML5 Web App!

Robin — Mon, 05 Apr 2010 00:54:53 +0000

Windows Painter accompanies Windows releases dating from early 90′s. It’s simple with basic features of painting, making it suitable for graffiti。 HTML5 Canvas Object enable online apps to implement online Painter, and a lot of people actually did!

Windows 画图程序一直伴随着 Windows 各个版本，这个很简单，几乎没有什么用处的程序拥有最基本的绘图功能，很适合用来涂鸦。HTML5 的 Canvas 对象使在线绘图成为可能，虽然 HTML5 还远未成熟，但很多人已经迫不及待地用它设计一些让人惊叹的应用。

These apps are beyond your imagination. You wouldn’t realized these are online apps if I didn’t tell you……

这些应用都十分具有想象力，不告诉你，肯定不知到这是在线程序啊！

Eye Tracking and Web Usability: A Good Fit?

Robin — Sun, 04 Apr 2010 13:43:44 +0000

Since its inception, eye tracking has been employed by cognitive scientists to study reading, learning, attention, and neurology; by marketers to examine the effectiveness of ad and package designs; and by human factors engineers to guide automotive and airplane cockpit design. These and other disciplines have had great success leveraging eye tracking as a behavioral research method and to inform the design of communications and interactions. Recently, as eye tracking technology has become more affordable and accessible, academics, research suppliers, and eye tracking equipment makers have been experimenting with applying eye tracking to behavioral research in new domains.

眼球跟踪技术在可用性研究方面是个万金油。在近几年，几乎运用到了大多数公司的UX研究里面。这个直观的实验方法能给实验者关于用户注意力分布的直接统计数据。但是其中更深层次的关联，也许并不是仅仅越吸引眼球，就越重要或者越“有趣”吧？

Browser Size Tester

Robin — Wed, 31 Mar 2010 08:59:30 +0000

Are you enjoying designing on your 24′ inch LCD Monitor? Well, most designers, I believe, do. More often than not, they forget to test on a monitor that their clients may use.
Grab a test tool for browser size. Meanwhile, by analyzing the browser size and focus distribution graph, you can better plan your layout.

用24寸的显示器来做设计应该很爽吧？相信大多数设计师都是这样。但往往，我们会忘记在客户最常使用的显示器尺寸下进行测试。同时，通过分析浏览器显示器尺寸以及用户的注意力分布图，我们可以更好的安排页面布局。以下提供了两个浏览器尺寸测试工具。

http://whereisthefold.com/
http://browsersize.googlelabs.com/

20 Helpful jQuery Methods you Should be Using

Robin — Wed, 31 Mar 2010 08:48:19 +0000

So you’ve been playing with jQuery for a while now, you’re starting to get the hang of it, and you’re really liking it! Are you ready to take your jQuery knowledge to level two? Today, I’ll demonstrate twenty functions and features you probably haven’t seen before!

作为目前最流行的JS库，jQuery受到了无论是设计师还是开发人员的欢迎。但是其实大部分人都没有领会到jQuery强大的功能。这篇文章里介绍了1.4中新引进的一些功能，相信会让你耳目一新。