立方 发表于 2013-2-4 02:32:20

讲解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:

[*]<div>Hello World</div>
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:

[*]<span class="a-css-class" style="color: purple;">Hello World</span>
我们可以像使用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的信息请参考 “EnyoBasics基础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);
上面的代码会渲染出下面的效果:

http://images.51cto.com/files/uploadimg/20110704/1102230.pngEnyo和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"});
这种代码的一致性使我们很容易记住语法.
【编辑推荐】

[*]webOS发布新的应用程序开发框架Enyo
[*]惠普正式向开发者提供beta版webOS 3.0 SDK
[*]在Enyo框架下安装webOS 3.0 SDK教程
[*]在Enyo框架下编写webOS的“hello world！”
页: [1]
查看完整版本: 讲解webOS开发的Enyo基础