注册 | 登录 忘记密码？ 51cto首页 | 博客 | 论坛 | 招聘
热点文章 《网络规划设计师教程》..
　帮助
文章文章列表>>
2009-03-06 23:18:45



2008-08-28 18:51:01



2008-08-28 13:33:21



2008-08-27 15:50:42



2008-08-26 11:37:31



2008-08-25 13:07:47



2008-08-04 15:41:48



2008-07-02 17:04:34



2008-06-10 17:16:30
编写计算机软件的人很多，我们通常都把这些活动称为软件开发。但是软件的种类是不同的，每种软件都有自身的复杂性和挑战性。本人一直工作在电信行业，电信行业的软件非常复杂，对并发、大数据量、性能、高可靠性要求很高，这些都对软件的设计和开发提出了严峻的挑战。
1.1             应用软件结构
通常，应用软件的总体结构，可以分为两大部分：应用层和平台层，具体如下：



图 1‑1 应用软件总体结构
平台层提供基础框架和大量可重用组件，这些组件以一定的接口方式暴露出来，供应用层来调用。平台层通常不提供与具体业务相关的逻辑处理，而是提供：
1)     业务无关的框架/功能组件：比如日志、安全、线程池、连接池、告警监控等
2)     多种业务之间可共用的机制：如工作流、事件通知机制等，这部分也与具体的业务无关。
应用层提供具体应用相关的逻辑处理部分，包括页面、应用逻辑、应用数据等。
平台层和应用层，是个逻辑划分的概念，实际软件实现中，平台层和应用层都可以由多个层来实现，也可以合并到一个程序中，这要视项目的规模和具体需求而定。
从上图可以看出，构建一个高度可重用的平台层，可以使应用开发只需集中精力关注业务逻辑，业务无关的功能组件和机制都由平台层提供，可以直接使用，这样极大简化了应用开发，缩短了软件交付周期，保障了软件质量。
而构建一个高度可重用的平台层，最核心的挑战就是设计和开发高度可重用的组件，提取应用的共性需求，简化接口，真正做到应用开发时可以直接拿来就用，而且非常好用。
1.2             组件定义
那么，到底什么是组件呢？框架又是什么意思？类是组件吗？控件又指什么？元件、构件这些概念又如何理解？
这些概念，都没有一个统一的标准答案，因此在软件开发过程中，这些术语经常被混淆，作者根据自己的工作体会，对这些概念解释如下：
1)     对象：面向对象语言(Object-Oriented Language)是一类以对象作为基本程序结构单位的程序设计语言，指用于描述的设计是以对象为核心，而对象是程序运行时刻的基本成分。对象都具有状态和行为。对象，也被翻译为实例、物件。
2)     类：面向对象的概念。类是一种对包括数据成员、函数成员和嵌套类型进行封装的数据结构。在程序运行期间，由类创建成对象的过程，叫类的实例化。因此，对象是个运行期的术语，类是个编译期的术语。类本身就是可重用的直接实现手段。
3)     组件：类本身是个细粒度的可重用实现，为了解决功能或机制层面更大粒度重用的问题，又引入了组件的概念。组件的英文是Component，其逻辑结构如下：



