Twitter 发布基于组件的轻量级 JavaScript 框架——Flight

前不久，Twitter 发布了 Flight 项目。 Flight 是一个轻量级的、基于组件的 JavaScript 框架，可以将行为映射到 DOM 节点上。Twitter 将其用在自己的 Web 应用上。

Flight 团队这样解释为什么要开发 Flight：

Flight 与其他现有框架的不同之处在于：对于 web 应用，它不会预先规定或提供任何特定呈现或提供数据的方法。对于请求如何被路由，你使用什么样的模板语言、甚至你如何在客户端或服务器上呈现你的 HTML，它都不关心。有些 web 框架鼓励开发者围绕一个预先规定好的模型层编写、安排代码，Flight 直接围绕现有的 DOM 模型组织代码，功能直接映射到 DOM 节点上。

这样做可以避免加入额外的数据结构，因为它们不可避免地会影响更大的架构，同时，直接将功能映射到原生 web 页面的做法，可以利用原生的特性。比如，我们可以直接在 DOM 的事件冒泡特性基础上自定义事件广播，而且我们的事件处理基础架构代码能够同时处理原生和自定义事件。

那么 Flight 中的组件是什么含义？网站上这么说：

• 组件，就是一个构造器，带有混入其原型的属性。
• 每个组件都有一些基本功能，比如事件处理和组件注册。
• 此外，每个组件的定义都混入一系列自定义属性中，这些属性定义了组件的行为。
• 当向一个 DOM 节点附加一个组件时，该组件的一个新实例就得以创建。每个组件实例通过其 node 属性引用 DOM 节点。
• 组件实例不能直接引用，它们与其他组件通过事件通信。

Flight 遵循严格的关注点分离原则。当你创建一个组件时，你无法直接处理它。因此，组件无法被其他组件引用，而且无法成为全局树的属性。框架设计的本意如此。组件不能彼此直接访问，实际上，它们会以事件来广播自己的行为，而且其他组件可以订阅这些行为。

能看出，事件在 Flight 框架中十分重要，Flight 团队这样解释他们使用事件的原因：

事件是开放性的。当一个组件触发某个事件，对于自己的请求如何被满足、或是谁来满足，它毫不知情。这强制了功能的解耦，工程师因此可以独立思考每个组件的功用，而不是必须去担心整个应用的复杂性不断增加。

让 DOM 节点的事件代理组件事件，有如下 3 点好处：

• 毫不费力地得到事件广播功能
• 组件可以在文档层面订阅给定的事件类型，或者选择监听来自某特定 DOM 节点的事件
• 订阅组件不会区分事件来自其他组件的自定义事件，还是原生 DOM 节点事件，并且会以完全相同方式处理这两种类型的事件。

在可移植性和测试方面，每个组件都是一个模块，除了少数几个标准依赖程序库外，对其他没有引用。因此，一个给定的组件会以同样方式响应一个给定事件，而不管环境如何。测试因此变得简单可靠，因为事件是唯一的变量，而且生产环境中的事件很容易在测试中复制。要调试一个组件，在控制台中触发事件就可以了。

至于混入（mixin），Flight 对函数式混入提供内置支持，同时保护无意的重写和混入复制。虽然经典的 JavaScript 模式只支持单继承，组件（或其他对象）都可以支持应用多个混入。

对于 Flight 的未来，团队表示：

Flight 是一个处于不断开发中的项目。我们准备加入一个完整的测试框架，同时公开更多 Twitter 网站使用的前端工具。

在 Github 上，Flight 团队发布了一个用 Flight 框架构建的简单 email 客户端演示。

Flight 使用了 es5-shim 项目和 jQuery ，如果要安装，还需要包括 require.js 或 loadrunner 这样的异步模块定义（Asynchronous Module Definition，简称 AMD）。

在 HackerNews 上，Flight 项目引起国外网友的热烈讨论。有人认为：

Flight 像是 Twitter 版本的 Web Component

有网友回复道：

Web Component 将会横扫 Backbone、Ember、Angular、Knockout 等等这些框架。

但是，接下来这几年，我们还是要用它们，因为很多 Web Component 的 API 只能在 Chrome 的 Canary 开发版本和 Firefox 的开发版本中使用。

……

在我看来，现在这些程序库越是接近 Web Compoenent 的规范，对于这些程序库应该成为什么样子，开发者的选择就越清楚。

还有其他网友纷纷提问：为什么不使用 Angular、Ember、KnockoutJS、component 等其他 JavaScript 框架，也都有人作答。

最有趣的是，有一个网友问道：

为什么不用 Flash？

另一个网友的回答是：

欢迎来到 2013 年。

InfoQ 的读者们，你们在做前端开发时，最常使用哪个框架？对于 Flight 这个框架，你怎么看？InfoQ 之前曾报道： Twitter 的 Bootstrap 生态系统持续增长，您认为 Flight 会有属于自己的生态型吗？欢迎在评论中留下您的看法。