使用

require("MyAapp.DepTree", function (DepTree) {DepTree(({renderTo: "holder",width: "820",height: "580",data: [{ "name": "System" },{ "name": "Util" },{ "name": "System.Model", "deps": ["System", "Util"] },{ "name": "System.Model.Animate", "deps": ["System.Model"] },{ "name": "System.Model.User", "deps": ["System.Model.Animate", "Util"] },{ "name": "OurApp", "deps": ["System.Model.User", "Util"] }]})) });

其中：

renderTo是容器

width和height是容器的寬高

data是模塊和依賴關(guān)系

使用時候請自行引用http://raphaeljs.com/

預(yù)覽

其中，引用關(guān)系自下而上，上面的模塊引用下面的模塊，粗的線條代表相鄰level之間有引用關(guān)系，細線代表跨級（level）間的引用關(guān)系。

技術(shù)細節(jié)

此工具完全基于http://raphaeljs.com/開發(fā)，所以兼容性良好，raphaeljs支持IE6+,但是由于ie678不支持svg元素的getBBox來獲取text的寬高，所以在老版本ie下幾乎不能直視，所以建議使用現(xiàn)代瀏覽器。

樹狀程序設(shè)計：

要生成樹狀依賴關(guān)系圖，要經(jīng)過下面程序步驟：

1.找到最底層的模塊，也就是level為0，他們不依賴于任何模塊

2.從最底層開始，遞歸找引用上層的模塊，依次向上，目的就是計算每一模塊的level,是該層必須滿足

????? a.必須依賴上一層???

????? b.不依賴同層或者其他層的

????? c.level++

依賴線條的繪制：

經(jīng)過上面的管線，每個模塊的level遍歷出來，當(dāng)繪制依賴于線條的時候，根據(jù)level之差決定繪制粗線還是細線，也決定了線條的顏色。

布局自動適應(yīng)：

其中，布局自動使用依賴于getBBox獲取svg文本元素的高度和寬度，計算各種寬度與間距，ie678不支持，便只好放棄ie678。

文本的圓角背景的寬高由文本的寬高決定

文字與圓角背景的容器之間的左右間距由每一層（level）的模塊的個數(shù)決定

文字與圓角背景的容器之間的上下間距由max level的數(shù)值決定

在線演示

傳送門：http://htmlcssjs.duapp.com/demo50/index.html

DepTree.js下載：http://htmlcssjs.duapp.com/demo50/deptree.js

轉(zhuǎn)載于:https://www.cnblogs.com/iamzhanglei/p/3798987.html

總結(jié)

以上是生活随笔為你收集整理的AMD and CMD are dead之KMD.js依赖可视化工具发布的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。