從Enyo看移動Web應用框架設計
文 / 程邵非
Enyo 是一個來自 Palm 的 Aries 項目的 JavaScript 開發框架，它所關注的方向是一般的程序框架所關注的封裝性、復用性和可維護性。
歷史
Enyo 是隨著 webOS 發布的開發框架。
Enyo 1.0發布于 HP TouchPad 的 webOS 之上，它是依賴于 WebKit 的開發框架。因為一些歷史原因，Enyo 1.0的授權僅限于 webOS 中使用，并沒有使用開源協議。
Enyo 2.0則是一個跨平臺的框架，它現在已經在 github 以 Apache 2.0協議開源。
如無特別強調，本文后面所述的 Enyo 皆指 Enyo 2.0框架。
核心概念
如 Enyo 網站主頁強調的，Enyo 的核心是一種封裝模型，讓使用者能夠更容易地復用和維護。在這一點上，Enyo 更傾向于一個傳統程序設計領域的框架。它所關注的方向是一般的程序框架所關注的封裝性、復用性和可維護性。
與 Enyo 相比，一些流行的 JS 框架設計的核心思想則顯得不那么“程序員思維”，比如 jQuery 的設計理念是：Write less, do more。
jQuery 在這一點上頗受一些程序員背景的工程師詬病，但恰恰因為這樣，它討好了大量設計師和有設計背景的前端工程師。
Enyo 的設計理念是將程序分解為一個個的 Component（組件），Component 又能夠由其它的 Component 組成。Enyo 是一個立足于 UI 的框架，但它的 Component 理念并不限于 UI 組件。
Enyo 這樣的設計非常適合較大的工程，這跟傳統的 Web 前端項目理念有些不同。很難想象一個網頁會由很多工程師共同完成。而 Enyo 認為基于 Enyo 開發的應用程序，可能需要更多工程師來進行合作。
總體而言，從 Enyo 的整體設計看，它對于移動開發程序員和程序員背景的前端工程師比較友好，而與之相對，它對于設計師背景的前端工程師則不那么友好。
Enyo 的設計目標:Web、移動、應用
Enyo 作為應用程序基礎框架用于 webOS 上，這決定了它的設計目標離不開 Web、移動和應用三個關鍵詞。
毫無疑問，webOS 選擇 HTML+JS 的開發方式很大程度是看中了已有的網頁前端開發工程師資源。經過多年的發展和磨合，現在網頁開發已經是一個非常成熟的技術環境了，這其中有著由設計師、工程師、產品經理等不同人才組成的完整的生態系統，大部分企業的開發流程也已成熟。盡管擁有 JavaScript 這樣圖靈完備且具有相當抽象能力的編程語言，網頁與應用之間仍然有著不小的差距，而 Enyo 的設計目標之一就是盡量彌合這個差距。
為了與同類產品競爭，Enyo 還必須要提供能夠快速上手的開發能力，以及對硬件的訪問能力。而這些恰恰是傳統網頁所缺少的功能。
Enyo 的編程模型中基本拋棄了 HTML 語言本身，而主要使用 JavaScript 和 DOM API 來編寫圖形界面。Enyo 選用 JSON 來代替 HTML 作為界面描述語言，這樣既保持了方便的程序訪問性，又保證界面編寫難度不會過高。
JSON 描述界面這種做法在傳統的 JS 框架中有成功的先例，其中最為著名的當屬 ExtJS，Enyo 選擇這一做法很可能借鑒了 ExtJS 的成功經驗。
當然拋棄 HTML 這一做法實際上意味著 Enyo 放棄了大批 Web 開發者以及圍繞 Web 開發的工具。Enyo 的這一選擇可能并非明智。
因為 webOS 系統主要用于移動設備，所以 Enyo 的設計也必須更多考慮移動設備。Enyo 提供了專門為觸屏設計的 Scroll 組件，這樣可以使 webOS 設備能夠輕易地做出接近 iOS 和 Android 設備的觸摸滾動效果。
Enyo 的架構
Enyo 主要分為五個模塊：Kernel、AJAX、DOM、Touch、UI。
Kernel 模塊為所有模塊所依賴，其中主要包括對 JavaScript 語言本身的擴展和 Enyo 的 Type 系統。
AJAX 模塊實際上不僅僅是 AJAX 功能擴展，還包括 JSON 等 AJAX 相關的功能擴展。
DOM 則是對 HTML DOM API 的簡單封裝和基本手勢的支持。
Touch 實際上包含了 Scroll 和 Touch 功能的結合，touch 提供了各個層次的 Scroll 邏輯，既能夠直接使用 Scroller，又能用更為底層的 ScrollMath 和 ScrollStrategy 來定制自己的 Scroll 行為。
UI 模塊是 Enyo 提供的基本控件，這些控件的主要作用是生成對應的 HTML 代碼。
加載系統
Enyo 的主要模塊之外，有一部分 Boot 模塊可以用于加載 Enyo 的腳本以及注冊全局命名空間。
這里 Enyo 提供了一組簡單的包管理系統，包括加載包、包依賴關系，以及樣式表單文件的管理。
雖然很少用到，但這部分功能也暴露給了開發者，通過 enyo.loader 可以實現加載代碼包并且處理依賴關系。
OOP 系統
Enyo 實現 OOP 的方式是 Type+Component 模式，這基本可以認為是 Class 和 Object 的別名。
Enyo 的 Type 系統是 Enyo 提供的一種類型系統，一切 Enyo 框架內的組件都必須遵循 Type 系統來注冊自己。
Component 系統則是與 Type 系統密不可分的，任何 Component 都必須有自己的指定 Type，Enyo 正是通過這種方式保證模塊化的。
以下是來自 Enyo 官方網站的一個注冊類型實例。
enyo.kind ({
name: ”Hello”,
kind: enyo.Control,
components:
[
{name: "hello"， content: "Hello From Enyo"， ontap: "helloTap"},
{tag: "hr"}
],
helloTap: function ()
{
this.$.hello.addStyles (“color: red”);
}
});</pre>
</div>
值得注意的是，Enyo 可以簡單地將幾個 Component 組合，形成新的 Component 類型。
Enyo 注冊類型之后，則可以直接通過 new 來創建 Component。
在 kind 函數接受的 JSON 描述中，kind 屬性起到了等同于指派父類的作用。
擴展 API
如同每一個 JS 框架做的那樣，Enyo 也有對 XHR、Cookie、事件、異步等一些 HTML DOM API 做了擴展，這樣可以減輕 Enyo 的開發者的負擔。
比較特別的擴展是 Enyo 對于手勢的封裝，Enyo 提供了 10 種手勢：up、down、tap、move、enter、leave、hold、release、holdpulse、flick。這些基本涵蓋了所有的單點觸控手勢。
scroll 系統
在 Enyo 中最簡單的支持滾動的方法是直接使用 Scroller 和 TouchScrollStrategy，Scroller 提供了基本的滾動行為，TouchScrollStrategy 提供對手勢的基礎支持。
實際上 Enyo 暴露了不同層次的 API，最底層的是 ScrollMath 類型，它定義了一個效果比較良好的滾動所用到的數學和物理常量以及算法。
ScrollStrategy 則是一個抽象類，它規定了手勢與 Scroller 之間的關系，如果不使用原生 TouchScrollStrategy 的話，則可以自由定義事件和滾動的觸發關系。
思考
Enyo 作為一個已被正式商用的移動應用開發框架，無疑是值得后來者學習的，包括其他基于 Web 平臺的操作系統、試圖為 hybrid 服務的 Web 框架以及類似 PhoneGap 的 HTML 應用殼程序。一些 Enyo 受到詬病之處，也值得參照和避免。
Enyo 中可以總結一些移動應用框架的設計原則。
盡量保持原生風格。在框架設計上，采用顛覆性的風格是危險和得不償失的，應當盡量貼近原生 API 的命名風格和設計風格。
提供多層次的 API。既給初級用戶提供能夠簡單使用的 API，又給高級用戶提供足夠靈活的 API，當兩者矛盾之時，可以通過暴露不同層次的 API 來實現。
節省命名空間。如非必要，盡量不污染全局命名空間。
支持觸屏設備。現有局面下，移動框架的主要競爭焦點在于觸屏的支持，尤其是手勢和滾動效果很大程度決定了框架的優劣。
考慮開發者多樣性。Web App 的開發者包括傳統的前端人員和一部分移動開發工程師，設計框架時過于傾斜將會導致一部分開發者流失，盡量提供給用戶多種選擇更為合理。
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！