Qomolangma框架库(一):概述、工具、异常、调试与分析
================================================================================
Qomolangma OpenProject v1.0
类别 :Rich Web Client
关键词 :JS OOP,JS Framwork, Rich Web Client,RIA,Web Component,
DOM,DTHML,CSS,JavaScript,JScript
项目发起:aimingoo (aim@263.net)
项目团队:../../Qomo_team.txt
有贡献者:JingYu(zjy@cnpack.org)
================================================================================
一、概述:Qomolangma中的框架库(v0.1)
~~~~~~~~~~~~~~~~~~
在UI层方面,Qomo一直没有足够的进展,因此Qomo在beta 1之前公布的代码看起来就象是一个语言实验
工程,而不象是一个面向应用的项目。
其实Qomo的前身(WEUI)本身就是围绕UserInterface Library来提出的,因此WEUI的确有自己的UI层。此
外,它也有完整的DB和Graphics层(及一个VML的实现)。但是Qomo对UI层提出的目标与WEUI并不一致,因
此这直接导致了“Qomo需要一个新的UI库”的结果。
Qomo在beta 2中包含部分UI、DB层的代码,但是并不推荐将它归为Qomo的一个组成部分并应用。——尽管
这些的确可以在Qomo下运行得很好,开发人员可以从中得到很多的思想与技术实现。——事实上Qomo也从
WEUI的UI和Graphics框架的基础框架上借鉴了一些东西。
但这些都不是这一组文章要讨论的内容。
因为在Qomo的beta 2之后,除了一些底层语言体系的修补之外,Qomo团队将开始有关框架库(并不是UI库)
的开发工作。这些工作包括:
- 公共框架类库: Framework/Classes.js, Framework/Common/*
- 日志、调试、分析和单元测试框架:Framework/Debug/*
- DOM、CSS兼容层框架:Components/Compat/*
二、Qomo的基础库与基础类库
~~~~~~~~~~~~~~~~~~
Qomo的基础库是一些工具函数,或者原生(native)的JavaScript类。它的地位与RTL中的JSEnhance.js
是相同的,但基础库并不只是针对JavaScript进行增强。
Qomo的基础类库建立自Qomo的OOP框架。也就是说,至少是继承自TObjecct的类。基础类库表现为一些工
具类、容器类、全局(单例)类和一些其它抽象层次较低的类。
Qomo的基础库与基础类库位于:
Framework/Common/*
它通过一个包文件载入:
Framework/Classes.js
三、基础库中的工具函数
~~~~~~~~~~~~~~~~~~
基础库中的工具函数(目前)包括在:
- 系统实用工具: Framework/Common/SysUtils.js
- 对象实用工具: Framework/Common/ObjUtils.js
- 类型或数据结构定义及转换工具: Framework/Common/ConvUtils.js
三个文件中。
其中,ObjUtils.js和ConvUtils.js虽然包括在Qomo Beta2中,但事实上没有正式发布。——很多代码
已经移除;部分代码未经测试也没有相关的说明。因此本文先不讲述它们。
SysUtils.js中的目前只发布了4个工具函数。事实上他们在我以前的工程中大量使用过。下面做一些
简单地介绍。
1. createUniqueID()
----------
该函数产生一个唯一的标识符。一般来说,他在当前的Web页(包括多帧)中都是不重复的。它基于一
个随机数产生的算法规则:即使是在同一时刻调用两次随机数,也会因种子的变化而产生不同的值。因
此拼接随机数和日期值通常会得到一个唯一的标识。——如果对随机数的算法的设定出了问题,则另论。
2. createUniqueVar()
----------
UniqueID可以作为标识,但无法作为全局变量使用。而本函数则用声明一个全局变量,并且返回该变
量名。这个声明可以被delete删除以回收内存。例如:
------
function myFunc() {
// 创建并得到变量名
var name = createUniqueVar();
// 使用该变量
eval('name').value = 'abcdefgh';
// 删除该变量
eval('delete ' + name);
}
------
3. isVariant(varName)
----------
传入一个变量名,该函数会返回该变量名是否是一个变量。既可以是全局变量,也可以是局部变量。
例如:
------
function myFunc() {
alert(isVariant('myFunc'));
}
------
4. defined(aVariant)
----------
查看一个变量或值是否被声明过。例如:
------
var all = [1,,3,4];
function myFunc() {
for (var i=0; i<all.length; i++) {
if (defined(all[i])) {
alert(all[i]);
}
}
}
------
四、基础库中的异常与断言
~~~~~~~~~~~~~~~~~~
1. JavaScript中的异常基础
----------
在JavaScript语言中,创建异常对象的方法是:
e = new Error([number[, description]]);
你可以在创建时或者创建后抛出异常:
------
// 创建时抛出
throw new Error(100, 'this is exception - 100.');
// 创建后抛出
var e = new Error(101, 'this is exceptio - 101.');
throw e;
------
按照JavaScript的语言规范,你可以在try中捕获到异常后再次抛出。例如:
------
try {
// ...
}
catch (e) {
throw e; // 再次抛出
}
------
2. Qomo基础库中的异常
----------
我们发现标准JS中的异常很难管理。例如异常的编号,或者显示信息时大多使用直接声明
的字符串。因此,Qomo约定一个异常可以用两个成员的数组表示。例如:
EAccessInvaildClass = [8109, 'Class invaild: lost typeinfo!'];
在第二个成员(字符串)中允许使用%s通配符。例如:
EAttributeCantRead = [8112, 'The "%s" attribute can/'t read for %s.'];
Qomo认为这是一个标准的异常记录/对象的结构。这种定义是非常取巧的:
- 如果不使用Qomo的异常框架,那么标准JS中将会把数组转换成字符串,这时得到的信息
是可以阅读的。
- 如果使用Qomo异常框架,那么由于Qomo替换了Error()类,因此将生成更友好的信息。
- 在JSEnhance.js中,Qomo再次替换了Error()类,这使得%s可以被处理,从而使动态的
组织异常信息成为非常便利的事。
在RTL/Error.js中,Qomo重写了Error()类。这使得Error()有以下构造形式:
e = new Error();
e = new Error(number);
e = new Error(number, description);
e = new Error(number, description, instanceObj);
e = new Error(a_qomo_exp);
e = new Error(a_qomo_exp, instanceObj);
其中,instanceObj 表明一个关联到该异常的对象实例。但Qomo并不处理instanceObj, 只是
通过异常对象来传递它。这样可以使try .. catch捕获到的异常对象有一个instanceObj属性,
指向触发异常时送过来的一个“参考实例”。
而a_qomo_exp表是一个按qomo的规则声明的异常数组(参阅前面的内容)。这样我们就可以用下
面的代码来简单的触发一个异常:
throw new Error(EAccessInvaildClass);
如果系统未装载过Error.js,那么显示的信息将是:
---------------------------
错误: 8109,Class invaild: lost typeinfo!
---------------------------
如果系统已经装载过Error.js,那么显示的信息将是:
---------------------------
错误: Class invaild: lost typeinfo!
---------------------------
或者我们也可以这样使用带通配符的异常:
throw new Error(EAttributeCantRead.concat('get', 'Enumerator'));
如果我们装载过JSEnhance.js,那么显示的信息将是:
---------------------------
错误: The "get" attribute can't read for Enumerator.
---------------------------
这样,无论如何,我们都能给用户“相对友好”的错误信息。
3. Qomo基础库中的断言
----------
Qomo中的断言实现得非常简单。它其实就是一个Qomo的异常。如下:
---------------------------
var
EAssertFail = [8001, 'assert is failed./n/n%s'];
$assert = function (isTrue, info) {
if (!isTrue) throw new Error(EAssertFail.concat([info]));
}
---------------------------
由于Qomo有自己的异常实现,因此断言的显示将非常友好。
五、基础库中的性能分析工具(Profiler)
~~~~~~~~~~~~~~~~~~
Qomo在Debug.js单元中载入了一个Profiler工具,是分析代码性能的利器。它的一个
使用示例是:
Framework/Debug/TestCase/T_profiler.html
Qomo中的profiler使用起来非常方便,也可以使用多组的profiler。系统中单独初始
化了一个全局的$profilers,以方便使用。
1. 核心结构
----------
如果不考虑输出的效果,那么直接调用Qomo的profiler就可以得到它的核心结构和
使用流程了:
---------------------------
<!-- 载入Profiler类 -->
<script src='Framework/Debug/Profilers.js'></script>
<script>
// 在用户代码中插入分析语句, 然后执行
function myFunc() {
$profilers('myFunc').begin()
// your code ...
$profilers('myFunc').end()
}
myFunc();
// 输出分析结果
document.writeln($profilers);
</script>
---------------------------
但是这样输入的东西根本没有办法看。因此,Qomo提供一组工具来辅助使用profiler。
当然,你也可以定制它。——这个后面再讲。
2. 基础Dbg.Utils的简单使用
----------
使用Dbg.Utils.js是非常便捷的做法:
---------------------------
<!-- 载入Profiler类和调试用工具单元 -->
<script src='Framework/Debug/Profilers.js'></script>
<script src='Framework/Debug/Dbg.Utils.js'></script>
<script>
// 在用户代码中插入分析语句, 然后执行
// (同上, 略... )
// 重写$debug()函数
$debug.resetTo(function() {
arguments.join = Array.prototype.join;
document.writeln(arguments.join(''));
});
// 显示profiler信息
showProfiler($profilers);
</script>
---------------------------
注意这里有两处关键的细节。一是要求载入Dbg.Utils.js,至于它位于Profilers.js之前或者
之后并没有关系。
3. 为分析对象指定精确的标签
----------
在开始的示例里,我们用一对
---------------------------
$profilers('myFunc').begin()
$profilers('myFunc').end()
---------------------------
来开始和结束分析。这里的myFunc可以是任意字符,也可以是任意多的参数。这样,你可以
指定:
---------------------------
$profilers('myFunc', 'build').begin();
$profilers('myFunc', 'build').end();
$profilers('myFunc', 'execute').begin();
$profilers('myFunc', 'execute').end();
---------------------------
这样对一个函数的多组分析。也可以指定:
---------------------------
$profilers('myFunc', '1').begin();
$profilers('myFunc', '1').end();
$profilers('myFunc', '2').begin();
$profilers('myFunc', '2').end();
---------------------------
这样来表明步骤。
4. 处理递归
----------
接下来,对于递归的函数,你可以采取两种方法来处理它。其一是加标签,例如:
---------------------------
function calc(n) {
$profilers('calc', n).begin();
var v = n;
if (v > 0) {
v = n + calc(n - 1);
}
$profilers('calc', n).end();
return v;
}
calc(10);
---------------------------
第二种方法,则是借用profiler返回标志,例如:
---------------------------
function calc(n) {
var tag = $profilers('calc').begin();
var v = n;
if (v > 0) {
v = n + calc(n - 1);
}
$profilers('calc').end(tag);
return v;
}
calc(10);
---------------------------
这两种方法中,第一种分另产生不同的profiler记录项,因此采用标准方法处理即可;第二种
则产生同一记录项的多个记录值,对于这种情况,在Dbg.Utils.js中的showProfiler()展示了
如何处理。
5. 显示结果: $debug()的重写
----------
$debug()最初被声明在system.js中,用于直接向document输出调试信息。但是这样必然会
破坏网页的显示效果。——尤其profiler的信息量非常大。
因此,在Dbg.Utils.js中,我们重写了它。使它的输出被放到缓存中:
---------------------------
$debug = function() {
// ...
arguments.callee['$cached$'] += arguments.join('');
}
---------------------------
其中,arguments.callee直接向$debug()函数本身。使用callee而不是$debug自身,是避免
$debug()被再次重写。
我们还为$debug添加了一个方法resetTo()。这个方法传入一个函数,新函数要能够输出这些
被缓存的信息。——它在被resetTo()时将被自动调用一次。然后该新函数将替代原$debug()
在系统中的作用。
例如我们在面第二节中讲到的:
---------------------------
// 重写$debug()函数
$debug.resetTo(function() {
arguments.join = Array.prototype.join;
document.writeln(arguments.join(''));
});
showProfiler($profilers);
---------------------------
这个重写就是用于向document输出,它也被用在下面这个示例里:
Framework/Debug/TestCase/T_profiler.html
另外一处使用,则是在:
Components/QomoHierarchyPoster.html
它的写法是将信息显示到一个HTML元素中:
---------------------------
$debug.resetTo(function() {
arguments.join = Array.prototype.join;
document.getElementById('Qo_DBGINFO').insertAdjacentHTML(
'beforeEnd', arguments.join(''));
});
---------------------------
6. 显示结果: showProfiler()及其定制
----------
事实上,Dbg.Utils.js作为一个实用工具单元,可以完全不用载入到当前页面。这种情况下,
Profilers的功能依然是可用的。包括使用:
---------------------------
$profilers('your_tag').begin();
$profilers('your_tag').end();
---------------------------
这样的方法来记录profiler数据。因为$profilers这个全局对象是被创建在Profiles.js中的。
如果你不打算使用Dbg.Utils.js中的showProfiers()来显示结果。那么你可以自己写一个,例
如打开一个新窗口来显示。这时你只需要参考一下showProfiers()的代码即可:
---------------------------
function showProfiers(prof) {
var data = prof.toData();
// ...
}
---------------------------
这样从prof中得到的数据是如下的一种结构:
---------------------------
a_data_instance = {
'your_tag_1': [beginTime1, endTime1, beginTime2, endTime2, ...],
'your_tag_2': [...],
'your_tag_3': [...]
// ...
}
---------------------------
你只需要写代码去循环处理即可。——注意beginTime/endTime的值是Number类型的。如果你
要转换为Date()对象,那么可以“new Date(beginTime)”这样即可。
7. 在系统中处理多个Profilers()对象
----------
只要你愿意,你可以创建多个Profilers()对象,他们之间是没有干扰的。——当然,你也
可以只创建一个,并用不同的标签来分组显示它们。这一切只取决于你的选择。
如果你打算创建多个Profilers,那么大概的代码如下:
---------------------------
var prof1 = new Profilers();
var prof2 = new Profilers();
// prof1('tag').begin() ...
// ...
showProfiler(prof1);
showProfiler(prof2);
---------------------------
8. 清理profilers数据
----------
如果你要开始新一批的profilers分析。那么你应该清除一下原有的数据。但到目前为止,
Profilers()对象并没有提供clear()方法。——我认为不必须。
因此如果你需要清理数据,最好的方法就是重新创建一个。例如:
---------------------------
// 重新创建全局的分析器
$profilers = new Profilers();
---------------------------
六、Profilers与AOP的结合使用
~~~~~~~~~~~~~~~~~~
大概要为每一个函数去写.begin()和.end()会是一件让人痛苦的事,而且频繁地改动原先的
函数,也不是是一件什么好事。因此事实上在Profilers的使用示例中,我采用的都是AOP来
实现。在
Components/QomoHierarchyPoster.html
Framework/Debug/TestCase/T_profiler.html
这两个文件中,都可以看到AOP的用法。
其中,T_profiler.html载入了一个AOP_MyProf.js文件,这里的示例最为简单:
---------------------------
// 加入profiler相关的代码($profilers是全局对象)
var asp_import = new FunctionAspect($import, '$import', 'Function');
asp_import.OnBefore.add(function(o, n, p, a) {
with ($profilers(n, FN(a[0]))) {
set('url', a[0]);
a['$tag$'] = begin();
}
});
asp_import.OnAfter.add(function(o, n, p, a, v) {
$profilers(n, FN(a[0])).end(a['$tag$']);
});
---------------------------
我们看到asp_import就是一个为"$import()"创建的一个切面,这个切面的名字,就是"$import"。
所以我们在OnBefore和OnAfter中看到的参数n,值就是"$import"。
接下来,我们在OnBefore的事件处理函数中,添加了对每一次$import()调用的profiler分析。这
里传入的参数a,就是调用$import()时的arguments。所以a[0]就是$import()的文件名。——因为,
我们总是用“$import('a_js_url')”来导入文件的。
调用$profilers()时传入了两个标签。其中n总是"$import",而FN(a[0])则是取到URL未尾的文件名。
因此,相当于创建了一个名为"$import/a_js_filename"形式的标识。这在后面用showProfilers()
时就可以看到了。
接下来,由于我们还需要在showProfilers()时能显示一点数据,例如载入的实例的URL的完整径,
因此我们调用了set()方法。这段代码实际相当于:
---------------------------
asp_import.OnBefore.add(function(o, n, p, a) {
var prof = $profilers(n, FN(a[0]));
prof.set('url', a[0]);
a['$tag$'] = prof.begin();
});
---------------------------
prof.set('url', ...)这行代码可以为一个prof添加任意多的、任何名称的定制数据。这些数据
可以提供给showProfiler()来使用。——当然,你自己也可以写一个showProfiler()来处理这些
数据。
最后一行是为了处理在Qomo中将同一个.js文件导入多次。——"$import/a_js_filename"会重复,
从而看起来象是处理同一段代码(像对递归过程profiler)。——因此这里把prof.begin()返回的
标识放在a['$tag$']里。
这里用了一个取巧的方法:AOP事件中的参数a是调用被关注点时的参数arguments,因此对同一个
关注对象来说,OnBefore与OnAfter所使用的arguments也是同一个。所以当切面到达OnAfter时,
我们只需要处理成
---------------------------
$profilers(n, FN(a[0])).end(a['$tag$']);
---------------------------
就可以了。——a['$tag']就是我们需要使用的begin()返回值。而且,我们也不需要去delete这
个属性。因为当函数运行结束后,arguments将自动被javascript引擎销毁。
同样的技术也被用在
Components/QomoHierarchyPoster.html
这个文件中。不过QomoHierarchyPoster.html在profilers中值得言讲的,却在于它对combine()
的活用。
在QomoHierarchyPoster.html中,我们处理了五个切面,并试图对它们做性能分析:
---------------------------
var asp_getTopoString = new FunctionAspect(getTopoString, 'getTopoString', 'Function');
var asp_LinesString = new FunctionAspect(getLinesString, 'getLinesString', 'Function');
var asp_drawTopo = new FunctionAspect(drawTopo, 'drawTopo', 'Function');
var asp_active = new FunctionAspect(activeTopoInCanvas, 'activeTopoInCanvas', 'Function');
var asp_cache = new FunctionAspect(cacheTargetByNodes, 'cacheTargetByNodes', 'Function');
---------------------------
而这时,我们只为一个切面的OnBefore()和OnAfter()添加了事件处理句柄:
---------------------------
asp_getTopoString.OnBefore.add(function(o, n, p, a) {
a["$tag$"] = $profilers('$prof', p, n).begin();
});
asp_getTopoString.OnAfter.add(function(o, n, p, a, v) {
$profilers('$prof', p, n).end(a["$tag$"]);
});
---------------------------
为了让其它几个切面也得到相同的处理能力,我们使用了Qomo AOP中的“联合(combine)”,这
非常简单,一行代码就可以了:
---------------------------
asp_getTopoString.combine(asp_LinesString, asp_drawTopo, asp_active, asp_cache);
---------------------------
于是,上面的五个切面所处理的被观察者(函数)执行时,都会触发asp_getTopoString的OnBefore
和OnAfter事件了。
我相信Qomo AOP的价值远非如此。接下来的应用,看大家的吧。^.^
七、其它
~~~~~~~~~~~~~~~~~~
1. 可以独立于Qomo框架的内核模块
----------
在Qomo内核中,Profilers.js、Dbg.Utils.js与JSEnhance.js一样,都不需要加载Qomo的
框架,因此可以直接在其它的、第三方的代码框架中使用。这样的内核模块还包括:
------------
// 包括Profilers, Dbg.Utils和RepImport等
$import('Debug/Debug.js');
// 替换错误处理
$import('RTL/Error.js');
// 接口
$import('RTL/Interface.js');
// 协议(目前只包括URL分析)
$import('RTL/Protocol.js');
// 兼容层
$import('Compat/CompatLayer.js');
// 命名空间(依赖于system.js与Protocol.js)
$import('Names/NamedSystem.js');
// 脚本功能增强
$import('RTL/JSEnhance.js');
------------
由于Profilers被设计成可以针对整个Qomo做性能分析(包括最初的$import(),以及后续加载
的各个组件与类),因此它必须在最先载入。同样的原因,整个的Debug.js是第一个由system.js
载入的单元。
2. 框架库之其它内容
----------
在Qomo beta2的基础库中,还包括三个重要的成员:
- 队列/池,以及处理器类
- 时间序列、时间线与数据发生器
- ajax原型:HttpMachine()
这些内容在随后我将专门撰文讲解。