講解webOS開發的Enyo基礎
這個文章和下一篇文章Enyo基礎 – Kinds(種類), Components(組件), and Controls(控件)介紹了一些框架的基礎概念. 我們假設作為一個Enyo開發者的你, 至少了解一些web開發的基礎, 所以我們從與Enyo開發相關的HTML和JavaScript說起.
Enyo和HTML (Controls)
Control是一個基本的Enyo對象. Control工作原理各DOM節點有些類似; 事實上, 每個Control通常會轉換成一個DOM的節點.
這里我們創建一個Control并把它渲染到body中:
- enyo.create({
- content: "Hello World"
- }).renderInto(document.body);
這小段代碼會產生下面的HTML:
Control對象類似于一個DOM節點，你可能給它指定CSS名稱和樣式, 你也可以選擇生成哪種類型的節點. (注意：在HTML中使用”class”來指定CSS名稱, 不過class是JavaScript中的關鍵詞, 所以Enyo規定使用”className”.)
- enyo.create({
- nodeTag: "span",
- className: "a-css-class",
- style: "color: purple;",
- content: "Hello World"
- }).renderInto(document.body);
這會產生下面的HTML:
我們可以像使用DOM節點一樣嵌套使用control.
- enyo.create({
- components: [
- {content: "I'm in a container"},
- components: [
- {content: "I'm in a container that's in the container."}
- ]},
- {content: "I'm in the first container."}
- ]
- }).renderInto(document.body);
(注意我們在”components”塊中定義control. Control kind派生自Component kind, 所以component是一個比control更基礎的對象. 因而components塊可以既包含Control對象，又包含非control對象.更多關于components 和control的信息請參考 “Enyo Basics基礎kind, Components和Control”.)
為什么要為JavaScript生成HTML困惑呢? 我們的目標是去掉大家對Enyo的神秘色彩; 一旦我們開始創建程序, 我們將會發現使用control而不是HTML會減少很多問題.
例如, 一個明顯的好處是control中可以裝入很多復雜的渲染和行為:
- enyo.create({
- components: [
- // button with custom graphics
- {kind: "Button"},
- // input box with special features like hinting and graphic fx
- {kind: "FancyInput"},
- // one-of-many selector with custom graphics
- {kind: "RadioGroup", components: [
- {label: "Alpha"},
- {label: "Beta"},
- {label: "Gamma"}
- ]}
- ]
- }).renderInto(document.body);
上面的代碼會渲染出下面的效果:
Enyo和JavaScript (Kinds)
使用函數和prototype，JavaScript原生的支持對象模板和繼承. 這里是一個標準的JavaScript用法:
- // 一個對象構造函數
- MyObject = function() {
- this.data = [];
- };
- MyObject.prototype.toString = function() {
- return this.data.join(", ");
- };
- //另外一個對象構造函數, 在***個基礎上建立
- MySpecialObject = function() {
- MyObject.apply(this, arguments);
- };
- MySpecialObject.prototype = new MyObject();
- MySpecialObject.prototype.toNumber = function() {
- return this.data.length;
- };
- //創建實例
- mso = new MySpecialObject();
在保持JavaScript面向對象特性的同時, Enyo用緊湊的語法提供了一個產生構造函數(對象模板)的方法. 這種方法構建的Constructor有一些特性,我們叫它 kinds. 這種用來創建kind的方法叫做enyo.kind. 這里是一個enyo.kind的例子:
- // 一個kind
- enyo.kind({
- name: "MyKind",
- constructor: function() {
- this.data = [];
- },
- toString: function() {
- return this.data.join(", ");
- }
- });
- // 在***個kind的基礎上建立的又一個kind
- enyo.kind({
- name: "MySpecialKind",
- kind: "MyKind",
- toNumber: function() {
- return this.data.length;
- }
- });
- // 創建一個實例
- msk = new MySpecialKind();
(注意: 我們為什么使用”kind”? 這些constructor不算是types或者classes, 而是一種特別的Object. 在db8中也有相似的概念, db8的record schema也叫做kind. 而且JavaScript使用原型繼承基于類的繼承, 所以在Enyo中使用”class” 會使用產生困惑.)
有一點很重要：enyo.kind并不神奇–它執行普通的步驟來產生一個constructor,只是隱藏了樣板文件.
這個例子中有幾點需要注意:
kind的名稱是在屬性塊中指定的. 這個名稱將會變成一個全局的變量用來引用kind. 把名稱放在塊中，可以很容易的使用namespace(命名空間). 例如:
- enyo.kind({name: "Super.Special.Kind"});
Enyo會自動創建namespaces Super和Super.Special, 且 Super.Special.Kind將引用到新創建的constructor.
初始化代碼放在constructor方法中. 這和***個例子中的MyObject方法體非常類似. 主要的區別是當繼承自kind時， constructor 方法并不被調用 (如果你仔細看***個例子, 你可以發現調用MyObject來為MySpecialObject創建prototype, MySpecialObject最終在自己的prototype中創建了一個外部的data數組.)
為了創建一個繼承自舊的kind的新kind, 需要在新kind的kind屬性中指定舊kind的名稱. 上面的例子中, MySpecialKind繼承自MyKind.
剛開始，可能這些kind看起來很困惑, 但歸根到底: 不管什么時候，我們創建一個東西, constructor或者實例, 我們需要說明是以哪個kind為基礎. 創建一個實例時我們可以這么做:
- enyo.create({kind: "aKind"});
(注意: enyo.create的輸入是一個JavaScript對象，描述了要創建了對象. 這種輸入的kind叫做”property block” 或”property bag”.)
同樣的,在已存在的kind上創建一個新的kind, 這么做:
- enyo.kind({kind: "aKind"});
這種代碼的一致性使我們很容易記住語法.
