一種基於flex的可視化多層流量切分界面的實現

1.      背景介紹

         策略開發人員在完成策略以後，在全流量上線以前要評估新的策略的優劣，經常使用的評估方法是A-B測試，作法是在全流量中抽樣出兩份小流量，分別走新策略分支和舊策略分支，經過對比這兩份流量下的各指標的差別，咱們能夠評估出新策略的優劣，進而決定新策略是否全流量。咱們把抽樣的過程分爲流量切分和流量篩選兩個步驟。流量切分的邏輯較爲複雜，包含多種切分類型和多層嵌套，另外爲了保證靈活性，層的組合應該是任意的。

         爲了便於流量管理，咱們須要將這個過程平臺化，這樣就須要找到一種形象化的表現方式，將多層流量切分這個過程表現出來，顯然這種需求下，簡單的輸入框、下拉框等控件是不能知足需求的，這就須要構建出可視化的多層流量切分功能，使流量切分這個複雜的動做變得低學習成本、便於理解。

 

圖1.1 可視化流量切分示意圖

         上圖是多層流量切分的一個效果假象圖，爲了便於理解和管理，咱們將多層流量切分過程當中使用的到的元素劃分爲三種：水平層、垂直層、抽樣節點這三個元素，爲了方便使用，咱們會將其封裝爲基本的控件，供用戶直接拖拽使用，下面咱們介紹一下各個元素的含義，以方便下文的直接使用。

•  水平層：水平層是指不進行任何流量的切分的層，它是抽樣節點以及子層的承載者，如上面的二、三、4號層。在其內部能夠創建子水平層、子垂直層和抽樣節點，可是水平層中不能即含有子層又含有抽樣節點，不能既含有水平層又含有垂直層。
•   垂直層：垂直層是用來切分流量的，它將父層的流量切分，變成多個子流量層，這些被切分出來的流量層內部能夠採用不一樣的流量切分類型。垂直層中不能直接包含抽樣節點，必須在其內部創建水平層，才能創建抽樣節點，在其內部不能直接包含子垂直層，必須創建水平層，例如，圖1.1中的五、六、九、十、11號層。
•  抽樣節點：抽樣節點是流量切分的流量塊單位，每一個抽樣節點對應着一個流量區間和一個抽樣id，抽樣id是自增的，且不能修改，同時抽樣節點上面能夠配置condition，condition的做用就是咱們上文提到的流量篩選功能。

2.      架構設計

可視化多層流量切分採用的Flex技術實現，Flex 是一個高效、免費的開源框架，可用於構建具備表現力的 Web 應用程序，這些應用程序利用 Adobe Flash Player和 Adobe AIR, 運行時跨瀏覽器、桌面和操做系統實現一致的部署。能夠經過智能編碼、交互式遍歷調試以及可視設計用戶界面佈局等功能加快開發。

可視化多層流量切分功能採用MVC模式實現，其模塊結構以下圖所示，數據管理中心模塊的功能包括數據模型的構建、經過HTTP交互模塊與服務端交互數據、算法的封裝；邏輯控制模塊是數據管理中心與展示模塊之間溝通的橋樑，它能夠分派用戶的請求並選擇恰當的展示方式以用於顯示，同時它也能夠解釋用戶的操做並將它們映射到數據管理中心模塊，數據管理中心模塊予以計算。

圖1.2 可視化流量切分架構設計

3.      關鍵模塊實現介紹

3.1.  數據管理中心模塊設計

上文介紹的多層流量切分功能中用到的基本元素——水平層、垂直層、抽樣節點在數據管理中心模塊中都創建了相應的數據模型，當初始化程序的時候，數據管理中心模塊經過HTTP交互模塊與服務端交互獲取初始化數據，並將數據填充至基本的數據模型。

那麼這些基本元素的數據模型如何實現呢？咱們能夠從這些元素的特性着手分析，如圖1.1所示，整個可視化界面中，將層分爲垂直層和水平層，垂直層是如五、6號能夠將完整層分割開的層，水平層是如二、三、4號佔滿父層的層，能夠抽象層和數據節點爲樹結構，能夠看做是一種不徹底的紅黑樹，注意這裏的紅黑樹是一種不徹底符合規範的紅黑樹，咱們能夠將水平層看做爲黑色節點，垂直層看做爲紅色節點，數據節點看做爲葉子節點，建立樹的時候，咱們自動將不包含的抽樣節點的空層去掉，那麼從圖1.2結構就能夠轉化爲圖1.3的結構。

圖1.3 三種元素在數據管理中心的數據結構

         有了上面的數據結構模型，咱們就能夠在此基礎上封裝一些經常使用的功能函數了，咱們下面列舉幾個封裝的計算的例子：

1. 計算兩個抽樣節點是否會複用流量：

         兩個抽樣節點複用流量是指一次請求同時命中了這兩個抽樣節點，從圖1.4上面來看，若是兩個抽樣節點複用流量，咱們形象的表示爲，從垂直方向上劃一條線，咱們約定每個子層中咱們只可以通過一個抽樣節點，在這種狀況下，每條線能夠通過多個抽樣節點，也能夠不通過任何抽樣節點，若是兩個抽樣節點同時被穿中，就表示這兩個抽樣節點可能會複用流量。

