`
ruilin215
  • 浏览: 1142117 次
  • 性别: Icon_minigender_2
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

如何使用Qomo的Builder系统

阅读更多

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


1. Qomo的Builder系统
==========================
Qomo在Beta2之后,主要解决的一个问题就是Builder系统。在设计上,Qomo对Builder系统提出
了非常严格(甚至是苛刻)的要求,其中包括:
- 使用Qomo自身的框架来实现
- 使用JavaScript来实现,而不要第三方的应用(例如.exe的压缩程序)
- 对既有的和将来的Qomo项目透明,无影响
- 深入到Qomo内核的、分层的、可分解的模块定制
- 编译的结果代码,与使用中的调试版本无差异

这些要求所主要表现的,就是Qomo的Builder可以定制,而且对使用者来说公开、透明。

由于JavaScript是解释执行的脚本,而并没有真正的“编译”能力,所以在Qomo中所谓的“编
译(Build)”其实是指两个过程:
- Link: 连接。将各个代码块有序地组合成单一的.js文件
- Compress: 压缩。清除代码中的空格等,使代码尽可能地变得短小以缩短载入时间

使用Qomo的Builer所产生的结果,是生成一个单独的.js文件。——由于网页中的JavaScript没
有写文件的能力,所以事实上是生成了结果的代码块,用户可以手工复制到一个.js文件中去。

这个生成的单独的.js文件是可以任意命名的,为了方便,下面都称其为“Qomo.js”。——不
过,在mozilla里只能命名为Qomo.js(或自行修改代码中的一个正则表达式)。


2. Builder的体系结构
==========================
Qomo的Builder系统被放在Qomo的根目录之下,位于“ Qomo\Build ”目录中。下面是这个目
录的说明:
---------------
Build目录包括的子目录有:
packer\ : 一个可由用户使用的压缩器程序,但目前Qomo并没有使用到它。
jsmin\ : 一个开源的、JavaScript实现的压缩器。Qomo使用了它的js版本,而
其中的jsmin.exe只是为了用来压缩jsminfull.js。 :)
TestCase\ : 测试代码,包括一个示范性的Builder工具。
sample_final\: 编译结果的测试示例,包括编译时使用的参数配置(PNG图片)


Build目录包括的代码有:
Default.Config.js : 编译的缺省配置
Builder.html : 编译器(对话框)
Building.js : 提供给Qomo的用于编译(连接)的模块
FinalBuilder.js : 在Building.js中使用的一个inline代码块

ProtectCodeContext.js : 压缩算法中用于快速清除注释的类
Compressor.js : 算法器类
Compressor(1).js : 一种压缩算法的inline代码块
jsmin.js : jsmin压缩的js版本


Build\TestCase子目录包括的代码有:
T_RemoveImport.html : 测试程序 - 移除Qomo.js中特定代码块的
T_TestFinal.html : 测试程序 - 检查编译后的Qomo.js是否能有效装载

T_Builder.html : 浏览器兼容的通用示例和工具 - 用于“连接(link)”代码
T_Compress.html : 浏览器兼容的通用示例和工具 - 用于“压缩(compress)”代码
T_CustomBuilder.html : 能在IE上使用的示例和工具 - 完整的编译工具
---------------
基本上来说,整个体系中的关键代码在于Build\Building.js。它使用了Qomo的特性以侵入
Qomo代码的装载(import)过程,并收集过程中的信息。而Build\FinalBuiler.js则用于拼装
这些收集来的信息,以及对代码做一些(可预测的)修改。

Building.js的侵入不修改Qomo的流程,也不影响这个流程;finalBuilder.js的拼装和修改
以不影响Qomo中的代码块为基本前提。


3. Qomo中如何Builder代码 - for IE
==========================
在IE中,你可以直接打开T_CustomBuilder.html来编译代码。编译过程是可视的,你只需要
将结果代码复制到一个.js文件中即可。——你应该使用utf-8编码的、文本格式的.js文件。

使用T_CustomBuilder.html编译时,界面上的各个配置项都可以任意组合。——当然,“任
意”并不一定有价值,在另一篇文档中,我会专门讲述Qomo的层次结构,你便于你更合理地
编译一个最终交付(或发布)的Qomo版本,以使用在你的项目中。

界面上的一些配置项是被禁用的,但当另一些配置项被选中/取消时,它们会被开启。这种
关联关系,被配置在两个地方。其一是Default.Config.js中,用 js代码的方式来控制了模
块的依赖性,以使编译出的代码可用。还有是在T_CustomBuilder.html中载入的uicontrol.js
文件里,它仅用于控制T_CustomBuilder.html里的界面表现。

有两个选项在T_CustomBuilder.html中总是无效的。即“图形组件库”和“数据库组件库”。
这是因为在Qomo V1.0 Final中,这两个组件库并没有被正式发布。如果要把它们编译进去,
你需要将T_CustomBuilder.html中的DebugComponents变量置为true.

事实上“扩展界面控件”也没有被发布。但其中一些代码仍是可用的,所以被选项被置为开
启了。

要在最终代码中包含“图形组件库”、“数据库组件库”和“扩展界面控件”之任一,你都
需要自己解压v1.0 final发布包中的(Trial)Components.zip,使得Comonents目录的位置与
Framework目录的位置在同一级上。

使用T_CustomBuilder.html编译和发布代码的一些配置与生成代码的示例,放在sample_final
目录中。请参考配置即可。


4. Qomo中如何Builder代码 - for FF
==========================
在FireFox等mozilla兼容浏览器用使用Qomo的builder相对要麻烦一点。但这也使得过程更加
清晰。

- 首先用编辑器打开T_Builder.html,确定你需要装载哪些模块,并修改该网页中被注释
掉的一段脚本代码。——将false改成true。

- 然后在浏览器中打开这个网页,你会看到一个文本框中已经链接(link)好了全部的代码。

- 接下来,在浏览器中打开T_Compress.html,将前面链接好的代码复制到T_Compress.html
的文本框中。然后按下"compress it.."按钮。

- 文本框中会出现压缩后的代码。OK,复制它并存入你的Qomo.js即可。


5. Builder.html的使用
==========================
Builder.html是浏览器兼容的,因此你也可以在fireFox里打开它。但事实上它不并不显示编
译后的结果。——它是一个对话框,并向打开它的主窗口返回结果代码。

Builder.html包括了压缩与链接两个部分。你需要做的,只是写一个主页面,并写下类似如下
的代码:
---------------
data_compiled = showModalDialog('Builder.html', $QomoConfig, "...");
---------------

如果$QomoConfig参数为null,则Builder.html将使用默认配置(装入所有的代码),否则将根
据$QomoConfig的设置来完成编译。

你可以在代码中加入如下的HTML,以载入一个$QomoConfig变量的副本:
---------------
<script src='/Qomo/Qomo.Config.js'></script>
---------------
Qomo.Config.js中是一个最小化声明的配置信息。因此,载入该脚本之后,你也可以在打开
Builder.html之前修改$QomoConfig的值。示例如下:
---------------
$QomoConfig.set('Building', true);
$QomoConfig.set('Profiling', false);
---------------
此后,将变量$QomoConfig作为参数传给打开Builder.html的对话框即可。而该对话框在关闭
时会返回一个编译完成的字符串。

关于该过程的细节,请参考T_CustomBuilder.html。与后者不同的是,Builder.html是浏览
器兼容的。——因此如果需要,你可以写自己的Custom Builder for Other Browser. :)


6. 生成编译后代码(Qomo.js)的部署
==========================
在不使用命名空间时,生成的Qomo.js是一个与路径无关的单独文件,你可以在服务器的任意
位置上部署该文件。也可以编写代码,使用Qomo.js中的任何类和函数。

在使用命名空间时,Qomo.js能够自动地找到当前路径并为你设定命名空间。按照约定,Qomo
总是依照目录结构来注册类的命名空间。在编译的 Qomo.js 中,保存了一套虚拟的路径映射,
以使得你可以在Qomo.js所在目录中创建如下两个子目录:
---------------
Framework\
Components\
---------------
并将代码放在这两个目录中。在使用Class()注册后,会自动地注册到Qomo的命名空间。你也
可以使用$map()和$mapx()建立自己的命名空间与路径映射。关于这些,请参考有关路径与命
名空间的文档。

你可以把代码放在任何位置,而不仅限于上述的目录。但在你自己映射路径与命名空间之前,
它们都被注册到Qomo.Thirdparty路径下。


7. 关于兼容层代码
==========================
Builder只将当前(编译环境)中的浏览器相关的代码编译到Qomo.js中,其它所有的兼容层
代码都未被链入。因为并非所有的人都希望为兼容环境做B/S开发。——当然,也还有其它的
一些原因,例如未来可能要支持非浏览器环境下的JavaScript Host。

如果你使用Qomo.js,又希望它支持兼容环境。那么你应该将Qomo目录下的Framework\Compat\
目录中的文件复制到与Qomo.js相同的目录下。保持如下的路径关系:
---------------
...\Qomo.js
...\*.*
---------------
由于在使用兼容层时,$import模块总是被链入的。因此,Qomo在检测到与当前(编译环境)
不同的浏览器时,会自动地载入对应的兼容模块。

在将来的版本中,Qomo允许你指定这个兼容层代码所在的目录位置。——如果你需要,也可
修改编译后的Qomo.js中的代码。


8. 几个附助的选项
==========================
T_CustomBuilder.html中有几个辅助的选项,包括:
- 添加文件头
- 清除注释
- 不压缩
- 移除配置信息

其中,“添加文件头”是不可选的,它的作用,就是在Qomo.js代码的最前面添加一个版权
信息而已。仅从代码上说,你也可以移除它。但建议你保留这些信息。至少,其中的版本号
与发布时间是有价值的。

“移除配置信息”用于清除了$QomoConfig这个全局函数。该函数用于查询编译期的配置。——
你的确有可能代码要用到它。但如果不需要,你也可以移除。在编译后的Qomo.js中,是不
再需要调用这个函数的。

如果你选择“不压缩”,则Builder只是连接代码,而并不压缩它。这样它就可以很方便地
调试和修改了。

当选择“不压缩”时,你也可以取消“清除注释”选项。这样的代码将只是简单的拼接。Qomo
使用了非常有效的“清除清释”的算法,使得清除后的代码可读性仍然很高。因此,大多数
情况下,你不需要取消这个选项。

分享到:
评论

相关推荐

    周爱民Qomo框架源码

    license.zh-cn.pdf和license.en-us.pdf分别是框架的中文和英文版许可协议,详细规定了使用Qomo框架的法律条款和限制。开发者在使用框架时,应当仔细阅读并遵守这些条款。 readme.zh-cn.txt和readme.en-us.txt是框架...

    Qomo V2.1beta.2008.10.14

    标题“Qomo V2.1beta.2008.10.14”指的是一个特定版本的Qomo软件,这是一个在2008年10月14日发布的V2.1 beta版本。...用户可以通过阅读提供的文档、示例和许可证来学习和使用Qomo,并且可以根据项目需求进行配置。

    quaqua-3.6.11.zip_3.6.11-1-QOMO_quaqua_仿mac界面_界面 java

    这个库被称为QOMO Quaqua,它的设计目标是让Java应用程序在非Mac系统上也能呈现出与Mac操作系统类似的用户界面,从而提升用户体验和视觉一致性。 Quaqua库的核心功能在于其对Java Swing组件的扩展和定制,使得...

    qomo:Qomo OpenProject是一个真正的OOP框架(具有名称空间,AOP,ajax,templet ...)和基于UI库的Web浏览器

    乔莫Qomo OpenProject是一个True OOP框架(具有名称空间,AOP,ajax,templet ...)和基于UI库的Web浏览器。 从企业项目中提取的项目。 适用于所有JavaScript爱好者的免费开放源代码,并希望任何人加入/推动该项目。...

    Qomo Project-开源

    Qomo Project是一个JavaScript实现的,可自定义剪切的OOP框架(具有名称空间,AOP,templet ...)和用于Web浏览器的UI库。 该项目已向所有JavaScript爱好者,DOM专家等开放。希望您现在加入/冲动。

    RichClient简介以及如何启用RichClient项目

    在所提供的文档"启动一个Rich Web Client的项目:Qomo OpenProject.doc"和"Rich Client简介.doc"中,你可能会找到更具体的步骤和Qomo OpenProject这个特定项目的实施细节。这些文档会帮助你深入理解如何从零开始构建...

    QoBean.2008.10.14

    Qomo可能是一个相关的技术或者概念,与QoBean一起被提及,可能是其设计理念或者扩展功能的一部分。 压缩包中的文件名揭示了QoBean的组成部分: 1. **ObjectEx.js**:这个文件可能包含对JavaScript原生对象的扩展,...

    JavaScript语言精髓与编程实践

    本书详细讲述了通过框架执行过程来构造一个javascript扩展框架的方法,并完整地讲述了框架扩展中各种设计取舍,因此可以作为学习研究计算机程序设计语言时的参考,用以展示现实系统如何实现经典理论中的各种编程范型...

Global site tag (gtag.js) - Google Analytics