前端入門：快速開發基於 HTML5 網絡拓撲圖應用

計算機網絡的拓撲結構是引用拓撲學中研究與大小，形狀無關的點、線關係的方法。把網絡中的計算機和通訊設備抽象爲一個點，把傳輸介質抽象爲一條線，由點和線組成的幾何圖形就是計算機網絡的拓撲結構。網絡的拓撲結構反映出網中各實體的結構關係，是建設計算機網絡的第一步，是實現各類網絡協議的基礎，它對網絡的性能，系統的可靠性與通訊費用都有重大影響。拓撲在計算機網絡中便是指鏈接各結點的形式與方法；在網絡中的工做站和服務器等網絡單元抽象爲「點」；網絡中的電纜等抽象爲「線」。影響網絡性能、系統可靠性、通訊費用。

拓撲還分爲：總線拓撲、星型拓撲、環形拓撲樹形拓撲以及網狀拓撲。這篇文章寫的案例就是總線拓撲中的一個分支，咱們一步一步來搭建這個拓撲圖形。

 

示例圖片：

 

拓撲圖形組件 ht.graph.GraphView (如下簡稱 GarphView)是 HT 框架中 2D功能最豐富的組件，其相關類庫都在 ht.graph包下。 GarphView 具備基本圖形的呈現和編輯功能，拓撲節點連線及自動佈局功能，電力和電信等行業預約義對象，具備動畫渲染等特效， 所以其應用面很普遍，可做爲監控領域的繪圖工具和人機界面，可做爲通常性的圖形化編輯工具，可擴展成工做流和組織圖等企業應用。

HT 框架的組件指的是可視化可交互的視圖控件，HT 框架基於 HTML5 技術，所以HT組件的可視化部分本質就是 HTML 的元素， 大部分 HT 組件與 DataModel 數據模型綁定，用戶經過操做純 js 的語言便可驅動可視化組件，這樣屏蔽了 HTML 底層圖形技術複雜性。 HT 對 HTML5 技術封裝的目的在於提升開發效率和可維護性，但並不意味着不容許用戶直接操做 HTML 原生元素， 有 HTML5 開發經驗的程序員，在瞭解 HT 系統機制的前提下，大可運用各類 HTML5 的技術對 HT 組件作自定義擴展。

咱們就是用 ht.graph.GraphView 組件做爲場景的，具體代碼只有兩行：

graphView = new ht.graph.GraphView();
graphView.addToDOM();

首先聲明變量，而後將這個組件實例變量添加進 body 體中。全部 HT 組件最根層都爲一個 div 組件，可經過組件的 getView() 函數得到， 默認和自定義交互事件監聽通常添加在該 div 上(getView().addEventListener(type, func, false))， 渲染層通常由 canvas 提供。 用戶可直接對根 div 和 canvas 層設置css背景等樣式， 也能夠添加新的 HTML 組件到根 div 層上，做爲 canvas 的兄弟組件一塊兒呈現。 HT 組件通常都以設置 position 爲 absolute 的絕對定位方式。HT 的組件通常都會嵌入BorderPane、SplitView 和 TabView等容器中使用，而最外層的 HT 組件則須要用戶手工將 getView()返回的底層 div 元素添加到頁面的 DOM元素中，這裏須要注意的是，當父容器大小變化時，若是父容器是 BorderPane和 SplitView 等這些 HT 預約義的容器組件，則 HT 的容器會自動遞歸調用孩子組件 invalidate函數通知更新。但若是父容器是原生的 html元素， 則 HT 組件沒法獲知須要更新，所以最外層的 HT 組件通常須要監聽 window的窗口大小變化事件，調用最外層組件 invalidate函數進行更新。

爲了最外層組件加載填充滿窗口的方便性，HT 的全部組件都有 addToDOM 函數，其實現邏輯以下，其中 iv 是 invalidate的簡寫：

