虚拟研讨会：HTML5 的新 JavaScript 框架

去年一年中， HTML5 的使用率不断增长，已经被广泛看做是传统的桌面和新兴移动 web 上的主要开发平台之一。与此同时，服务于此平台的全新 JavaScript 框架也已兴起，期望能够为 Web 开发设立一个新的范式。

InfoQ 曾经举办过一次虚拟研讨会，会议邀请了一些最受欢迎的 JavaScript 架构和平台，例如 Dojo、YUI、Prototype、script.aculo.us、MooTools 和 GWT 的创始人或者首席开发人员，讨论的主题是他们如何看待自己的框架简化 HTML5 下的开发过程。

而这次研讨会的背景是新的 HTML5 特定框架的兴起，InfoQ 以问答的形式采访了这些框架的创始人，请他们就这些框架的特别之处以及新特性发表看法。

参与者有：

• 来自 Jo 的 Dave Balmer
• 来自 Modernizr 的 Faruk Ates 和
• 来自 Simpli5 的 Jacob Wright

InfoQ：虽然现今已经有了一些 JavaScript 框架，但是是什么激励着你们去为 HTML5 开发新的框架的？相比传统的框架，它能够给我们带来哪些好处？

Dave（Jo）：当你思考“当浏览器引擎能够做更多工作的时候会发生什么？”的时候，这就意味着 Jo 大有用武之地。最终你会发现你手头上的框架是如此简单，这个框架和浏览器引擎没有太多的联系。它是一个全新的开始，而且体验非常好。

W3C 的大量 HTML5 草稿和议案给 JavaScript 开发者展现了一幅新的图画，他们可以开发出完全和本地应用匹敌的世界级 web 应用。客户端持久化存储、底层文件访问、sockets、后台进程、使用硬件加速 UI 的展示和互动是 HTML5 最吸引我的部分。

虽然 HTML5 在桌面浏览器已有一席之地，但仍未占据统治地位。在我们等待 Windows 的用户使用 Internet Explorer 9（这个浏览器将会支持 HTML5 规范中的许多非常酷的特性）的过程中，其他的平台已能支持这些特性了。Apple iOS、Google Android 和 Chrome、webOS 以及 RIM 和 Symbian 近期都希望能够将 HTML5 的高级特性应用到智能手机、平板电脑和上网本上。

虽然 HTML5 离得到广泛的桌面支持还有一段距离，但是市场上最新的移动设备已经趋于认同 HTML5 将会是高度一致性的平台。

Faruk（Modernizr）：Modernizr 始于这样一个问题，那就是在不同的浏览器中，即便页面代码是相同的，但是最终的视觉效果却千差万别──大多数著名的、陈旧的以及功能较少的浏览器都不是完美像素支持。我不是只停留在口头讨论上，而是开始着手解决这个问题。Web 开发的建议就是一个：简化开发过程，高效的开发来自于简单且优秀的开发流程。我曾经尝试根据 UserAgent 来识别浏览器能支持的特性，但是这个不可靠的字段把我搞得灰心丧气（这也是一个反面例子）。这次经历也让我认识到需要有一个可靠的方法，来鉴别出 HTML5 和 CSS3 中哪些特性在各个浏览器中是否可用。

当我着手创建 Modernizr 的时候，很明显，由于精力的问题，我必须专注于少量核心特性。虽然有 jQuery 和其他的框架的存在，但是 Modernizr 能够支持它们不能支持的关键特性，因此我决定只有一件事情是 Modernizr 需要关注的，那就是浏览器特性支持检测。我并不希望 Modernizr 成为 JavaScript 库中的大型瑞士军刀，我只是希望它能够尽可能地小，而且成为每一名 Web 开发者装备库中最基础最重要的装备。他们使用的技术越前沿，Modernizr 对他们就越有用。

