流程圖控件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正版授權的朋友可以。