从Enyo看移动Web应用框架设计
jopen 12年前
<p> 文 / 程邵非</p> <p> Enyo 是一个来自 Palm 的 Aries 项目的 JavaScript 开发框架，它所关注的方向是一般的程序框架所关注的封装性、复用性和可维护性。</p> <p> <strong>历史</strong></p> <p> Enyo 是随着 webOS 发布的开发框架。</p> <p> Enyo 1.0发布于 HP TouchPad 的 webOS 之上，它是依赖于 WebKit 的开发框架。因为一些历史原因，Enyo 1.0的授权仅限于 webOS 中使用，并没有使用开源协议。</p> <p> Enyo 2.0则是一个跨平台的框架，它现在已经在 github 以 Apache 2.0协议开源。</p> <p> 如无特别强调，本文后面所述的 Enyo 皆指 Enyo 2.0框架。</p> <p> <strong>核心概念</strong></p> <p> 如 Enyo 网站主页强调的，Enyo 的核心是一种封装模型，让使用者能够更容易地复用和维护。在这一点上，Enyo 更倾向于一个传统程序设计领域的框架。它所关注的方向是一般的程序框架所关注的封装性、复用性和可维护性。</p> <p> 与 Enyo 相比，一些流行的 JS 框架设计的核心思想则显得不那么“程序员思维”，比如 jQuery 的设计理念是：Write less, do more。</p> <p> jQuery 在这一点上颇受一些程序员背景的工程师诟病，但恰恰因为这样，它讨好了大量设计师和有设计背景的前端工程师。</p> <p> Enyo 的设计理念是将程序分解为一个个的 Component（组件），Component 又能够由其它的 Component 组成。Enyo 是一个立足于 UI 的框架，但它的 Component 理念并不限于 UI 组件。</p> <p> Enyo 这样的设计非常适合较大的工程，这跟传统的 Web 前端项目理念有些不同。很难想象一个网页会由很多工程师共同完成。而 Enyo 认为基于 Enyo 开发的应用程序，可能需要更多工程师来进行合作。</p> <p> 总体而言，从 Enyo 的整体设计看，它对于移动开发程序员和程序员背景的前端工程师比较友好，而与之相对，它对于设计师背景的前端工程师则不那么友好。</p> <p> <strong>Enyo 的设计目标:Web、移动、应用</strong></p> <p> Enyo 作为应用程序基础框架用于 webOS 上，这决定了它的设计目标离不开 Web、移动和应用三个关键词。</p> <p> 毫无疑问，webOS 选择 HTML+JS 的开发方式很大程度是看中了已有的网页前端开发工程师资源。经过多年的发展和磨合，现在网页开发已经是一个非常成熟的技术环境了，这其中有着由设计师、工程师、产品经理等不同人才组成的完整的生态系统，大部分企业的开发流程也已成熟。尽管拥有 JavaScript 这样图灵完备且具有相当抽象能力的编程语言，网页与应用之间仍然有着不小的差距，而 Enyo 的设计目标之一就是尽量弥合这个差距。</p> <p> 为了与同类产品竞争，Enyo 还必须要提供能够快速上手的开发能力，以及对硬件的访问能力。而这些恰恰是传统网页所缺少的功能。</p> <p> Enyo 的编程模型中基本抛弃了 HTML 语言本身，而主要使用 JavaScript 和 DOM API 来编写图形界面。Enyo 选用 JSON 来代替 HTML 作为界面描述语言，这样既保持了方便的程序访问性，又保证界面编写难度不会过高。</p> <p> JSON 描述界面这种做法在传统的 JS 框架中有成功的先例，其中最为著名的当属 ExtJS，Enyo 选择这一做法很可能借鉴了 ExtJS 的成功经验。</p> <p> 当然抛弃 HTML 这一做法实际上意味着 Enyo 放弃了大批 Web 开发者以及围绕 Web 开发的工具。Enyo 的这一选择可能并非明智。</p> <p> 因为 webOS 系统主要用于移动设备，所以 Enyo 的设计也必须更多考虑移动设备。Enyo 提供了专门为触屏设计的 Scroll 组件，这样可以使 webOS 设备能够轻易地做出接近 iOS 和 Android 设备的触摸滚动效果。</p> <p> <strong>Enyo 的架构</strong></p> <p> Enyo 主要分为五个模块：Kernel、AJAX、DOM、Touch、UI。</p> <p> Kernel 模块为所有模块所依赖，其中主要包括对 JavaScript 语言本身的扩展和 Enyo 的 Type 系统。</p> <p> AJAX 模块实际上不仅仅是 AJAX 功能扩展，还包括 JSON 等 AJAX 相关的功能扩展。</p> <p> DOM 则是对 HTML DOM API 的简单封装和基本手势的支持。</p> <p> Touch 实际上包含了 Scroll 和 Touch 功能的结合，touch 提供了各个层次的 Scroll 逻辑，既能够直接使用 Scroller，又能用更为底层的 ScrollMath 和 ScrollStrategy 来定制自己的 Scroll 行为。</p> <p> UI 模块是 Enyo 提供的基本控件，这些控件的主要作用是生成对应的 HTML 代码。</p> <p> <strong>加载系统</strong></p> <p> Enyo 的主要模块之外，有一部分 Boot 模块可以用于加载 Enyo 的脚本以及注册全局命名空间。</p> <p> 这里 Enyo 提供了一组简单的包管理系统，包括加载包、包依赖关系，以及样式表单文件的管理。</p> <p> 虽然很少用到，但这部分功能也暴露给了开发者，通过 enyo.loader 可以实现加载代码包并且处理依赖关系。</p> <p> <strong>OOP 系统</strong></p> <p> Enyo 实现 OOP 的方式是 Type+Component 模式，这基本可以认为是 Class 和 Object 的别名。</p> <p> Enyo 的 Type 系统是 Enyo 提供的一种类型系统，一切 Enyo 框架内的组件都必须遵循 Type 系统来注册自己。</p> <p> Component 系统则是与 Type 系统密不可分的，任何 Component 都必须有自己的指定 Type，Enyo 正是通过这种方式保证模块化的。</p> <p> 以下是来自 Enyo 官方网站的一个注册类型实例。</p> <div class="cnblogs_code"> <pre> enyo.kind ({ name: ”Hello”, kind: enyo.Control, components: [ {name: <span style="color:#800000;">"</span><span style="color:#800000;">hello</span><span style="color:#800000;">"</span>， content: <span style="color:#800000;">"</span><span style="color:#800000;">Hello From Enyo</span><span style="color:#800000;">"</span>， ontap: <span style="color:#800000;">"</span><span style="color:#800000;">helloTap</span><span style="color:#800000;">"</span>}, {tag: <span style="color:#800000;">"</span><span style="color:#800000;">hr</span><span style="color:#800000;">"</span>} ], helloTap: function () { <span style="color:#0000ff;">this</span>.$.hello.addStyles (“color: red”); } });</pre> </div> <p> 值得注意的是，Enyo 可以简单地将几个 Component 组合，形成新的 Component 类型。</p> <p> Enyo 注册类型之后，则可以直接通过 new 来创建 Component。</p> <p> 在 kind 函数接受的 JSON 描述中，kind 属性起到了等同于指派父类的作用。</p> <p> <strong>扩展 API</strong></p> <p> 如同每一个 JS 框架做的那样，Enyo 也有对 XHR、Cookie、事件、异步等一些 HTML DOM API 做了扩展，这样可以减轻 Enyo 的开发者的负担。</p> <p> 比较特别的扩展是 Enyo 对于手势的封装，Enyo 提供了 10 种手势：up、down、tap、move、enter、leave、hold、release、holdpulse、flick。这些基本涵盖了所有的单点触控手势。</p> <p> <strong>scroll 系统</strong></p> <p> 在 Enyo 中最简单的支持滚动的方法是直接使用 Scroller 和 TouchScrollStrategy，Scroller 提供了基本的滚动行为，TouchScrollStrategy 提供对手势的基础支持。</p> <p> 实际上 Enyo 暴露了不同层次的 API，最底层的是 ScrollMath 类型，它定义了一个效果比较良好的滚动所用到的数学和物理常量以及算法。</p> <p> ScrollStrategy 则是一个抽象类，它规定了手势与 Scroller 之间的关系，如果不使用原生 TouchScrollStrategy 的话，则可以自由定义事件和滚动的触发关系。</p> <p> <strong>思考</strong></p> <p> Enyo 作为一个已被正式商用的移动应用开发框架，无疑是值得后来者学习的，包括其他基于 Web 平台的操作系统、试图为 hybrid 服务的 Web 框架以及类似 PhoneGap 的 HTML 应用壳程序。一些 Enyo 受到诟病之处，也值得参照和避免。</p> <p> Enyo 中可以总结一些移动应用框架的设计原则。</p> <p> <strong>尽量保持原生风格。</strong>在框架设计上，采用颠覆性的风格是危险和得不偿失的，应当尽量贴近原生 API 的命名风格和设计风格。</p> <p> <strong>提供多层次的 API。</strong>既给初级用户提供能够简单使用的 API，又给高级用户提供足够灵活的 API，当两者矛盾之时，可以通过暴露不同层次的 API 来实现。</p> <p> <strong>节省命名空间。</strong>如非必要，尽量不污染全局命名空间。</p> <p> <strong>支持触屏设备。</strong>现有局面下，移动框架的主要竞争焦点在于触屏的支持，尤其是手势和滚动效果很大程度决定了框架的优劣。</p> <p> <strong>考虑开发者多样性。</strong>Web App 的开发者包括传统的前端人员和一部分移动开发工程师，设计框架时过于倾斜将会导致一部分开发者流失，尽量提供给用户多种选择更为合理。</p> <div id="come_from"> 来自: <a id="link_source2" href="/misc/goto?guid=4958349127580999229" target="_blank">www.programmer.com.cn</a> </div>