圖1.3 流量複用示意圖

 

         判斷兩個抽樣節點是否可能會同時命中比較麻煩，咱們能夠換一下思惟，爲何會有兩個節點不能被同時命中，比較容易想到的就是他們位於同一個父層中，這種狀況下，兩個抽樣節點是不可能同時命中的了，還有一種狀況就是他們位於不一樣的父層中也有可能不能同時被命中，究其緣由主要是由於他們被垂直層隔開，例如，五、6兩個層中的數據節點是不可能同時劃中的。按照上面這個思路，咱們能夠編程序實現判斷過程，邏輯以下：

                         i.              判斷這兩個節點是否位於同一個父層節點中

                       ii.              追溯葉子節點的父節點，一直追溯到根節點，獲取到其中紅色節點，判斷紅色節點中是否有兄弟節點。好比，D1->7->5->2->1 紅色節點是5， D3->8->6->2->1，紅色節點是6，判斷紅色節點是不是兄弟節點，判斷方法爲是否父節點相同。

1. 計算某層中是否能夠添加其餘元素

         有了上面的數據結構，判斷某層中是否能夠添加其餘元素的實現思路比較簡單，按照咱們以前的約定，三種元素在某一個父層中是不能共存的，例如，不能在同一個層中即包含水平層又包含垂直層，同時也不能在一個父層中即包含層又包含抽樣節點，所以，這裏咱們的算法實現邏輯就是，獲取到該父層中的全部的元素，判讀其類別是否惟一便可。

1. 計算任意兩個抽樣節點的相互影響機率

         在多層流量切分的架構中，有機會流量複用的抽樣節點都是有必定的相互影響的機率，爲了方便用戶抉擇流量分層以及抽樣節點的排放位置，咱們須要計算出各個抽樣節點之間的相互影響機率，計算的數據結果也是基於上面介紹的結構，算法步驟以下：

                         i.              追溯這兩個抽樣節點的父層路徑，一直追溯到共同的父層爲止，例如D1能夠追溯爲D1->7->5->2->1，D8能夠追溯爲D8->12->9->4->1，這樣咱們就追溯到了他們的共同的父層1，這裏咱們首先複用一下上面計算兩個抽樣節點是否會複用流量的算法，計算一下這兩個抽樣節點是否可能複用流量。若是沒有機會複用流量，則直接返回0%。

                       ii.              若是這兩個抽樣節點有機會複用流量，按照追溯的父層路徑計算相互影響機率，如上面的例子，D1和D8的相互影響機率爲：

（D1的流量百分比*7號層的百分比*5號層的百分比*2號層的百分比）*（D8的流量百分比*12號層的百分比*9號層的百分比*4號層的百分比）

1. 計算層或者抽樣節點的插入點

         插入點判斷也是基於上面這個數據結構算法封裝的算法，它的實現思想是遍歷須要插入的父層中的全部的子元素，依據上面的約定，同一父層下的元素類型是惟一的，所以，咱們只須要遍歷一下各元素之間縫隙，若是能夠空間大小能夠插入某一元素，則咱們能夠將該元素插入到指定的位置。

         上面咱們舉例列舉了4種數據管理中心模塊中封裝的算法，數據管理中心中，根據上面的數據結構，咱們還能夠封裝出其餘的數據基礎算法，供邏輯控制模塊使用。

3.2.  展示模塊的設計

         展示模塊封裝了展示繪圖的基本方法，實現的思想是從小粒度到總體的渲染過程，首先，咱們實現了三種基本元素的展示樣式，例如，垂直層和水平層是統一的展示樣式，它的基本繪圖單元是矩形，垂直層和水平層爲了作區分，它們的填充色是不同的，抽樣節點的基本繪圖單元是圖片，抽樣節點再每種不一樣的狀態下，展示的圖片是不同的。

         展示模塊接收的繪圖數據格式是上面介紹的樹狀結構，所以，展示界面渲染其實就是一個樹的遍歷的過程，咱們採用的遍歷方式是前序遍歷，例如，若是傳如的數據格式爲圖1.2的形式，那麼前序遍歷的結果就是：

1->2->5->7->D1->D2->6->8->D3->D4->3->D5->D6->D7->4->9->12->D8->D9->15->D15->10->13->D10->D11->16->D16->11->14->D12->D13->D14

1.動態渲染過程當中的元素大小自動調節問題

         渲染過程會有一個問題，這是從外向內的一種渲染方式，咱們必然會先固定一個最外層的高度和寬度，那麼這樣就會致使初始設定的高度或寬度太小，放不下內部的各個元素，針對這個問題，首先爲了處理簡單，咱們能夠將每層的高度固定下來，寬度是可變的，基於這種前提，咱們處理上面這個問題的方案有二，一種是預先計算好渲染所須要的寬度，另外一種是方法是繪圖過程當中動態的調整最外層的寬度，若是數據量比較大的狀況下，選用方案一的效率較高，若是數據量不大，這兩種方案的差別是不大的，兩種渲染方式的實現邏輯以下圖所示。

圖1.4 動態渲染過程當中的元素大小自動調節方案，預先計算結果（左），渲染過程當中自動調節（右）

2.控件拖拽與雙擊的實現

         控件的拖拽與雙擊實現比較簡單，主要經過事件的方式來實現，預先在繪圖面板上面增長了onCanvasMouseDown（鼠標按下），onCanvasMouseMove（鼠標移動），onIconMouseDown（控件鼠標按下），onIconDoubleClick（控件雙擊）等事件，在不一樣的狀況下展示的樣式作出調整便可。

by randy_yao