流程圖控件GoJS教程：調(diào)試建議（上）

GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

GoJS現(xiàn)已更新至最新版本2.1發(fā)布，修復了一些bug，增強用戶體驗，趕快下載試試吧~

點擊下載GoJS最新試用版

調(diào)試建議

開發(fā)圖表應(yīng)用程序不僅僅需要編寫一些使用GoJS庫的JavaScript代碼。

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

• 您將需要使用許多不同的瀏覽器在許多不同的設(shè)備上測試您的應(yīng)用程序。
  

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

• 您將需要知道如何使用每個瀏覽器的開發(fā)工具，尤其是控制臺窗口和調(diào)試器。

使用go-debug.js圖書館

在開發(fā)應(yīng)用程序時，請確保使用調(diào)試庫go-debug.js而不是調(diào)試go.js庫。調(diào)試庫對屬性值和方法參數(shù)進行了更多的錯誤檢查，并檢測到更多異常情況。大多數(shù)警告和錯誤將被寫入控制臺窗口。始終檢查它是否有消息。我們試圖使他們提供信息。

使用記錄的API

嘗試將代碼限制為僅使用記錄在文檔中的類，屬性和方法，如 PI參考或TypeScript定義文件 go.d.ts中所列。

請不要使用一些簡短的屬性名稱，該名稱只能是一兩個字母。在該庫的另一個版本中，最小名稱將有所不同，因此此類代碼將不再起作用。基本上：永遠不要在Point，Rect，Spot和LayoutVertex實例以及InputEvent.up屬性上使用“ x”和“ y”以外的一兩個字母屬性名稱。

不要修改任何GoJS類的原型。如果您修改內(nèi)置類，我們將不支持您。修改GoJS類行為的方法是通過Extensions中討論的技術(shù) 。但是，大多數(shù)GoJS類不能被子類化，并且大多數(shù)已記錄的方法不能被覆蓋。通常，Tool和Layout類以及CommandHandler和Link類可以被子類化。查看API文檔，以了解是否可以重寫方法。

使用控制臺窗口

首先，您需要在“控制臺”窗口或“調(diào)試器”窗口中獲得對Diagram對象的引用。

一種方法是在代碼中記住它。您可以在window對象上設(shè)置屬性以引用您創(chuàng)建的圖。許多示例只是通過省略var聲明來做到這一點：

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

另外，在控制臺中，如果您知道HTML DIV元素的名稱，則可以調(diào)用靜態(tài)函數(shù)Diagram.fromDiv以獲取Diagram對象：

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

如果未命名該DIV元素，則可能還有其他方法可以獲取對DIV元素的引用。這可能取決于您使用的框架。您仍然可以在該元素上調(diào)用Diagram.fromDiv以獲取相應(yīng)的Diagram對象。

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

> myDiagram.nodes.size

返回圖表中Node的數(shù)量。

> myDiagram.model.nodeDataArray [ 0 ]

返回圖模型的Model.nodeDataArray中的第一個節(jié)點數(shù)據(jù)對象。

> myDiagram.layoutDiagram（true）

強制發(fā)生所有布局，重新排列節(jié)點并路由鏈接。

您在控制臺中執(zhí)行的代碼也可能更加復雜。例如，您可以找到，選擇并滾動到特定節(jié)點：

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

如果您不知道要在視口中看到的節(jié)點的鍵，也許您知道如何在模型中找到節(jié)點數(shù)據(jù)對象。該Diagram.findNodesByExample方法也可能是有用的。

檢查選定的節(jié)點

> myDiagram.selection.first（）

返回第一個選定的Part，它可以是Node，Link或如果未選擇任何內(nèi)容則為null。

如果您記得所選的節(jié)點或鏈接，則可以更輕松地對其進行檢查。例如：

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

記住第一個選定的節(jié)點并返回節(jié)點數(shù)據(jù)的鍵。您可能需要查看的所有屬性

myNode.data

賓語。

您還可以查看Node的其他屬性并調(diào)用其方法。例如：

> myNode.location

返回一個Point，其調(diào)試器可能會顯示其屬性。或致電：

> myNode.location.toString（）

來查看該Point對象的可讀文本呈現(xiàn)。

作為另一個示例，您可以打印出所選節(jié)點連接到的所有節(jié)點：

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

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

您還可以查看節(jié)點可視樹的結(jié)構(gòu)。使用此遞歸函數(shù)：

> 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)

并在組織結(jié)構(gòu)圖示例中獲得以下結(jié)果：

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"...)

因此，您可以看到節(jié)點是如何由一個由Shape組成的面板圍繞一個嵌套的Table Panel組成的，該面板又由兩個TextBlocks和一個Picture組成。

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

想要購買GoJS正版授權(quán)的朋友可以。