组件对外暴露一个或多个接口，供外界调用。组件内部由多个类来协同实现指定的功能。对于复杂的组件，会包括很多的类，还可能包含配置文件、界面、依赖的库文件等，组件也可以包含或者使用其它的组件，构成更大的组件。
一些特定范畴的组件，由软件厂家或者国际权威组织制定并颁布了组件规范，如COM、ActiveX、EJB、JavaBean等。本书讨论的组件，指一般意义的自定义组件，不包括这些规范化的组件。
4)     控件：控件的英文是Control，控件就是具有用户界面的组件。要说的具体一点，就得回顾早期 Windows 的历史根源，当时控件指任何子窗口：按钮、列表框、编辑框或者某个对话框中的静态文本。从概念上讲，这些窗口——控件——类似用来操作收音机或小电器的旋钮和按钮。随着控件数量的增加（组合框、日期时间控件等等），控件逐渐成为子窗口的代名词，无论是用在对话框中还是用在其它种类的主窗口中。没过多久 BASIC 程序员开始编写他们自己专用的控件，自然而然地人们便想到共享这些控件。共享代码的方法之一是通过磁盘拷贝，但那样显然效率低下。必须要有一种机制使开发者建立的控件能够在其它程序员的应用中轻而易举地插入，这便是VBA控件，OLE控件，OCX和最后ActiveX 控件产生的动机。因此，控件是组件的一个主要样本（并且历史上曾驱动着组件的开发），控件又不仅仅是唯一的一种组件。
5)     元件：元件是个电子行业的术语，是电子元件的简称。也有一些软件借用这个术语，指特定的可重用控件。
6)     构件：构件是系统中实际存在的可更换部分，它实现特定的功能，符合一套接口标准并实现一组接口。构件代表系统中的一部分物理实施，包括软件代码（源代码、二进制代码或可执行代码）或其等价物（如脚本或命令文件）。
通常认为，构件是特定软件开发环境中、满足指定规范的软件部分，其涵盖了设计、开发、物理实施等范畴。
7)     框架：框架的英文是Framework，框架是一个应用程序的半成品。框架提供了可在应用程序之间共享的可复用的公共结构。开发者把框架融入他们自己的应用程序，并加以扩展，以满足他们特定的需要。框架和工具包的不同之处在于，框架提供了一致的结构，而不仅仅是一组工具类。(摘自《JUnit in action中文版》)。
8)     子系统：子系统是个设计中使用的术语，英文是SubSystem。在软件总体架构中，按照功能划分子系统。通常一个子系统包含一个或多个进程。
9)     模块：模块是个设计中使用的术语，英文是Module。模块指一个子系统内部，按照软件结构分解的功能部分。模块会包含多个类、使用多个组件，也会与框架交互。
一个真正的软件系统，会涉及到以上的多个概念，典型的软件系统静态结构图如下：


上图展示了一个软件系统，包括2个子系统，子系统1和子系统2。子系统1调用子系统2。
子系统1包含2个模块：模块1和模块2。模块1由两个类(Class 1 和Class 2)和一个组件(组件1)构成，模块2由两个类（Class3和Class4）和两个组件（组件2和组件3）构成，模块2提供一个接口给模块1调用。模块1和模块2都使用了框架1。
子系统2包含2个模块：模块3和模块4。模块3由两个类（Class5和Class6）和一个组件（组件4）构成，模块4由一个类（Class7）和一个组件（组件5）构成。模块4提供一个接口给模块3调用。模块3和模块4都使用了框架2。[/img]..



2008-06-10 17:11:43



2008-06-04 23:53:09
我的上一篇文章《KTree 组件需求规格》，将javascript 树型组件的功能规格定义了下来。我对树型组件的研究，从2周前就开始了，现在代码完成，发布出来，供大家使用。
先看一下效果：
1.  有根节点、有连线、各层树枝显示图片自定义：


2. 无根节点，无连线，各层树枝显示图片自定义：

3. 无连接线、显示CheckBox：

怎么样，不错吧。
下面讲一下怎么在页面上生成这棵树：
1. 引入ktree.js 和ktree.css 文件，这个大家都非常熟悉了：
<link rel="StyleSheet" href="ktree/ktree.css" type="text/css" />
 <script type="text/javascript" src="ktree/ktree.js"></script>
2. 确定KTree 要显示的位置，先把script的元素写上：
<script type="text/javascript">
<!--  我们要写的代码都在这里  -->
 
</script>
3. 创建树对象，如下：
    k = new KTree('k', 'myTree1', 'ktree/img/');
    KTree 函数原型为：
function KTree(objName, treeId, imgPath)；
第一个参数：objName:此树对象实例的变量名，必需。就是”=”前面的那个k啊，这个变量必须是全局变量，因此变量前面不能有var。
第二个参数：treeId：树对象的Id，必需。可以任意命名，但名字需要唯一，这样可以支持一个页面有多个树。
    第三个变量：KTree 内置图片的存放目录，必需。连线、加减号等都是图片，因此需要指定存放位置，这样开发者就可以根据自己的目录规划，把KTree的图片放到指定的目录下。