Jacob（Simpli5）：我猜大概现有 Javascript 框架中一半代码都在解决跨浏览器的兼容性问题，或者手动为不合格的浏览器增加特性。如果我在开发 HTML5 应用，为什么我们需要下载（以及缓慢地）脚本来帮助兼容旧有浏览器呢？此外，有很多 JavaScript 特性这些框架都不能使用，因为并不是所有的浏览器都支持（例如隐式的 getter/setter）。开发一个全新的 HTML5 的 JavaScript 框架而不是扩展现有的框架，我们能够得到一个更小更快更精致的框架，要知道这样我们并不会受到现有框架的各种规则的限制。

InfoQ：能不能从架构的角度大致描述一下你们的框架？它们的主要组件是什么？组件之间又是如何交互的？

Dave（Jo）：首先，整个框架使用了 JavaScript 的对象模型。这些用于构建 Jo 的技术和代码模式都在“JavaScript，The Good Parts”（Crockford / O’Reilly Press）中介绍过，这本书还介绍了一些不错的编程风格；尤其是 Google 的 V8 引擎的风格。

命名空间的实现方式是使用一致的命名标准，而不是使用嵌套对象命名（例如是 joButton 而不是 JO.UI.Button）。这将节省下大量用于每次引用对象的时候遍历原型链（prototype chain）所需要的时间。更重要的是，例如 V8 这样的 JavaScript 引擎对对象字面量（object literal）的存储做了高度优化，但是，作为代价，给对象添加或者删除属性的方法性能将会下降。这就意味着如果一个框架使用嵌套对象命名空间，那么它的库将会庞大而且缓慢。

除了简单使用对象和方法，正式的 Jo 对象使用了重构过的“观察者模式”OOP 标准。对象将消息发送给任何一名接受对象。这种对象间通信的方式非常灵活，并且容易“重新组合”。而且，因为对象间的接口非常“简洁干净”，这有助于优秀的单元测试实践。

UI 元素有一个共同的基类叫做 joView。在 Jo 中创建的每一个 UI 元素都需要使用一个或者更多 HTML 标签，而且通过改变.className 属性来操控这些标签。这也就意味着所有的视觉展现和行为都是可以由 CSS 控制。与其在 JavaScript 中使用动态代码，我们使用 CSS3 就可以完成这些非常酷的效果。

joControl 是输入框，按钮，选择框以及其他 GUI 控制组件的基类。joContainer 是组织 UI 元素集合的基类。有些 Jo 的 sugar 可以在 joContainer（或者其子类，例如 joCard）中找到。例如：

复制代码

 
var myui = new joCard([
    new joTitle("Hello World!"),
    new joGroup([
        new joLabel("Username"),
        new joInput(joPreference.bind("username")),
    ]),
    new joFooter([
        new joDivider(),
        new joButton("Goodbye")
    ])
]);

这样你就得到了一个简单的对话框，并且可以直接显示（通常是调用 joStack.push() 方法）。仅仅有丰富的 UI 对象，Jo 有自己的 joDataSource 和其子类。这类对象封装了例如 XHR、SQLite、cookie 以及其他获取异步数据的巧妙方法。有了这些对象，你的程序可以在不同的数据存储系统和数据获取方法中使用一致的接口。

Faruk（Modernizr）：Modernizr 非常小巧简洁：我们运行了一系列测试，每一个测试都会检测浏览器中的特定特性。我们不会问浏览器你是哪个，我们只是简单地询问：你支持 border-radius？你支持 HTML5 video 吗？你支持地理定位吗？诸如此类的问题。然后我们检查所有的测试结果，将其作为 HTML 元素的类在 Modernizr 对象中使用，你可以在 JavaScript 中和它们进行交互。以 border-radius 为例，HTML 元素中的类可以简单地叫做“borderradius”或者“no-borderradius”，这取决于浏览器是否原生支持。如果所有的测试都通过的话，你甚至可以很严格规范地书写你的 CSS 代码。我们不关注浏览器的 UserAgent 字符串或者版本号，而是检测它能够支持什么样的特性。

所以我们真正拥有的组件就是各种测试，再加上一点处理程序。有些测试可能会导致较长的反馈，例如 @font-face 测试，它的特性不是即时可用的，所以这是一个异步检测。

