講解webOS開發(fā)的Enyo基礎(chǔ)
這個文章和下一篇文章Enyo基礎(chǔ) – Kinds(種類), Components(組件), and Controls(控件)介紹了一些框架的基礎(chǔ)概念. 我們假設(shè)作為一個Enyo開發(fā)者的你, 至少了解一些web開發(fā)的基礎(chǔ), 所以我們從與Enyo開發(fā)相關(guān)的HTML和JavaScript說起.
Enyo和HTML (Controls)
Control是一個基本的Enyo對象. Control工作原理各DOM節(jié)點有些類似; 事實上, 每個Control通常會轉(zhuǎn)換成一個DOM的節(jié)點.
這里我們創(chuàng)建一個Control并把它渲染到body中:
- enyo.create({
- content: "Hello World"
- }).renderInto(document.body);
這小段代碼會產(chǎn)生下面的HTML:
Control對象類似于一個DOM節(jié)點，你可能給它指定CSS名稱和樣式, 你也可以選擇生成哪種類型的節(jié)點. (注意：在HTML中使用”class”來指定CSS名稱, 不過class是JavaScript中的關(guān)鍵詞, 所以Enyo規(guī)定使用”className”.)
- enyo.create({
- nodeTag: "span",
- className: "a-css-class",
- style: "color: purple;",
- content: "Hello World"
- }).renderInto(document.body);
這會產(chǎn)生下面的HTML:
我們可以像使用DOM節(jié)點一樣嵌套使用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更基礎(chǔ)的對象. 因而components塊可以既包含Control對象，又包含非control對象.更多關(guān)于components 和control的信息請參考 “Enyo Basics基礎(chǔ)kind, Components和Control”.)
為什么要為JavaScript生成HTML困惑呢? 我們的目標(biāo)是去掉大家對Enyo的神秘色彩; 一旦我們開始創(chuàng)建程序, 我們將會發(fā)現(xiàn)使用control而不是HTML會減少很多問題.
例如, 一個明顯的好處是control中可以裝入很多復(fù)雜的渲染和行為:
- 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)
使用函數(shù)和prototype，JavaScript原生的支持對象模板和繼承. 這里是一個標(biāo)準(zhǔn)的JavaScript用法:
- // 一個對象構(gòu)造函數(shù)
- MyObject = function() {
- this.data = [];
- };
- MyObject.prototype.toString = function() {
- return this.data.join(", ");
- };
- //另外一個對象構(gòu)造函數(shù), 在***個基礎(chǔ)上建立
- MySpecialObject = function() {
- MyObject.apply(this, arguments);
- };
- MySpecialObject.prototype = new MyObject();
- MySpecialObject.prototype.toNumber = function() {
- return this.data.length;
- };
- //創(chuàng)建實例
- mso = new MySpecialObject();
在保持JavaScript面向?qū)ο筇匦缘耐瑫r, Enyo用緊湊的語法提供了一個產(chǎn)生構(gòu)造函數(shù)(對象模板)的方法. 這種方法構(gòu)建的Constructor有一些特性,我們叫它 kinds. 這種用來創(chuàng)建kind的方法叫做enyo.kind. 這里是一個enyo.kind的例子:
- // 一個kind
- enyo.kind({
- name: "MyKind",
- constructor: function() {
- this.data = [];
- },
- toString: function() {
- return this.data.join(", ");
- }
- });
- // 在***個kind的基礎(chǔ)上建立的又一個kind
- enyo.kind({
- name: "MySpecialKind",
- kind: "MyKind",
- toNumber: function() {
- return this.data.length;
- }
- });
- // 創(chuàng)建一個實例
- msk = new MySpecialKind();
(注意: 我們?yōu)槭裁词褂?rdquo;kind”? 這些constructor不算是types或者classes, 而是一種特別的Object. 在db8中也有相似的概念, db8的record schema也叫做kind. 而且JavaScript使用原型繼承基于類的繼承, 所以在Enyo中使用”class” 會使用產(chǎn)生困惑.)
有一點很重要：enyo.kind并不神奇–它執(zhí)行普通的步驟來產(chǎn)生一個constructor,只是隱藏了樣板文件.
這個例子中有幾點需要注意:
kind的名稱是在屬性塊中指定的. 這個名稱將會變成一個全局的變量用來引用kind. 把名稱放在塊中，可以很容易的使用namespace(命名空間). 例如:
- enyo.kind({name: "Super.Special.Kind"});
Enyo會自動創(chuàng)建namespaces Super和Super.Special, 且 Super.Special.Kind將引用到新創(chuàng)建的constructor.
初始化代碼放在constructor方法中. 這和***個例子中的MyObject方法體非常類似. 主要的區(qū)別是當(dāng)繼承自kind時， constructor 方法并不被調(diào)用 (如果你仔細(xì)看***個例子, 你可以發(fā)現(xiàn)調(diào)用MyObject來為MySpecialObject創(chuàng)建prototype, MySpecialObject最終在自己的prototype中創(chuàng)建了一個外部的data數(shù)組.)
為了創(chuàng)建一個繼承自舊的kind的新kind, 需要在新kind的kind屬性中指定舊kind的名稱. 上面的例子中, MySpecialKind繼承自MyKind.
剛開始，可能這些kind看起來很困惑, 但歸根到底: 不管什么時候，我們創(chuàng)建一個東西, constructor或者實例, 我們需要說明是以哪個kind為基礎(chǔ). 創(chuàng)建一個實例時我們可以這么做:
- enyo.create({kind: "aKind"});
(注意: enyo.create的輸入是一個JavaScript對象，描述了要創(chuàng)建了對象. 這種輸入的kind叫做”property block” 或”property bag”.)
同樣的,在已存在的kind上創(chuàng)建一個新的kind, 這么做:
- enyo.kind({kind: "aKind"});
這種代碼的一致性使我們很容易記住語法.
