Qomo之快速上手
2008-10-14 12:31 乱世文章 阅读(186) 评论(0) 编辑 收藏 举报Qomo之快速上手
-----
我发现,无论是哪种成功的语言,总是有一个快速入门的读物,而无论它们本身是
如何的复杂、艰涩或难于理解。反过来,不成功的语言,总是带有一堆技术性十足、
充满了想象和预期的文档。后者的这些文档,有些甚至比代码还多,但是这同样未
能挽救它们的失败。
于是,我同样地看到了Qomo。我发现Qomo发布过的文档中,总是有大量无法让人理
解的东西。如果你准备写一门语言,那么可能Qomo的文档和代码会给你许多启发。
而如果你只是打算用它,那么大概会变得很痛苦。然而,如果一个人因为想写一门
语言而去了解Qomo,那么他大概不会再使用Qomo,这是因为各自存有不同的目标。
于是,我想Qomo小组应该为“一个普通的使用者”而写一些东西。例如现在这篇。
一、装载Qomo
-----
我们计划在将来为各种JavaScript应用环境加入一个定制的loader,用来装入Qomo
的其它部分。但现在,Qomo还主要是用在浏览器中。所以他的装载代码是这样:
- <!-- in test.html -->
- <script src="js/Qomo.js"></script>
在这个示例中,我们假设你网站中的文件是按如下方式组织的:
- <your_site>/test.html
- <your_site>/js/Qomo.js
- <your_site>/js/Build/*.*
- <your_site>/js/Components/*.*
- <your_site>/js/Framework/*.*
- <your_site>/js/Qomo.js
二、创建一个类,及其实例
-----
Qomo主要扩展了一些面向对象的语法。最简单的用法,总是包括一个类注册的函
数。例如:
- // 1. 声明一个构造器
- function MyObject() {
- // ..
- }
- // 2. 类注册(创建这个类TMyObject)
- TMyObject = Class(TObject, 'MyObject');
- // 3. 创建实例的两种(效果上是一样的)
- obj1 = new MyObject();
- obj2 = TMyObject.Create();
的第一个参数也可以TMyObject,或者其它任何的、Qomo识别的类。
三、如果你想为对象添加一些私有的属性(attributes)
-----
如果你想这样做,那么你找对了东西,Qomo天生就是这种“私有”和“稳藏”而
设计的。这在上面的代码中,修改一下构造器就可以做到:
- // 构造器
- function MyObject() {
- Attribute(this, 'Name', 'MyObject', 'r');
- Attribute(this, 'Size', 100);
- }
- // 类
- TMyObject = Class(TObject, 'MyObject');
- // 实例
- obj1 = new MyObject();
- obj2 = new MyObject();
- // 两个实例的私有属性不同
- obj1.set('Size', 20);
- alert(obj1.get('Size')); // 20
- alert(obj2.get('Size')); // 100
四、让Qomo在网页中变得更有用
-----
对于网页制作者来说,他们关心的只是网页中如何方便地使用Qomo,而并不是上面这些类、
子类如何创建。大多数情况下来说,的确如此。
而简单地说来,我们可能在关心在网页中如何存取一个页面上的东西,比如一个用ID标识
的对象。在Qomo中,这比较方便。
- <!-- demo.html -->
- <script src="js/Qomo.js"></script>
- <body>
- <input id="pwd" value="my password in here">
- </body>
- <script>
- // (*注)
- // $import('Components/Components.js');
- el = THtmlController.Create('pwd');
- alert(el.get('value'));
- </script>
(*注)在V2.1以前版本的Qomo缺省核心库中是不包括Components.js的。这种情况下需要使
用$import()来装载Components。但目前你正使用的这个版本,应该已经缺省包含了。在任
何情况下,你可以自行发布一个Qomo的集成(build)版本。这需要你用Qomo包中的:
Build/TestCase/T_CustomBuilder.html
来产生一个自己需要的Qomo代码包。记得选中“载入扩展界面控件”就好了。
上面这个例子说明,你可以为任意界面上的HTML元素添加一个THtmlController控制。它封
装了界面上的HTML元素的一些细节,如果你需要访问原始的HTML属性,那么使用el.get()
就可以了。
五、让Qomo做一个Html的控件
-----
更进一步的说,你可以将任何界面上的一组Elements封装成为一个Qomo的类。这个类可以认
识界面上的这些组合在一起的东西是一个控件,或者其它。一个较为浅显的例子是:我们可
以将一个div与一个edit放在一起,使它变成一个TLabledEdit。这是个不错的主意:
- <script src="js/Qomo.js"></script>
- <body>
- <div id="edLabled"><span>hello, TLabledEdit.</span><br>
- <input name="edit" value="...">
- </div>
- </body>
- <script>
- // 后续将说明的代码
- // ……
- </script>
那么我们到底如何将它实现为一个Html控件呢?首先,我们要在准确地找到所有要控制的
元素。下面是这样的一个基本框架:
- function LabledEdit() {
- Attribute(this, '_label', null, 'r');
- Attribute(this, '_edit', null, 'r');
- this.get_label = function() {
- return this.assignedElement.children(0);
- }
- this.get_edit = function() {
- return this.assignedElement.children('edit');
- }
- // .. 其它的实现代码
- }
接下来,我们可以尝试为这个控件添加几个特性,以直接控制界面上的东西:
- function LabledEdit() {
- // (略, 同上...)
- this.getLableText = function() {
- return this.get('_label').innerText;
- }
- this.setLableText = function(v) {
- this.get('_label').innerText = v;
- }
- this.getvalue =
- this.getValue = function() {
- return this.get('_edit').value;
- }
- this.setvalue =
- this.setValue = function(v) {
- this.get('_edit').value = v;
- }
- }
然后注册它:
- TLabledEdit = Class(THtmlController, 'LabledEdit');
- var ed = TLabledEdit.Create('edLabled');
- alert( ed.get('LableText') );
- ed.set('LableText', 'my lable:');
- ed.set('Value', 'hello, world.');
六、如此麻烦地做一个组件有什么价值?
-----
有什么价值呢?如果我们的确需要控制这么一个“看起来象组件的HTML代码块”,那么
我们直接用几行脚本就可以办到。例如:
- document.getElementById('edLabled').children(2).value = 'hello, world.';
- // ...
然而,组件系统的真正价值在于复用,类继承的价值亦复如此。如果偏离了复用来讨论
上述的一切,那无异于隔靴搔痒。我们来想象一下,如果我们需要一个使用FieldSet来
做标签的edit,那么又该如何做呢?更多的Editor?
好,我们在Qomo中基于上面的TLabledEdit代码来做一个。
- <body>
- <fieldset id="edLabled2">
- <legend>请输入:</legend>
- <input name="edit" value="...">
- </fieldset>
- </body>
- <script>
- function FieldSetEdit() {
- }
- TFieldSetEdit = Class(TLabledEdit, 'FieldSetEdit');
- // 示例
- var ed = TFieldSetEdit.Create('edLabled2');
- ed.set('Value', 'hello, world.');
- </script>
是的。尽管两个组件的表达形式完全不一样,但是由于我们分离了逻辑实现与界面表
面,所以我们只需要调整少数(甚至于象这样无需修改)就可以适应变化了。
Oh。有高手看出来了,我实际上偷了个懒:这里的edLabled2的“HTML结构”与前一
种没有本质的不同。是的,好吧,为了让你相信Qomo具有“节省代码”的能力,那么
我们就弄复杂一点。
七、将一个控制层的组件,复用在其它框架库中
-----
我们找一个相对复杂的Edit,例如我们拿一个YahooUI中的、能自动完成的Edit。大概,
我们要装入一个YahooUI,然后初始化它。最后,再装入我们的代码。OK,就象这样:
- <!-- load yui -->
- <link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
- <link rel="stylesheet" type="text/css" href="yui/build/autocomplete/assets/skins/sam/autocomplete.css" />
- <script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
- <script type="text/javascript" src="yui/build/animation/animation-min.js"></script>
- <script type="text/javascript" src="yui/build/datasource/datasource-min.js"></script>
- <script type="text/javascript" src="yui/build/autocomplete/autocomplete-min.js"></script>
- <!-- yui component, code copy from yui examples -->
- <body class="yui-skin-sam">
- <h3>Enter a state:</h3>
- <div id="myAutoComplete">
- <input id="myInput" type="text">
- <div id="myContainer"></div>
- </div>
- <script type="text/javascript">
- YAHOO.example.Data = {
- arrayStates: [
- "Alabama",
- "Alaska",
- "Arizona",
- "Arkansas",
- "California",
- "Colorado",
- "Connecticut"]
- };
- YAHOO.example.BasicLocal = function() {
- // Use a LocalDataSource
- var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates);
- // Optional to define fields for single-dimensional array
- oDS.responseSchema = {fields : ["state"]};
- // Instantiate the AutoComplete
- var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
- oAC.prehighlightClassName = "yui-ac-prehighlight";
- oAC.useShadow = true;
- return {
- oDS: oDS,
- oAC: oAC
- };
- }();
- </script>
- </body>
- <!-- end of yui load -->
- <!-- 续上例 -->
- <!-- load qomo -->
- <script src="js/Qomo.js"></script>
- <!-- ours component and demo -->
- <script>
- function LabledEdit() {
- // (同上, 略...)
- }
- TLabledEdit = Class(THtmlController, 'LabledEdit');
- // 新的TYuiEdit组件
- YuiEdit = function() {
- this.get_label = function() {
- return this.assignedElement.previousSibling;
- }
- this.get_edit = function() {
- return this.assignedElement.children.tags('input')(0);
- }
- }
- TYuiEdit = Class(TLabledEdit, 'YuiEdit');
- // 以下示例代码
- var ed = TYuiEdit.Create('myAutoComplete');
- alert(ed.get('LableText'));
- ed.set('Value', 'hello, world.');
未发生改变。而我们使用了非常复杂的——当然我也认为是非常不错的——Yahoo UI组件。
六、构造更深层次的类
-----
如同上面的示例一样,我们总有可能在JavaScript中使用继承层次很深的类。如果并且JavaScript自
身的(原型继承的)方法来实现,那么我们需要调用父类的方法时就会比较麻烦。而在Qomo中,扩展
了调用父类方法的inherited(),使得这个过程变得很简单。
- // 构造器
- function MyObject() {
- Attribute(this, 'Size', 100);
- }
- function MyObjectEx() {
- this.getSize = function() {
- return 2 * this.get(); // <- 在特性(attribute)读写器(方法)中调用缺省的或父类的读写方法
- }
- this.aMethod = function() {
- alert('hi, in MyObjectEx');
- }
- }
- function PowerObject() {
- this.aMethod = function() {
- this.inherited(); // <- 在方法中调用父类方法
- alert('hi, in PowerObject');
- }
- }
- // 类注册
- TMyObject = Class(TObject, 'MyObject');
- TMyObjectEx = Class(TMyObject, 'MyObjectEx');
- TPowerObject = Class(TMyObjectEx, 'PowerObject');
- // 示例
- obj = new MyObjectEx();
- pw = new PowerObject();
- alert( obj.get('Size') );
- pw.aMethod();
七、我需要Ajax!
-----
当然,我知道很多人需要Ajax,尽管也有相当一部分人不知道为什么他们需要。事实上,在
Qomo中的Ajax用起来很简单。
- ajx = new Ajax();
- ajx.open("GET", 'http://www.sina.com.cn/', false);
- ajx.send(null);
- text = ajx.responseText;
- alert('the page size is:' + text.length);
白如何用一个函数来响应ajx.onreadystatechange,以及使用ajx中的'POST'方法来获取一
个远程数据。因此我就不细讲这些内容了,下面讨论Qomo中一个更有用的封装:Ajax池。
其实它真实的名字,是叫HttpGetMachine。我们先看一下不使用Ajax池的情况:
- function doAction(url, ctx) {
- alert( 'Url: %s /nLength: %s'.format(url, ctx.length));
- }
- function doStateChange(state) {
- if (state != 4) return; // wait downloaded.
- var ajx = this.get('XMLHTTP');
- if (ajx.status!=200 && ajx.status!=304 && ajx.status!=0) return; // staus is failed.
- doAction(this.data.src, ajx.responseText);
- }
- // 测试,不使用Ajax池
- var ajx = new HttpGetMachine();
- ajx.OnStateChange.add(doStateChange);
- ajx.data = { src: 'http://www.sina.com.cn/' };
- ajx.OnStateChange('resume');
- <!-- 在网页中,用于显示输出 -->
- <body>
- <textarea id="txt" style="width:800px; height:600px"></textarea>
- </body>
- <script>
- function doAction(ord, url, ctx) {
- var txt = document.getElementById('txt');
- var str = 'machie(%s) to process a url/n/
- - Url: %s /n/
- - Length: %s /n/n';
- txt.value += str.format(ord, url, ctx.length);
- }
- function doStateChange(state) {
- if (state != 4) return; // wait downloaded.
- with (this.get('XMLHTTP')) {
- switch (status) {
- case 200:
- case 304:
- case 0:
- doAction(this.id, this.data.src, responseText); break;
- default:
- // staus is failed.
- alert('failed: ' + status)
- }
- }
- }
- // pool的处理函数. id仅用于识别在处理中的mac序号,不是必须的.
- var id = 1;
- function doOnStateChange_pool(mac, state) {
- if (!mac.id) mac.id = id++; // 为machine做一个标识
- doStateChange.call(mac, state);
- }
- // 池化管理 - 创建处理池(允许最多3个处理机实例),并填入数据
- var pool = new Pool(THttpGetMachine, 3);
- pool.OnStateChange.add(doOnStateChange_pool);
- pool.push( { src: 'http://www.sina.com.cn/' } );
- pool.push( { src: 'http://www.snda.com.cn/' } );
- pool.push( { src: 'http://www.tom.com/' } );
- pool.push( { src: 'http://www.google.com/' } );
- // more...
- </script>
Ajax池实质上是帮助用户管理THttpGetMachine的创建与调度,由pool来决定什么时候传给
哪个具体的Machine以数据,并如何响应这个数据的处理状态。
九、其它的东西
-----
Qomo V2.1将原来的LocalDB、Graphi等全部从代码包中移除了,我们将重写它。这个工作很快
就会开始。仅从复杂性上讲,V2.1有一个不错的开端,为此我们还移除了现有的大多数Controls。
Qomo V2.x有一个并行的项目,叫QoBean。QoBean目前还没有发布一个正式版本,但它已经有非
常好的表现:它比Qomo少%30多的代码,但性能却提供了30~40%。这个版本将会合并到Qomo V3中
去,以替代现有的Qomo内核。
Qomo中有一些小工具,例如Common/ParserLite.js,以及TimeMachine.js(不是时光穿梭机啊)。
还有一些用于检测效率,例如Debug/TestCase/RegExpPerformanceTool.html。当然,最重要的,
还是位于根目录下的Build工具,和一个相对无素的示例:Samples.html。
在FF3里,你必须使用根目录下的Samples.html来launch其它的演示,而不能从硬盘上直接打开
它们。这是因为FF3调整了本地文件的Ajax存取安全性设定。
在Qomo里,对象还有一些更为复杂的用法。例如注册接口,以及切面系统等。这些比较高级的用法,
你可以在Qomo的代码包中去查找示例,或者在Blog中找到有关机制的说明文档。
直接下载发布包:
http://download.csdn.net/source/689574
http://download.csdn.net/source/689579
Qomo最新的代码:
https://qomo.svn.sourceforge.net/svnroot/qomo/trunk
QoBean最新的代码:
https://qomo.svn.sourceforge.net/svnroot/qomo/qobean