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