科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道Qomolangma框架库(一):概述、工具、异常、调试与分析

Qomolangma框架库(一):概述、工具、异常、调试与分析

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

Qomolangma框架库(一):概述、工具、异常、调试与分析

作者:aimingoo 来源:CSDN 2007年12月16日

关键字: 调试 异常 工具 概述 框架库

  • 评论
  • 分享微博
  • 分享邮件

================================================================================
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()

这些内容在随后我将专门撰文讲解。

 

查看本文来源
    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章