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

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

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

點(diǎn)擊下載GoJS最新試用版

調(diào)試建議

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

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

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

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

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

使用go-debug.js圖書館

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

使用記錄的API

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

請(qǐng)不要使用一些簡(jiǎn)短的屬性名稱，該名稱只能是一兩個(gè)字母。在該庫(kù)的另一個(gè)版本中，最小名稱將有所不同，因此此類代碼將不再起作用?；旧希河肋h(yuǎn)不要在Point，Rect，Spot和LayoutVertex實(shí)例以及InputEvent.up屬性上使用“ x”和“ y”以外的一兩個(gè)字母屬性名稱。

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

使用控制臺(tái)窗口

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

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

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

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

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

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

然后，在控制臺(tái)中，您可以使用myDiagram對(duì)Diagram對(duì)象的引用。一些例子：

> myDiagram.nodes.size

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

> myDiagram.model.nodeDataArray [ 0 ]

返回圖模型的Model.nodeDataArray中的第一個(gè)節(jié)點(diǎn)數(shù)據(jù)對(duì)象。

> myDiagram.layoutDiagram（true）

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

您在控制臺(tái)中執(zhí)行的代碼也可能更加復(fù)雜。例如，您可以找到，選擇并滾動(dòng)到特定節(jié)點(diǎn)：

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

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

檢查選定的節(jié)點(diǎn)

> myDiagram.selection.first（）

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

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

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

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

myNode.data

賓語(yǔ)。

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

> myNode.location

返回一個(gè)Point，其調(diào)試器可能會(huì)顯示其屬性?；蛑码姡?/p>

> myNode.location.toString（）

來查看該P(yáng)oint對(duì)象的可讀文本呈現(xiàn)。

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

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

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

您還可以查看節(jié)點(diǎn)可視樹的結(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(https://www.nwoods.com/go/Flags/japan-flag.Png)#664
2,2: TextBlock("Title: Vice Chairman"...)

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

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

想要購(gòu)買GoJS正版授權(quán)的朋友可以咨詢慧都官方客服。