Getting Started

1. Mxgraph源码

源码包介绍

2. Third-Party JavaScript Frameworks

常用JavaScript框架

2.1本地JavaScript框架和库

不要列出和比较每个JavaScript框架，请参阅wikipedia的web应用程序框架条目和JavaScript的比较。这种比较不应该被认为是权威的，而是应该说明所提供的特性的类型，例如事件处理、动画、小部件、AJAX请求支持等。这个站点也是一个有用的JavaScript库列表，大部分是开放/免费源码许可的
请注意，许多框架添加了隐式行为，使JavaScript看起来更像OO语言，并增加了该语言的基本功能。在编写mxGraph的布局部分时，发现这种隐式行为以一种很难调试的方式破坏了一个示例。请注意，这可能会导致问题，如果您选择了一个框架，请确保您理解它引入了哪些隐式行为。
在选择框架和/或库时，要考虑哪些框架将您绑定到特定的功能行为，并寻找提供特性的库

2.2 mxGraph和JavaScript框架的集成

这个领域经常被误解，简单地说，不需要集成。Web应用程序通常包含一个或多个div元素，其中HTML包装应用程序的JavaScript。如果您将div创建为mxGraph的容器，那么该区域就是mxGraph应用程序的独立显示区域。它可以与任何后端服务器进行通信，但是div与页面的其余部分之间没有相互依赖关系，除了各自占用的区域。这包括事件处理，mxGraph可以为其容器处理事件，即使web页面的其余部分使用完全不同的事件模型.只要页面上的mxGraph或其他库和框架都没有引入破坏页面某一部分的隐式行为，就不需要分析客户机集成问题

2.2.1.3 在JavaScript中扩展mxGraph

在JavaScript中，有多种方法可以将面向对象范式映射到语言结构。mxGraph在整个项目中使用一个特定的方案，其隐含规则如下:

• Do not change the built-in prototypes
• Donot try to limit the power of the JavaScript language.

在mxGraph中有两种类型的“类”;类和单例对象(其中只存在类的一个实例)。单例对象映射到全局对象，其中变量名与类名相同。例如，mxConstants是一个对象，所有的常量都定义为对象字段。普通类映射到构造函数和定义实例字段和方法的原型。例如，mxEditor是一个函数和mxEditor。prototype是mxEditor函数创建的对象的原型。mx前缀是一种约定，用于其中的所有类。

对于子类化，超类必须提供一个构造函数，该构造函数要么是无参数的，要么是处理没有参数的调用。此外，在扩展原型之后，必须重新定义特殊构造函数字段。例如，mxEditor的超类是mxEventSource。这在JavaScript中表示为:首先“继承”超类中的所有字段和方法，将原型分配给超类的一个实例

mxEditor.prototype = new mxEventSource()

并使用重新定义构造函数字段

mxEditor.prototype.constructor = mxEditor

应用后一条规则，可以使用mxutil . getfunctionname (obj.constructor)通过对象的构造函数的名称检索对象的类型。

Constructor

对于mxGraph中的子类化，应该使用相同的机制。例如，要子类化mxGraph类，首先必须为新类定义一个构造函数。构造函数使用mxGraph函数对象上的call函数调用超级构造函数，并显式传递每个参数，使用它可能具有的任何参数调用超级构造函数:

function MyGraph(container) { mxGraph.call(this, container); }

MyGraph的原型继承自mxGraph，如下所示。通常，构造函数在扩展超类之后被重新定义:
 

MyGraph.prototype = new mxGraph();
MyGraph.prototype.constructor = MyGraph;

您可能想要在上述代码之后为类定义相关的编解码器(请参阅手册的I/O部分)。此代码将在类加载时执行，并确保使用相同的编解码器对mxGraph和MyGraph的实例进行编码。
 

var codec = mxCodecRegistry.getCodec(mxGraph);
codec.template = new MyGraph();
mxCodecRegistry.register(codec);

Functions

In the prototype for MyGraph, functions of mxGraph can be extended as follows.
 

MyGraph.prototype.isSelectable = function(cell)
{
   var selectable = mxGraph.prototype.isSelectable.apply(this, arguments);
   var geo = this.model.getGeometry(cell);
   return selectable &&(geo == null || !geo.relative);
}

第一行中的超调用是可选的。它使用mxGraph原型的isSelectable函数对象上的apply函数，使用特殊的this和n自变量作为参数来完成。只有在超类中没有像下面这样替换函数时，才有可能调用超类函数，这是JavaScript中“子类化”的另一种方式。
 

mxGraph.prototype.isSelectable = function(cell)
{
   var geo = this.model.getGeometry(cell);
   return selectable && (geo == null || !geo.relative);
}

如果需要完全替换函数定义，则上述方案非常有用。
为了向子类添加新函数和字段，使用了以下代码。下面的例子添加了一个新函数来返回图模型的XML表示:
 

MyGraph.prototype.getXml = function()
{
   var enc = new mxCodec();
   return enc.encode(this.getModel());
}

Fields

同样，新字段的声明和定义如下:

MyGraph.prototype.myField = ‘Hello, World!’;

注意，分配给myField的值只创建一次，即MyGraph的所有实例共享相同的值。如果需要实例特定的值，则必须在构造函数中定义字段。例如:
 

function MyGraph(container)
{
   mxGraph.call(this, container);
   this.myField = [];
}

最后，使用下面的代码创建一个MyGraph的新实例，其中container是一个DOM节点，充当graph视图的容器:
 

var graph = new MyGraph(container);