addToDOM = function(){ var self = this, view = self.getView(), //獲取底層 div style = view.style; document.body.appendChild(view); //將組件底層 div 添加進 body 體中 style.left = '0';//ht 的組件默認將 position 設置爲 absolute 絕對定位 style.right = '0'; style.top = '0'; style.bottom = '0'; window.addEventListener('resize', function () { self.iv(); }, false); }

接下來咱們要引入「數據容器」的概念，顧名思義，就是裝載數據的容器，數據容器 ht.DataModel(如下簡稱 DataModel)做爲承載 Data 數據的模型，管理着 Data 數據的增刪以及變化事件派發， HT 框架全部組件都是經過綁定 DataModel，以不一樣的形式呈現到用戶界面，能夠經過 view.getDataModel() （簡寫爲 view.dm()）方式獲取數據容器；同時組件也會監聽 DataModel 模型的變化事件（view.getSelectionModel()，簡寫爲 view.sm()）， 實時同步更新界面數據信息，掌握了 DataModel 的操做就掌握了全部組件的模型驅動方式。

咱們要建立兩個節點 ht.Node（繼承於 ht.Data 類），一個服務器，一個客戶端，中間連線兩條以及一條自環的連線，這些都是 Data 數據，都須要添加進 DataModel 數據容器中。可是咱們得先建立這個數據節點，用 HT 只須要兩句話就能將節點添加進數據容器中了，方法跟上面建立拓撲組件的方法很像，拓撲組件是添加進 body 體中，而節點是添加進數據容器中：

var server = new ht.Node();//建立「服務器」數據節點 graphView.dm().add(server);//將節點添加進數據容器 graphView.dm() 中

客戶端也是同樣的建立方式，節點名爲 client。爲了美觀，我給服務器和客戶端的節點都設置了圖片，設置圖片有兩種方式：

• 直接將圖片相對或絕對路徑，設置到數據模型的相應屬性上，server.setImage('images/server.png')
• 先經過 ht.Default.setImage('server', 'images/server.png') 進行註冊，再將註冊名稱設置到模型上 server.setImage('server')

直接設置路徑方式開發方便，無需提早註冊圖片，但數據模型序列化時圖片路徑佔用內存較多，未來圖片路徑變化後不利於管理維護，兩種方式都是正確的使用方式，可根據項目狀況選中不一樣方式或混合使用。 若是採用 url 的路徑方式 HT 內部會自動加載圖片，並在 onload 以後自動更新相應的視圖組件。

HT 的框架下圖片被賦予了更普遍的含義，HT提供了自定義 JSON 格式的矢量描述形式，以 HT 標準定義的 JSON 矢量格式， 也能夠做爲圖片進行註冊和使用，HT 的矢量方式比傳統圖片格式更節省空間，縮放不失真，最強大之處在於矢量的全部圖形參數， 皆可與 Data 模型上的數據動態綁定，具體說明參見矢量手冊，如今我這邊的講解還沒到這個步驟，感興趣的能夠自行了解。

接着是建立兩個節點之間的連線，ht.Edge 類型用於鏈接起始和目標兩個 Node 節點，兩個節點間能夠有多條 Edge 存在，也容許起始和目標爲同一節點。爲同一節點的狀況就是造成自環的狀況啦~這裏有三條連線，因爲有兩條相似，我就只將直線連線和自環的連線代碼貼出來進行解釋：

var edge = new ht.Edge(server, client);//建立連線節點，參數爲起始節點和目標節點 graphView.dm().add(edge);//將連線節點添加進數據容器中 var cirEdge = new ht.Edge(server, server);//這個連線的起始節點和目標節點都爲同一個節點，造成自環 graphView.dm().add(cirEdge);

連線節點也繼承於 Data 類，因此添加進數據容器的方式也是同樣的。至於連線上面的字，則是經過 setStyle 方法來實現的。

HT 的數據 Data 可分爲三種屬性類型：

• get/set 或 is/set類型，例如 getName(0/setName('ht') 和 isExpanded()，用於經常使用屬性操做
• attr 類型，經過 getAttr(name)和 setAttr(key, value) 存取，該類型是 HT 預留給用戶存儲業務數據
• style 類型，經過 getStyle(name)和 setStyle(key, value) 進行操做，GraphView 上圖元樣式由該類型屬性控制

這裏我是經過 style 類型來添加的文字說明，經過 ‘label’ 屬性設置顯示的文字：

edge.s({//setStyle 的簡寫
    'label': '請求',//設置文字 'label.position': 3//設置文字位置 });

最終顯示文字由 GraphView.getLabel 函數決定：

getLabel: function (data) { var label = data.getStyle('label');//獲取 style 樣式中的 label 屬性的 value return label === undefined ? data.getName() : label; }

上面還有一個文字位置，是 HT 封裝的位置，具體顯示位置以下：

其中 17 爲中心位置，你們可根據這個位置自行調整看看效果，位置的具體說明請參考 HT for Web 位置手冊。學習web前端:http://www.zhihaijiangku.com