一个纯javascript 写的流程图 设计页面

                             

 一个纯javascript 写的流程 设计页面

第一次发文章，展示一个流程编辑界面，它有以下特点
1.用纯javascript 实现
2.生成结果为XML，可以和后台交互
3.带有流程检验机制
4.连线可自动绕开障碍
5.可自由定义颜色、字体、对齐等属性
6.脚本存在XML中，调用灵活，可采用类似 C语言中的include 动态载入不同的类
...
 
制作这个流程页面时比较早，还没有像现在这么丰富的第三方包，比如EXT ，当时针对这么复杂的实现确 实花了不少功夫
最初通过加载单个功能的js 文件的方式，感觉非常花工夫，后来考虑到XML和js的灵活性，采用了两者相结合的办法，把脚本分文别类放入到XML文件中，同时要实现的实例类库也放在其中，
通过一个综合调用的类App来实现，可以大为简化复杂类的生成和调试，比如
    加载类库    App.include("xml\\classlib\\util.xml","ClassLib");  
    生成一个字体大小的下接盒 App.getClass("popup.TFontSizeCombox");
    生成一个Hash表类  App.getClass("util.Collections.HashTable");
另外，用于生成网页的字符串也放在XML文件中用 App可自由调用，这样用js 拼凑页面字符串就很容易了
在这个架构设计完成后，感觉有点模块化的味道了，同时带来以下好处
    所有的脚本可以存放于数据库内，对脚本的保密性较好
    脚本的加载是片段的加载的，用到哪些类才会执行，没有用到的不会消耗内存
    有利于程序员的经验积累，新写的函数可源源不断的加入到类库中

正因为两者结合的如此紧密，因此在本流程实现中，它在调用XML节点，进行XML交互方面有很大的优势，比如图上的活动类为例，它的js实现，它的配置文件、它的实例、它的事件全都存在相应的XML节点下，如此的集成使得这个类的实现要容易的多。
框架结构可参照下图