整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
js2flowchart 是一個(gè)可視化庫(kù)，可將任何JavaScript代碼轉(zhuǎn)換為漂亮的SVG流程圖。你可以輕松地利用它學(xué)習(xí)其他代碼、設(shè)計(jì)你的代碼、重構(gòu)代碼、解釋代碼。這樣一個(gè)強(qiáng)大的神器，真的值得你擁有，看下面截圖就知道了，有沒(méi)有很強(qiáng)大。
https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart
yarn add js2flowchart
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>fly測(cè)試</title> </head> <body> <div style="width:50%;float:left"> <p id="svgImage"></p> </div> <div style="width:50%;float:left"> <textarea name="" id="jsContent" style="width: 90%;height:900px" oninput="createSVG()"> </textarea> </div> <script src="./node_modules/js2flowchart/dist/js2flowchart.js"></script> <script src="./index.js"></script> </body> </html>
index.js
createSVG = () => {
document.getElementById("svgImage").innerHTML = null;
let code = document.getElementById("jsContent").value;
const { createFlowTreeBuilder, createSVGRender } = js2flowchart;
const flowTreeBuilder = createFlowTreeBuilder(),
svgRender = createSVGRender();
const flowTree = flowTreeBuilder.build(code),
shapesTree = svgRender.buildShapesTree(flowTree);
const svg = shapesTree.print();
document.getElementById("svgImage").innerHTML = svg;
};
createSVG();
我們直接在文本域中輸入自己的代碼，如下，左邊會(huì)直接生成流程圖，這只是一個(gè)簡(jiǎn)單的示例：
js2flowchart獲取您的JS代碼并返回SVG流程圖，適用于客戶端/服務(wù)器，支持ES6。
主要特點(diǎn)：
用例場(chǎng)景：
以上所有功能可以直接到github上詳細(xì)了解，用法太多，這里就不在介紹了！
這么強(qiáng)大的東西，有人肯定說(shuō)如果在開(kāi)發(fā)的時(shí)候?qū)崟r(shí)看到流程圖有助于理解代碼，官網(wǎng)提供了插件（我在最新版中測(cè)試失效了，不知道是否是我使用的有問(wèn)題還是插件本身的問(wèn)題），如果感興趣的可以到擴(kuò)展商店搜索code-flowchart。如果測(cè)試成功，歡迎到評(píng)論區(qū)分享。以下是我vscode版本和官網(wǎng)的插件使用截圖。
如果利用好這個(gè)插件，可以開(kāi)發(fā)出Chrome插件，以及其他JavaScript編輯器或者IDEA的插件，由于官方github已經(jīng)幾個(gè)月沒(méi)更新了，所以還不知道未來(lái)會(huì)不會(huì)支持！
js2flowchart是一個(gè)比較實(shí)用的Javascript插件，可以用來(lái)做很多事情，不管是自己寫代碼。還是閱讀別人的代碼，都無(wú)疑是一大助力，能夠幫助我們提升我們的代碼能力，更容易的閱讀代碼，這樣學(xué)習(xí)起來(lái)就快了，希望對(duì)你有所幫助！如果有什么好的建議，也可以到評(píng)論區(qū)分享！
要整理你的頁(yè)面重量，但是要保持所有的酷功能嗎?繼續(xù)閱讀，看看一個(gè)開(kāi)發(fā)人員如何擺脫SVG，并在它的位置使用CSS。
獲得高級(jí)管理人員手冊(cè)的重要趨勢(shì)、技巧和戰(zhàn)略，以競(jìng)爭(zhēng)和贏得數(shù)字經(jīng)濟(jì)。
在這個(gè)假期過(guò)后，我們中的許多人都想減掉一點(diǎn)體重，那就是體重。在我的應(yīng)用中，我廣泛地使用SVG元素作為圖像、徽標(biāo)和圖標(biāo)。直到最近，我都直接在HTML中呈現(xiàn)SVG元素。這是最簡(jiǎn)單的方法。正如您可能通過(guò)我的intro語(yǔ)句所猜測(cè)的那樣，我一直在通過(guò)從HTML中刪除SVG元素來(lái)減少頁(yè)面權(quán)重。它的效果如何?在進(jìn)行更改之前，主頁(yè)是14kb (77kb解壓縮)。更改后，主頁(yè)為6kb(未壓縮的30kb)。這是每一頁(yè)的“超過(guò)有線”字節(jié)的57%。我到底做了什么，我做了哪些權(quán)衡來(lái)獲得一個(gè)更小的頁(yè)面?讓我們看看以前如何使用SVG。
這是原始的SVG:
<?xml version="1.0" encoding="UTF-8"?>
<svg fill="#fff" class="issue-icon" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="m8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zm0 14c-3.309 0-6-2.692-6-6s2.691-6 6-6c3.307 0 6 2.692 6 6s-2.693 6-6 6z" clip-rule="evenodd" fill-rule="evenodd"/>
<path d="M8.5,3h-1C7.224,3,7,3.224,7,3.5v6C7,9.776,7.224,10,7.5,10h1 C8.776,10,9,9.776,9,9.5v-6C9,3.224,8.776,3,8.5,3z" clip-rule="evenodd" fill-rule="evenodd"/>
<path d="M8.5,11h-1C7.224,11,7,11.224,7,11.5v1C7,12.776,7.224,13,7.5,13h1 C8.776,13,9,12.776,9,12.5v-1C9,11.224,8.776,11,8.5,11z" clip-rule="evenodd" fill-rule="evenodd"/>
</svg>
我將它定義為一個(gè)Rails“helper”，它將直接呈現(xiàn)在HTML中。這個(gè)元素在頁(yè)面上重復(fù)了很多次，每次我們必須發(fā)送完全相同的SVG字符串，該字符串將相同的字節(jié)數(shù)添加到頁(yè)面大小。為了解決這個(gè)問(wèn)題，我將SVG代碼移動(dòng)到我的圖像目錄中，然后我使用鏈輪來(lái)“內(nèi)聯(lián)”圖像通過(guò)一個(gè)數(shù)據(jù)url。
數(shù)據(jù)URL如何工作?通常，在CSS元素背景下的URL會(huì)說(shuō)“出去，在不同的URL中獲取該資產(chǎn)”。相反，一個(gè)“數(shù)據(jù)”URL會(huì)編碼呈現(xiàn)圖像所需的所有數(shù)據(jù)，而無(wú)需創(chuàng)建新的網(wǎng)絡(luò)請(qǐng)求。這里有一個(gè)例子:
background: url("data:image/svg+xml;charset=utf-8,
%3Csvg
version='1.1'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
width='512'
height='512'
viewBox='0 0 512 512'
%3E%3Cpath d='M224 387.814v124.186l-192-192 192-192v126.912c223.375 5.24 213.794-151.896 156.931-254.912 140.355 151.707 110.55 394.785-156.931 387.814z'
%3E%3C/path%3E
%3C/svg%3E");
這個(gè)“url”包含整個(gè)圖像內(nèi)容，不需要發(fā)出HTTP請(qǐng)求。
在鏈輪中，當(dāng)前支持的數(shù)據(jù)URL通過(guò)創(chuàng)建一個(gè)Base64字符串來(lái)支持，但是在以后的版本中，它將是URL轉(zhuǎn)義，以避免使用Base64的額外開(kāi)銷。您可以閱讀更多關(guān)于為什么不使用base64 SVG的內(nèi)聯(lián)圖像。
以前，我說(shuō)過(guò)我用鏈輪來(lái)做這個(gè)改變。在我的項(xiàng)目中，這是sassrails添加警告的咒語(yǔ)。svg作為我的CSS的數(shù)據(jù)url:
.warning-svg {
width: 16px;
height: 16px;
display: inline-block;
background: asset-data-url("warning.svg");
}
資產(chǎn)數(shù)據(jù)url被解釋為一個(gè)指令，它接受警告的內(nèi)容。svg圖像和“inlines”它們使得不需要額外的HTTP請(qǐng)求。如果你用的是ERB，它可能是這樣的:
.warning-svg {
width: 16px;
height: 16px;
display: inline-block;
background: url(<%= asset_data_uri 'warning.svg' %>);
}
現(xiàn)在，當(dāng)您訪問(wèn)該頁(yè)面時(shí)，SVG元素僅通過(guò)應(yīng)用程序發(fā)送一次。css，然后被重新使用很多次，通過(guò)war- svg類。這意味著為最終用戶下載HTML所需的時(shí)間更少，而且由于這些資產(chǎn)是與未來(lái)的高速緩存頭一起服務(wù)的，所以它們只會(huì)被瀏覽器下載一次。更好的是，該站點(diǎn)正在Cloudflare CDN的后面服務(wù)，因此對(duì)于稍微大一點(diǎn)的CSS文件，應(yīng)用服務(wù)器上沒(méi)有額外的負(fù)擔(dān)。
您可以看到我實(shí)現(xiàn)此更改的pull請(qǐng)求。
有什么缺點(diǎn)嗎?這種方法(對(duì)我來(lái)說(shuō))最大的問(wèn)題是，我失去了通過(guò)CSS控制SVG元素填充(顏色)的能力。以前在HTML中使用SVG，如果我想改變?cè)氐念伾芎?jiǎn)單，我在CSS中做了。這里有一個(gè)例子，可以用CSS將填充色改為紅色。
一旦我將SVG元素移出頁(yè)面，我就無(wú)法通過(guò)純CSS進(jìn)行這種類型的修改。對(duì)于這種情況，我決定轉(zhuǎn)換元素，使懸浮狀態(tài)變得明顯:
如果顏色變化是絕對(duì)需要的，那么我可以生成兩個(gè)具有不同填充值的SVG元素，并更改鼠標(biāo)懸空的背景元素。您可以在其他選項(xiàng)上看到一個(gè)堆棧溢出線程。
除了在主頁(yè)上使用“警告”SVG之外，我還在“repo show”頁(yè)面上使用它，但是它的填充不同。它是灰色的而不是白色的。在這種情況下，去掉顏色變化是不合適的;但是，我可以使用不透明的CSS屬性來(lái)近似一個(gè)顏色的變化，這將影響SVG元素。
如果您不想在CSS中使用數(shù)據(jù)URL，您也可以通過(guò)標(biāo)記將其呈現(xiàn)為普通圖像。您還可以使用使用標(biāo)記，它允許您通過(guò)HTML發(fā)送元素，但之后再使用和操作，就好像它是直接在HTML中一樣。
在我的例子中，所有呈現(xiàn)的元素都存在于我的絕大多數(shù)頁(yè)面中，所以將它們放在那些會(huì)被瀏覽器和我的CDN緩存的地方是有意義的。
一些關(guān)于將SVG元素轉(zhuǎn)換為內(nèi)聯(lián)CSS元素的說(shuō)明:
您需要確保將高度和寬度設(shè)置為元素，因?yàn)镾VG只是“背景”。
您還需要確保SVG正在被格式化并正確地服務(wù)。對(duì)我來(lái)說(shuō)，我有一個(gè)SVG元素，它缺少xml聲明:
<?xml version="1.0" encoding="UTF-8"?>
和相同的一個(gè)失蹤了xmlns = " http://www.w3.org/2000/svg "屬性。如果您在瀏覽器中通過(guò)CSS檢查器單擊圖像URL，它應(yīng)該顯示是否存在錯(cuò)誤。您還需要顯式地在圖像中設(shè)置填充屬性，否則，它們將默認(rèn)為黑色。
總的來(lái)說(shuō)，這一變化相當(dāng)簡(jiǎn)單，57%的小頁(yè)面也不太破舊。
雖然仍然有可能希望將SVG元素直接放到HTML中，但是考慮頁(yè)面的權(quán)重和成本。
下這個(gè)例子顯示了，在html中單擊命令按鈕設(shè)定svg中的矩形的填充顏色，并且調(diào)用svg的js函數(shù)FunCallByHtmlJs，產(chǎn)生個(gè)消息框。
在svg中，單擊矩形時(shí)，設(shè)置html中的text的文本內(nèi)容，并且調(diào)用html的js函數(shù)FunCallBySvgJs，產(chǎn)生個(gè)消息框。
svg文檔以嵌入在html文檔中運(yùn)行。
例子在IE 6.0 + Adobe SVG Viewer 3.03中文版下測(cè)試通過(guò)。
svg文件的代碼：
//文件名：Svg&HtmlInteractive.svg
<svg width="640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" onload="init(evt)" onclick="Click(evt)">
<script type="text/javascript">
var svgDoc = null ;
var svgRoot = null ;
var parentWnd = null ; //保存html的window對(duì)象
//初始化
function init(evt)
{
svgDoc = evt.target.ownerDocument ;
svgRoot = svgDoc.documentElement ; //在html中的第二種交互方式會(huì)用到
parentWnd = window.parent ; //ASV 3.0可以這么寫。英文6.0版的要換種寫法
if(parentWnd.document.title == null || parentWnd.document.title == '')
{
alert("請(qǐng)不要直接在瀏覽器中打開(kāi)'svg'文檔！");
//下面的代碼作用是不提示確認(rèn)關(guān)閉窗口
parentWnd.opener = null ;
parentWnd.open('', '_self') ;
parentWnd.close() ;
}
svgDoc.svgWnd = window ; //這里人為進(jìn)行設(shè)定，以便在html中的第一種交互方式中可以取的到svg的window對(duì)象
}
function FunCallByHtmlJs()
{
alert('這個(gè)消息框是在html的js中調(diào)用svg的js函數(shù)產(chǎn)生的。') ;
}
function Click(evt)
{
var id = evt.target.id ;
if(id == 'rect') //單擊在矩形上，而不是背景上時(shí)
{
if(parentWnd)
{
parentWnd.txt.value = '在svg中設(shè)置html中的text的文本內(nèi)容' ;
parentWnd.FunCallBySvgJs() ; //調(diào)用html中的js函數(shù)
}
}
}
</script>
<rect id="background" x="0" y="0" width="100%" height="100%" fill="gray" />
<rect id="rect" x="50" y="50" width="100" height="100" fill="green" />
<text font-family="SimSun" font-size="14" fill="yellow" x="50" y="50" id="text">單擊svg的矩形，設(shè)置html的text文本內(nèi)容</text>
</svg>
html文件的代碼：
//文件名：Svg&HtmlInteractive.html
<html>
<head>
<title>SVG與html的交互</title>
</head>
<body onload="htmInit()">
<script type=text/javascript>
var svgDoc = null;
var svgRoot = null;
var svgWnd = null; //svg的window對(duì)象
function htmInit()
{
txt.value = '';
}
function FunCallBySvgJs()
{
alert('這個(gè)消息框是在svg的js中調(diào)用html的js函數(shù)產(chǎn)生的。');
}
function Btn1Clk()
{
//第一種方式
svgDoc = emSvg.getSVGDocument();
if (svgDoc == null) return;
svgRoot = svgDoc.documentElement;
if (svgRoot == null) return;
var rect = svgRoot.getElementById('rect');
if(rect) rect.setAttribute('fill', 'blue');
svgWnd = svgDoc.svgWnd ; //這個(gè)window對(duì)象是在svg的初始化里面添加進(jìn)去的
if (svgWnd) svgWnd.FunCallByHtmlJs(); //調(diào)用svg里的js函數(shù)
}
function Btn2Clk()
{
//第二種方式
svgWnd = emSvg.window;
if(svgWnd == null) return;
svgRoot = svgWnd.svgRoot; //svgRoot在svg的js中是個(gè)全局的變量
if(svgRoot == null) return;
var rect = svgRoot.getElementById('rect');
if(rect) rect.setAttribute('fill', 'red');
svgWnd.FunCallByHtmlJs(); //調(diào)用svg里的js函數(shù)
}
</script>
<input type="button" value="設(shè)置svg中矩形的填充顏色為藍(lán)色" onclick="Btn1Clk()" />
<input type="button" value="設(shè)置svg中矩形的填充顏色為紅色" onclick="Btn2Clk()" />
<input id="txt" type="text" value="" />
<embed id="emSvg" runat="server" src="http://zg672313.blog.163.com/blog/SvgHtmlInteractive.svg" mce_src="http://zg672313.blog.163.com/blog/SvgHtmlInteractive.svg" width="100%" height="95%" wmode="transparent"/>
</body>
</html>
效果圖：
另外: 在aspx 頁(yè)面中，emSvg對(duì)象會(huì)找不會(huì)，應(yīng)該使用 document.getElementById("emSvg") 來(lái)查找 SVG對(duì)象
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