Jacob（Simpli5）：我真的很喜欢 jQuery 和 DOM 的简单协同工作方式，但是我也一直希望需要的时候，我能够调用元素的方法，而不是需要使用 jQuery 来封装这些元素。所以 Simpli5 的核心特性便是加入了 jQuery 提供给 HTMLElement 原型的大部分功能。有些 JavaScript 开发者可能看不起这个框架，但是我觉得这个框架很好利用了 JavaScript 语言（而不是无法利用）的核心思想，它允许我们高效地开发生产，并且编写出更多高可读性的脚本。一个 Simpli5 对象和 jQuery 对象非常类似，也是一个元素数组，调用对象的方法实际上会调用这些元素的方法，例如，document.body.addClass(‘myclass’) 和 $(‘div’).addClass(‘myclass’) 实际上是将这个类加入到元素中去。

我已经加入了一个小型的类系统，因为结构化和易维护的组织形式对于健壮的 HTML5 应用是必不可少的。它和 MooTools 类看起来很像，而且能够很好地支持继承。

InfoQ：你们的框架和现有流行的客户端 JavaScript 框架（例如 jQuery、Dojo 和 Prototype）之间的互操作性如何？它们能一起正常工作吗？

Dave（Jo）：Jo 和其他程序库的兼容性非常好。事实上，它设计之初便是以例如 PhoneGap 这样的底层库一起工作为目标。我并不会尝试解决所有的核心问题，例如“加载浏览器 URL”或者“告诉我什么时候我的应用能够运行”。Jo 是一个相对来说比较高层的框架。

Faruk（Modernizr）：与其说 Modernizr 是一个框架，还不如说它是一个工具集，你可以放心地在大量其他的程序库和框架中使用它。虽然它和 ie-css3.js 不兼容，但这只是在某些特殊情况下才会触发（比如使用 ARIA role 属性的时候）。

Jacob（Simpli5）：在绝大多数情况下它们之间兼容性不错。Simpli5 使用 $ 作为变量前缀，这和 jQuery 是一样的。不过如果 $ 已经被占用的话，可以重新指定另一个前缀符号。它的确和 Prototype 和 MooTools 一样使用 Class，所以无论哪个最后被载入，你使用的类系统都是一样的。

InfoQ：你们能够举例说明一下这些框架的能力以及描述一下解决方案吗？

Dave（Jo）：Jo 的目标是解决“我们如何能够让一个应用在大量平台上获得广泛支持？尽管这些平台的显示规格和特性各不相同。”Jo 将所有 UI 的工作交付于了 CSS3（在某些平台上是硬件加速），也就是说你的应用在任何平台上都是相同的。跨平台问题在 CSS3 中被弱化了，而且类似于 PhoneGap 这类底层库也较好地封装了跨平台问题。

Faruk（Modernizr）：我的个人网站（当前的）使用了一系列的标签特性，同一个鼠标行为在不同的浏览器中会出现不同的标签的展现方式。如果浏览器是功能强大并且遵循标准的话，那么会有很酷的动画效果，例如颜色渐变和宽度改变。浏览器本身的功能越少，那么这个特效就越缺少观赏的乐趣。Modernizr 允许我能够安全且容易地找出浏览器的类型，然后根据不同的浏览器使用不同的 CSS 规则 - 如果没有的 Modernizr 的话，这些规则可能会互相冲突或者出现重载。

Jacob（Simpli5）：这个框架非常的新，也就大概一个月的年龄，但是我相信它会很快的成熟起来。我努力地使用更简洁方便的并且能够为 HTML5 浏览器支持的代码支持其他框架都能支持的功能。我想它的最大亮点是它的组件系统，你可以以一种非常简单易读的方式定义一个组件，这种方式有助于组件式开发。

InfoQ：你们是如何看待 JavaScript 框架通过改进来适应 HTML5 的？