4. 设置显示图片：
    k.setImageList('ktree/img/base.gif', 'ktree/img/folder.gif',
'ktree/img/folderopen.gif', 'ktree/img/globe.gif', 'table.png',
'shape_handles.png');
   setImageList 设置树枝和树叶显示时使用的各个图片，图片个数任意个。那么怎么指定树枝显示是哪个图片，树叶显示是哪个图片？见下面的函数：
    k.setDirImages(1, 2);
    k.setDirImages(4, 5, 1);
    setDirImages 函数是设置显示树枝的图片，函数原型如下：
    setDirImages = function(closeIndex, openIndex, dirLevel);
    参数如下：
    closeIndex : 树枝折叠时，显示图片在ImageList 数组中的索引下标，下标从0开始。
    openIndex：树枝展开时，显示图片在ImageList 数组中的索引下标，下标从0开始。
    dirLevel: 目录的层次，从0开始，0表示第一层树枝。可选参数，不填时表示默认层次，即没有专门指定图片的树枝层次，都统一使用默认层次指定的折叠和展开图片。
    setDirImages函数可以被多次调用，这样就可以为不同层次目录设置不同显示的图片。
设置树叶显示图片的方法：
setLeafImages = function(unselectedIndex, selectedIndex);
unselectedIndex : 树叶未被选中时显示的图片索引，从0开始。
selectedIndex：树叶被选中时显示的图片，可选参数。如不填，则一直显示unselectedIndex的图片。
5. 设置根节点显示：
   setRoot = function(rootId, rootName, imageIndex);
   设置根节点的参数，如下：
   rootId: 根节点的Id值。任何一个树节点，都至少有3个基本属性：id,pid,name. id 指应用程序中此对象的唯一编号（不是HTML Element ID），pid 指父节点的id。Name指显示的文本。此参数可选，缺省为－1。
    rootName: 根节点显示的文本，可选参数。如不提供此参数，表示不显示根节点。
    imageIndex: 根节点显示图片的索引下标。可选参数。
    如果不调用setRoot 函数，表示不显示根节点，树根的id 为 －1。
6. 设置显示风格：
   是否显示连线：k.showLine(false); 参数true显示连线，参数false不显示连线。如果不调用此函数，缺省显示连线。
    是否显示CheckBox：k.showCheckbox(true);参数true表示树叶节点将显示checkbox, 参数false则不显示。如果不调用此函数，缺省不显示checkbox。
7．增加树枝：
    k.addDir(1, -1, '营销资费管理', null, null, 'hypo3.html','mainFrame');
    k.addDir(2,1,'产品资费定价');
    addDir是增加树枝函数，原型如下：
    addDir = function(id, pid, name, icon, openIcon, url, target);
    参数如下：
    id : 此树枝节点id
    pid: 此树枝节点的父节点id。父节点必须在子节点前被加入到树中。如果pid == rootId, 表示此树枝是第1层树枝，dirLevel == 0.
    name : 树枝的显示文本。
   icon : 树枝折叠时显示的图片。有三种取值：1) null,表示使用setDirImages指定的图片；2) 图片索引下标，数字，表示用ImageList中指定下标的图片显示； 3) 图片全路径的字符串，表示用这个指定的图片来显示；
    openIcon : 树枝展开时显示的图片，取值方法与icon 相同。
    url：超链接指向的URL，可选
    target ：超链接指向的target，可选
8．增加树叶：
    k.addLeaf(99,11,'Node 22');
    addLeaf 函数增加一个树叶，函数原型如下：
    addLeaf = function(id, pid, name, icon, openIcon, url, target);
    参数的取值，都与addDir 相同。增加树叶时，树叶的父节点必须已经被填加到树中。
9. 显示树：
   document.write(k);
   以上语句，其实是调用了KTree.toString() 方法，返回生成好的HTML元素，添加到document中，于是树就显示出来了。
10. 获得选中的节点：
如果树设置成显示checkbox, 那么用户可以多选，获得用户选中了哪些节点的方法是：
var nodes = k.getSelectNodes();
getSelectNodes() 函数返回的是一个数组，数组中每个成员都是一个Node 对象，Node对象的主要属性有id, pid, name, icon, openIcon, url, target，这些都非常简单。
 
以上，将KTree的使用方法讲解了一下，具体使用，请见我提供的test_ktree.html示例。  
 
 
 
 [/img]..



2008-06-02 23:50:35



2008-04-22 22:16:55



2008-04-16 22:41:00



2008-04-10 21:41:39



2008-04-08 02:44:18



2008-04-08 01:48:59



2008-04-08 01:21:54



2008-03-24 00:23:05



2008-03-23 23:19:30



2008-03-21 00:12:58



2008-03-16 19:44:11



2008-03-16 18:40:08



2008-03-16 16:38:30