Enyo 框架最初是 HP webOS 的应用框架，现已发展成为一个功能齐全的跨平台、跨设备 HTML5 框架，适用于现代 Web 开发者。秉承代码复用和快速高质量开发的理念，Enyo 使用面向对象的封装模型，您可以构建组件、移动组件、扩展组件并在模块化方式中重复使用组件。它隐藏了凌乱的平台特定特性，如果您编写了一个 Enyo 应用，它可以在 Internet Explorer、Firefox、Google Chrome、iOS、Android 等中以相同的方式运行。现在，其最新的 v2.2 稳定版本将其 支持平台列表 扩展到包括 Windows 8、Windows Phone 8、BlackBerry 10，当然还有 Firefox OS！

介绍 Enyo 的视频/演讲。

早在 1 月份，我有幸参加了 Firefox OS 开发者研讨会。在 Firefox OS 设备上测试 Enyo 后，发现了一些问题，我很高兴地说，我最近提交给 Enyo 开源存储库的请求已解决了这些问题。因此，如果您想使用 Enyo 创建新应用，甚至在 Firefox OS 上使用现有的 Enyo 应用，请注意以下几点。

平台检测

尽管 Enyo 旨在实现平台无关性，但有时您确实需要知道您正在哪个平台上运行。enyo.platform JavaScript 对象可以帮助您实现这一点。作为我所做更改的附带好处，如果您在 Firefox OS 上运行，则可以获得 enyo.platform.firefoxOS 属性，该属性返回操作系统版本号（在其他平台上该属性未定义）。感谢此功能，您可以仅针对 Firefox OS 进行条件更改和功能添加。

if(enyo.platform.firefoxOS) {
    //do super awesome Firefox OS-specific feature
}

“:active:hover” 选择器的解决方法

每当按下 Enyo 中的按钮或控件时，它都会简单地使用“:active:hover” 来更改按下状态下的样式和外观。但是，Firefox OS 不支持此功能，其理念是手指不是鼠标（至少这是向我解释的方式）。在尝试了一些潜在的解决方法后，最简单的解决方案是使用事件来填补空白。

Enyo 框架通过不仅利用标准和自定义浏览器事件，而且通过标准化，并在必要时将事件合成到一组标准的可预测事件中，从而使自身独立于平台，然后这些事件将在每个设备上发生。这些事件包括

• down
• up
• tap
• move
• enter
• leave
• hold
• release
• holdpulse
• flick
• dragstart
• drag
• dragfinish
• drop
• dragover
• dragout

有多种方法可以解决此问题，但为了简单起见，可以专注于down和leave事件。down事件是在鼠标点击或手指触摸控件时发生的，而leave事件是在鼠标/手指从控件上移开时发生的。我们可以使用down事件应用 CSS 类，然后使用leave事件删除样式。

例如，假设我们希望在单击/点击时突出显示某些文本。我们可以按照以下方式创建“Highlightable”控件

enyo.kind({
    name: "Highlightable",
    classes:"hl-text"
});

并定义 CSS 为

.hl-text:active:hover {
    background-color:yellow;
}

然后像这样使用“Hightlightable”类型

enyo.kind({
    name: "App",
    components: [
        {
            kind:"Highlightable",
            content:"This is a simple example of text that highlights when clicked/tapped on."
        }
    ]
});
new App().renderInto(document.body);

现在，为了对 Firefox OS 实施我们的解决方法，我们可以将 CSS 修改为

.hl-text.pressed, .hl-text:active:hover {
    background-color:yellow;
}

从这里开始，只需在事件上添加和删除pressed类即可。我们可以使用enyo.platform.firefoxOS仅在需要时应用样式。一个小问题：Firefox OS 模拟器实际上支持:active:hover CSS 选择器，因为正在使用鼠标。值得庆幸的是，我们可以通过检查事件数据的srcEvent.type属性的值，进一步过滤掉模拟器应用pressed样式。最终结果如下所示

enyo.kind({
    name: "Highlightable",
    handlers: {
        ondown: "highlight",
        onleave: "unhighlight"
    },
    classes:"hl-text",
    highlight: function(inSender, inEvent) {
        if(enyo.platform.firefoxOS && inEvent.srcEvent.type !== "mousedown") {
            this.addClass("pressed");
        }
    },
    unhighlight: function(inSender, inEvent) {
        if(enyo.platform.firefoxOS && inEvent.srcEvent.type !== "mouseout") {
            this.removeClass("pressed");
        }
    }
});

可以在 jsFiddle 上找到一个 扩展的工作演示

WebAppInstaller 和 WebAppButton 组件

为了简化 Enyo 开发人员创建 Firefox OS、Firefox 应用商店 和 Chrome 网上应用商店应用的过程，第三方 WebAppInstaller 库 将各种安装格式整合到一个统一的 API 中，并能够检查 Web 应用是否已安装以及安装托管的 Web 应用。此外，库中还包含一个名为 WebAppButton 的 Enyo 控件，这是一个“安装”按钮，用于安装当前托管的 Web 应用，并且根据您的配置方式，它将隐藏自身或变成“更新”按钮。

为了演示此功能，有一个 可安装的 Enyo 示例 Web 应用（GitHub 上的源代码）

Enyo 2.2 框架可在 Apache 2.0 许可下免费获得，网址为 http://enyojs.com
WebAppInstaller 可在 MIT 许可下免费获得，网址为 https://github.com/JayCanuck/enyo-2-components/tree/master/webappinstaller