流程图控件GoJS教程：调试建议（上）

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

GoJS现已更新至最新版本2.1发布，修复了一些bug，增强用户体验，赶快下载试试吧~

点击下载GoJS最新试用版

调试建议

开发图表应用程序不仅仅需要编写一些使用GoJS库的JavaScript代码。

• 您将需要熟悉HTML DOM和CSS。
  

• 您将需要使用许多不同的浏览器在许多不同的设备上测试您的应用程序。
  

• 您将需要熟悉您的JavaScript框架（如果有）。
  

• 您将需要知道如何使用每个浏览器的开发工具，尤其是控制台窗口和调试器。

使用go-debug.js图书馆

在开发应用程序时，请确保使用调试库go-debug.js而不是调试go.js库。调试库对属性值和方法参数进行了更多的错误检查，并检测到更多异常情况。大多数警告和错误将被写入控制台窗口。始终检查它是否有消息。我们试图使他们提供信息。

使用记录的API

尝试将代码限制为仅使用记录在文档中的类，属性和方法，如 ;PI参考或TypeScript定义文件 go.d.ts中所列。

请不要使用一些简短的属性名称，该名称只能是一两个字母。在该库的另一个版本中，最小名称将有所不同，因此此类代码将不再起作用。基本上：永远不要在Point，Rect，Spot和LayoutVertex实例以及InputEvent.up属性上使用“ x”和“ y”以外的一两个字母属性名称。

不要修改任何GoJS类的原型。如果您修改内置类，我们将不支持您。修改GoJS类行为的方法是通过Extensions中讨论的技术 。但是，大多数GoJS类不能被子类化，并且大多数已记录的方法不能被覆盖。通常，Tool和Layout类以及CommandHandler和Link类可以被子类化。查看API文档，以了解是否可以重写方法。

使用控制台窗口

首先，您需要在“控制台”窗口或“调试器”窗口中获得对Diagram对象的引用。

一种方法是在代码中记住它。您可以在window对象上设置属性以引用您创建的图。许多示例只是通过省略var声明来做到这一点：

    myDiagram = $（go.Diagram，“ myDiagramDiv”，..）;

另外，在控制台中，如果您知道HTML DIV元素的名称，则可以调用静态函数Diagram.fromDiv以获取Diagram对象：

> myDiagram = go.Diagram.fromDiv（“ myDiagramDiv”）;

如果未命名该DIV元素，则可能还有其他方法可以获取对DIV元素的引用。这可能取决于您使用的框架。您仍然可以在该元素上调用Diagram.fromDiv以获取相应的Diagram对象。

然后，在控制台中，您可以使用myDiagram对Diagram对象的引用。一些例子：

> myDiagram.nodes.size

返回图表中Node的数量。

> myDiagram.model.nodeDataArray [ 0 ]

返回图模型的Model.nodeDataArray中的第一个节点数据对象。

> myDiagram.layoutDiagram（true）

强制发生所有布局，重新排列节点并路由链接。

您在控制台中执行的代码也可能更加复杂。例如，您可以找到，选择并滚动到特定节点：

> myNode = myDiagram.findNodeForKey（“ Omega”）;
> myNode.isSelected = true 
> myDiagram.commandHandler.scrollToPart（myNode）

如果您不知道要在视口中看到的节点的键，也许您知道如何在模型中找到节点数据对象。该Diagram.findNodesByExample方法也可能是有用的。

检查选定的节点

> myDiagram.selection.first（）

返回第一个选定的Part，它可以是Node，Link或如果未选择任何内容则为null。

如果您记得所选的节点或链接，则可以更轻松地对其进行检查。例如：

> myNode = myDiagram.selection.first（）
> myNode.data.key

记住第一个选定的节点并返回节点数据的键。您可能需要查看的所有属性

myNode.data

宾语。

您还可以查看Node的其他属性并调用其方法。例如：

> myNode.location

返回一个Point，其调试器可能会显示其属性。或致电：

> myNode.location.toString（）

来查看该Point对象的可读文本呈现。

作为另一个示例，您可以打印出所选节点连接到的所有节点：

myNode.findNodesOutOf().each(function(n) { console.log(n.data.key); })

您可以在Collections中找到更多迭代的示例

您还可以查看节点可视树的结构。使用此递归函数：

> function walk(x, level, index) {
>   console.log(level + "," + index + ": " + x.toString());
>   if (!(x instanceof go.Panel)) return;
>   for (var i = 0; i < x.elements.size; i++) walk(x.elt(i), level+1, i);
> }

你也可以这样

> walk(myNode, 0, 0)

并在组织结构图示例中获得以下结果：

0,0: Node#653(Kensaku Tamaki)
1,0: Shape(Rectangle)#656
1,1: Panel(Panel.Table)#6572,0: TextBlock("Kensaku Tamaki")
2,1: Picture(//www.nwoods.com/go/Flags/japan-flag.Png)#664
2,2: TextBlock("Title: Vice Chairman"...)

因此，您可以看到节点是如何由一个由Shape组成的面板围绕一个嵌套的Table Panel组成的，该面板又由两个TextBlocks和一个Picture组成。

=====================================================

想要购买GoJS正版授权的朋友可以。