Dave（Jo）：JavaScript 库应该逐渐变得更小更高效。更多的底层 UI 和动画效果应该集成到 CSS3 之中，使得 JavaScript 的 DOM 代码更加简洁。像 同样例如构建入 HTML5 的 worker 进程意味着我们可以以一种更加自然的方式来编写后台任务，而不是需要写出一些非常荒谬且复杂的代码展示 UI。

Faruk（Modernizr）：HTML5 和 CSS3 越来越被广泛接受，这有很大一部分应该归功于 Webkit 浏览器引擎，这个引擎已经成为了现在几乎所有移动浏览器的事实标准。JavaScript 框架运行于这个引擎之上，而且缓慢地进步到根据情况使用原生实现或者 JavaScript 驱动的后备计划。

Jacob（Simpli5）：我看大部分人都加入了 HTML5 扩展，而使得核心代码由于处理跨浏览器问题而变得臃肿，这个问题可能得到大多数站点都转向 HTML5 之后才能解决。他们的代码不得不这样做，因为需要满足开发者在不同浏览器中运行脚本的需求。只有很少一部分人选择了只支持 HTML5，从而享受到了剔除旧代码和浏览器的畅快感，而且项目也能进展顺利。老实说，对于更快的 JS 引擎和带宽来说，“臃肿”不是那么重要。

我也看到了很多服务于 SQL，数据存储，Socket 等的库不断地涌现。和这些库打交道应该是一件很有意思的事情。

InfoQ：你是如何看待近期 HTML 5 和浏览器的发展情况呢？有什么东西你认为是标准中缺少的呢？你对 HTML5 的部分技术有什么评价吗？

Dave（Jo）：现在 Safari（以及 iPhone 和 iPad 上的 mobile webkit）是唯一能够在 CSS3 中进行硬件加速 3D 变换的解决方案，不过也有一个很让人失望的地方。它的市场占有率使得这个效果在其余 94% 的平台上无法展示，或者不得不让我们编写一些不能在移动设备上运行的东西。

这个标准中最大的缺陷就是客户端数据持久存储。Webkit、Gecko 和 IE 都有它们自己的本地存储方式，这让编码过程变得焦躁不安。

最激动人心的莫过于“web worker”后台进程。如此多的应用程序将任务分成无数个小片。使用一个后台进程无中断地展示一个列表，这个用户体验非常地酷。

Faruk（Modernizr）：关于 HTML5，我有许多东西要说，例如浏览器以及市场的反应。Web 开发者和标准拥护者有的时候可能会忘记有一件事情是用户根本不关注的，即用户不在意应用程序是使用 Flash、Sliverlight、HTML5 还是 CSS3 编写的，而是关注这个程序是如何工作得好（或者不好）。

我们很自然而然地去批评 HTML5 的进展以及厂商的态度，但是考虑到复杂程度，以及古往今来这样巨大的事情进展均是如此地混乱，我就释然了。我们现在终于可以在浏览器中做一些我们很多年前就一直在梦想做的事情了，创新的脚步和加入到浏览器中的新特性让人难以置信。作为 web 开发人员，这是最令人激动的时代，从社区对 Modernizr 强有力的支持就可以看出。即便它之前是完全开源的，世界各地的人们都在为它做贡献。

非常激动人心的是，人们对 Modernizr 的支持激励着我们继续开发和完善这个工具，我们希望能够将其变得更加有用，尤其是对于那些希望能够迅速构建自己站点的 web 开发者。

Jacob（Simpli5）：我看到了一些加入到 video 和 audio 组件的特性，例如皮肤功能，或者将其更好地组合到页面中。不过也有浏览器不打算支持 Flash video。这个标准没有包括性能这一部分，但是这是我想在下一个版本中看到的东西。JS 性能一直在提升，但是渲染的性能也需要提升。如果你希望使用 HTML5 编写一个游戏，那么性能将会限制你的发挥。

你可以在 InfoQ 找到更多关于 HTML5 、 JavaScript 和其他富Internet 应用技术的信息。

查看英文原文： Virtual Panel: New JavaScript Frameworks Targeting HTML5

感谢李明对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家加入到 InfoQ 中文站用户讨论组中与我们的编辑和其他读者朋友交流。