2.2.1.3 Extending mxGraph in JavaScript/ 在 JavaScript 中扩展 mxGraph

[翻译]
在 JavaScript 中，有多种方式将面向对象范式映射到语言结构。mxGraph 在整个项目中使用了一种特定的方案，遵循以下隐式规则：

• 不更改内置原型。
• 不尝试限制 JavaScript 语言的功能。

[原文]
In JavaScript, there are various ways of mapping the Object Oriented paradigm to language constructs. mxGraph uses a particular scheme throughout the project, with the following implicit rules:

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

• mapping /'maep/ 映射
• paradigm /'paerdam/ 范式
• constructs /'knstrkts/ 结构
• implicit /m'plst/ 隐式的
• prototypes /'prottaps/ 原型

[翻译]
mxGraph 中有两种类型的“类”：类和单例（只有一个类实例存在）。单例映射到全局对象，其中变量名称与类名称相同。例如，mxConstants 是一个对象，所有常量定义为对象字段。普通类映射到构造函数和定义实例字段和方法的原型。例如，mxEditor 是一个函数，mxEditor.prototype 是 mxEditor 函数创建的对象的原型。mx 前缀是 mxGraph 包中所有类的命名约定，以避免与全局命名空间中的其他对象冲突。

[原文]
There are two types of “classes” in mxGraph; classes and singletons (where only one instance of the class exists). Singletons are mapped to global objects where the variable name is the same as the class name. For example, mxConstants is an object with all the constants defined as object fields. Normal classes are mapped to a constructor function and a prototype which defines the instance fields and methods. For example, mxEditor is a function and mxEditor.prototype is the prototype for the object that the mxEditor function creates. The mx prefix is a convention that is used for all classes in the mxGraph package to avoid conflicts with other objects in the global namespace.

• singletons /'sɡltnz/ 单例
• mapped /maept/ 映射
• constants /'knstnts/ 常量
• prototype /'prottap/ 原型
• conflicts /'knflkts/ 冲突

[翻译]
对于子类化，超类必须提供一个无参数或能处理无参数调用的构造函数。此外，在扩展原型后必须重新定义特殊的构造函数字段。例如，mxEditor 的超类是 mxEventSource。这在 JavaScript 中通过首先“继承”超类的所有字段和方法来表示，例如通过将原型分配给超类的一个实例：

[原文]
For subclassing, the superclass must provide a constructor that is either parameterless or handles an invocation with no arguments. Furthermore, the special constructor field must be redefined after extending the prototype. For example, the superclass of mxEditor is mxEventSource. This is represented in JavaScript by first “inheriting” all fields and methods from the superclass by assigning the prototype to an instance of the superclass, eg.

• subclassing /'sbklaes/ 子类化
• superclass /'suprklaes/ 超类
• constructor /kn'strktr/ 构造函数
• invocation /nv'ken/ 调用
• inheriting /n'hert/ 继承

mxEditor.prototype = new mxEventSource()

[翻译]并使用以下方式重新定义构造函数字段：

[原文] and redefining the constructor field using:

mxEditor.prototype.constructor = mxEditor

[翻译]
后者规则的应用是为了通过 mxUtils.getFunctionName(obj.constructor) 获取对象的构造函数名称来检索对象的类型。

[原文]
The latter rule is applied so that the type of an object can be retrieved via the name of it’s constructor using mxUtils.getFunctionName(obj.constructor).

• retrieved /r'trivd/ 检索
• constructor /kn'strktr/ 构造函数

Constructor/构造函数

[翻译]
在 mxGraph 中进行子类化时，应应用相同的机制。例如，要对 mxGraph 类进行子类化，首先必须为新类定义一个构造函数。构造函数使用 mxGraph 函数对象上的 call 方法调用超构造函数，明确传递所有参数：

[原文]
For subclassing in mxGraph, the same mechanism should be applied. For example, for subclassing the mxGraph class, first a constructor must be defined for the new class. The constructor calls the super constructor with any arguments that it may have using the call function on the mxGraph function object, passing along explicitly each argument:

• mechanism /'meknzm/ 机制
• constructor /kn'strktr/ 构造函数
• super /'supr/ 超
• arguments /'ɑrɡjmnts/ 参数
• explicitly /k'splstli/ 明确地

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

[翻译] MyGraph 的原型继承自 mxGraph，具体如下。通常，在扩展超类之后，会重新定义构造函数：

[原文] The prototype of MyGraph inherits from mxGraph as follows. As usual, the constructor is redefined after extending the superclass:

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

[翻译]
您可能希望在上述代码后定义与该类关联的编解码器（参见手册的 I/O 部分）。此代码将在类加载时执行，确保使用相同的编解码器对 mxGraph 和 MyGraph 的实例进行编码。

[原文]
You may want to define the codec associated for the class after the above code (see I/O section of manual). This code will be executed at class loading time and makes sure the same codec is used to encode instances of mxGraph and MyGraph.

• codec /'kodek/ 编解码器
• associated /'sosietd/ 关联的
• executed /'ekskjutd/ 执行
• encode /n'kod/ 编码
• instances /'nstnsz/ 实例

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

Functions/函数

[翻译]
在 MyGraph 的原型中，可以按以下方式扩展 mxGraph 的函数：

[原文]
In the prototype for MyGraph, functions of mxGraph can be extended as follows.

• prototype /'prottap/ 原型
• extended /k'stendd/ 扩展

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 和 arguments 变量作为参数。只有在超类中函数未被替换的情况下，调用超类函数才可能，如下所示，这是 JavaScript 中“子类化”的另一种方式。

[原文]
The supercall in the first line is optional. It is done using the apply function on the isSelectable function object of the mxGraph prototype, using the special this and arguments variables as parameters. Calls to the superclass function are only possible if the function is not replaced in the superclass as follows, which is another way of “subclassing” in JavaScript.

• supercall /'suprkl/ 超类调用
• optional /'ɑpnl/ 可选的
• apply /'pla/ 应用
• replaced /r'plest/ 替换
• subclassing /'sbklaes/ 子类化

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

[翻译]
上述方案在需要完全替换函数定义时很有用。

[原文]
The above scheme is useful if a function definition needs to be replaced completely.

• scheme /skim/ 方案
• definition /def'nn/ 定义
• replaced /r'plest/ 替换

[翻译]
为了向子类添加新函数和字段，使用以下代码。下面的示例添加了一个新函数以返回图模型的 XML 表示：

[原文]
In order to add new functions and fields to the subclass, the following code is used. The example below adds a new function to return the XML representation of the graph model:

• subclass /'sbklaes/ 子类
• fields /fildz/ 字段
• representation /reprzen'ten/ 表示

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

Fields/字段

[翻译]
同样，声明和定义新字段如下：

[原文]
Likewise, a new field is declared and defined as follows:

• declared /d'klerd/ 声明
• defined /d'fand/ 定义

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

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

[原文]
Note that the value assigned to myField is created only once, that is, all instances of MyGraph share the same value. If you require instance-specific values, then the field must be defined in the constructor instead. For example:

• assigned /'sand/ 分配
• instances /'nstnsz/ 实例
• constructor /kn'strktr/ 构造函数

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

[翻译]
最后，使用以下代码创建 MyGraph 的新实例，其中 container 是作为图视图容器的 DOM 节点：

[原文]
Finally, a new instance of MyGraph is created using the following code, where container is a DOM node that acts as a container for the graph view:

• instance /'nstns/ 实例
• DOM /di o 'em/ 文档对象模型
• container /kn'tenr/ 容器

var graph = new MyGraph(container);