-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
294 lines (188 loc) · 16 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hexo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
<link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
<link rel="icon" href="/favicon.png">
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/css/style.css">
<meta name="generator" content="Hexo 5.0.0"></head>
<body>
<div id="container">
<div id="wrap">
<header id="header">
<div id="banner"></div>
<div id="header-outer" class="outer">
<div id="header-title" class="inner">
<h1 id="logo-wrap">
<a href="/" id="logo">Hexo</a>
</h1>
</div>
<div id="header-inner" class="inner">
<nav id="main-nav">
<a id="main-nav-toggle" class="nav-icon"></a>
<a class="main-nav-link" href="/">Home</a>
<a class="main-nav-link" href="/archives">Archives</a>
</nav>
<nav id="sub-nav">
<a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
<a id="nav-search-btn" class="nav-icon" title="Search"></a>
</nav>
<div id="search-form-wrap">
<form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"></button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
</div>
</div>
</div>
</header>
<div class="outer">
<section id="main">
<article id="post-init-hexo" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2020/08/09/init-hexo/" class="article-date">
<time datetime="2020-08-08T16:14:51.009Z" itemprop="datePublished">2020-08-09</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/08/09/init-hexo/">Hexo + Gitpages 博客搭建</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="Hexo使用"><a href="#Hexo使用" class="headerlink" title="Hexo使用"></a>Hexo使用</h2><p><a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/docs/asset-folders.html">官网</a></p>
<h2 id="Hexo常用命令使用"><a href="#Hexo常用命令使用" class="headerlink" title="Hexo常用命令使用"></a>Hexo常用命令使用</h2><h3 id="新建文章"><a href="#新建文章" class="headerlink" title="新建文章"></a>新建文章</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/writing.html">Writing</a></p>
<h3 id="启动本地服务"><a href="#启动本地服务" class="headerlink" title="启动本地服务"></a>启动本地服务</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/server.html">Server</a></p>
<h3 id="生成静态文件"><a href="#生成静态文件" class="headerlink" title="生成静态文件"></a>生成静态文件</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/generating.html">Generating</a></p>
<h3 id="部署到远端站点"><a href="#部署到远端站点" class="headerlink" title="部署到远端站点"></a>部署到远端站点</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2020/08/09/init-hexo/" data-id="ckdlu007i0007gmvocl9l27xa" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-js-flowchart" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2020/08/08/js-flowchart/" class="article-date">
<time datetime="2020-08-08T13:00:37.000Z" itemprop="datePublished">2020-08-08</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/08/08/js-flowchart/">Javascript 流程图框架对比</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h2><p>需要实现一个支持拖拽的流程图页面，同时支持文件管理等，需要考虑对于三大框架的支持性，需要考虑后续可维护性，证书是否商用</p>
<h2 id="绘图框架对比"><a href="#绘图框架对比" class="headerlink" title="绘图框架对比"></a>绘图框架对比</h2><p>目前主流绘图软件对比</p>
<p><a target="_blank" rel="noopener" href="https://www.npmtrends.com/Joint-vs-jsplumb-vs-mxgraph-vs-echarts-vs-gojs-vs-d3-vs-mermaid-vs-chart.js-vs-flowchart.js">https://www.npmtrends.com/Joint-vs-jsplumb-vs-mxgraph-vs-echarts-vs-gojs-vs-d3-vs-mermaid-vs-chart.js-vs-flowchart.js</a></p>
<h3 id="趋势"><a href="#趋势" class="headerlink" title="趋势"></a>趋势</h3><img src="/2020/08/08/js-flowchart/trend.png" class="" title="趋势图">
<h3 id="使用分析"><a href="#使用分析" class="headerlink" title="使用分析"></a>使用分析</h3><img src="/2020/08/08/js-flowchart/stats.png" class="" title="使用分析">
<h2 id="绘图框架分类"><a href="#绘图框架分类" class="headerlink" title="绘图框架分类"></a>绘图框架分类</h2><p>依照框架程度的封装程度可以分为下列两个等级：</p>
<ol>
<li>底层绘图框架 如D3.js</li>
<li>中等封装框架 如Gojs，jsplumb，Joint，mxgraph，node-red等</li>
</ol>
<h2 id="详细框架对比"><a href="#详细框架对比" class="headerlink" title="详细框架对比"></a>详细框架对比</h2><h3 id="底层绘图框架"><a href="#底层绘图框架" class="headerlink" title="底层绘图框架"></a>底层绘图框架</h3><h4 id="D3-js-开源"><a href="#D3-js-开源" class="headerlink" title="D3.js 开源"></a>D3.js 开源</h4><p><a target="_blank" rel="noopener" href="https://github.com/d3/d3">github</a> <a target="_blank" rel="noopener" href="https://d3js.org/">官网</a><br>D3(Data-Driven Documents) 是一个帮助开发者通过SVG,HTML,Canvas来可视化数据的JS库.相比于常规开箱即用的数据可视化库,D3由于更为底层(类似JQuery)，开发灵活性更高，但是学习成本较大，无法短期内上手，开发成本也很高。</p>
<img src="/2020/08/08/js-flowchart/d3.png" class="" title="D3">
<h3 id="中等封装框架"><a href="#中等封装框架" class="headerlink" title="中等封装框架"></a>中等封装框架</h3><h4 id="mermaid-js-开源"><a href="#mermaid-js-开源" class="headerlink" title="mermaid.js 开源"></a>mermaid.js 开源</h4><p>marmaid 是一个用于markdown生成图表的js库，原生不支持拖拽，不符合业务场景<br><a target="_blank" rel="noopener" href="https://github.com/mermaid-js/mermaid">github</a> <a target="_blank" rel="noopener" href="http://mermaid-js.github.io/mermaid/">官网</a></p>
<h4 id="GoJS-需付费"><a href="#GoJS-需付费" class="headerlink" title="GoJS 需付费"></a>GoJS 需付费</h4><p><a target="_blank" rel="noopener" href="https://gojs.net/latest/index.html">官网</a></p>
<ul>
<li>GoJS是一个实现交互类可视化图表（比如流程图，树图，关系图，力导图，思维导图等等）的JS库。</li>
<li>GoJS是一个MVVM模型库，底层基于canvas实现，对于Angular的支持比较好</li>
<li>GoJS为用户交互提供了许多高级功能，如拖放，删除，复制和粘贴，撤销与重做，文本编辑，工具提示，上下文菜单，自动布局，数据绑定和模型，事务状态和撤销管理，事件处理程序，命令以及用于自定义操作的可扩展工具系统等等。</li>
<li>价格比较贵，单应用单域名永久授权就要7千美刀</li>
</ul>
<h4 id="Joint-分为社区版和收费版"><a href="#Joint-分为社区版和收费版" class="headerlink" title="Joint 分为社区版和收费版"></a>Joint 分为社区版和收费版</h4><p><a target="_blank" rel="noopener" href="https://www.jointjs.com/">官网</a></p>
<ul>
<li>Joint基于JQuery+lodash+Backbone技术栈，底层基于html+svg，用JQuery维护dom，用lodash辅助计算以及渲染模版，用Backbone的Model和Events定义实体和暴露接口，并且自己实现了一套SVG渲染引擎。</li>
<li>对Backbone比较熟悉的同学使用Joint上手会比较快。Joint自定义节点（使用模版）非常方便，动画相关的功能也很强大。另外，Joint还可以和布局库dagre配合使用，实现自动布局。</li>
<li>Joint作为rapid的社区版（开源版本）功能并不全面，很多时候要真正应用在项目里需要进行深入的定制。另外，其维护者对github上的issue响应速度很慢，有时候bug report也没有回应。</li>
</ul>
<p><a target="_blank" rel="noopener" href="https://www.jointjs.com/rappid-comparison">Joint 社区版和付费版对比</a></p>
<h4 id="jsplumb-分为社区版和收费版"><a href="#jsplumb-分为社区版和收费版" class="headerlink" title="jsplumb 分为社区版和收费版"></a>jsplumb 分为社区版和收费版</h4><p><a target="_blank" rel="noopener" href="https://jsplumbtoolkit.com/">官网</a><br>jsPlumb采用的是svg和html混排的做法，把所有节点都是html，所有连线都是单独的svg节点包裹的path元素。这么做的好处是主要是可以兼容低版本浏览器，并且节点可以充分利用css进行定制。缺点也很明显，首先文档结构散乱，很难导出、转换，其次画出来的图总有莫名的违和感，感觉是像素图形和矢量图形生硬地放到了一起，再次，一旦css在js之后加载完成，jsPlumb的图就崩溃了，而jsPlumb的css也是有侵入性的。</p>
<p>价格也比较贵,社区版的功能比较少</p>
<img src="/2020/08/08/js-flowchart/jsplumb_price.png" class="" title="D3">
<h4 id="mxGraph-开源"><a href="#mxGraph-开源" class="headerlink" title="mxGraph 开源"></a>mxGraph 开源</h4><p>这个商业产品是上述提到的可视化建模产品里最强大的一个。从05年立项至今，这个库开发时间已有十年。而它的前身JGraph立项时间更早，是2000年。虽然开发模式落后（还是绑定全局变量的方式）、体积庞大，但mxGraph的设计、功能、文档各个方面都难以挑剔。前端可视化建模的标杆作品<a target="_blank" rel="noopener" href="http://draw.io/">draw.io</a>以及中文作图社区<a target="_blank" rel="noopener" href="https://www.processon.com/">ProcessOn</a>都是基于这个库的。基本上目前mxGraph能做到的，就是前端可视化建模能做到的。<br><a href="">github</a> <a target="_blank" rel="noopener" href="https://jgraph.github.io/mxgraph/">官网</a><br><a target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000018510996">mxGraph 入门实例教程</a><br><a target="_blank" rel="noopener" href="https://yejinzhan.gitee.io/2019/03/21/%E8%AE%B0%E4%B8%80%E6%AC%A1%E7%BB%98%E5%9B%BE%E6%A1%86%E6%9E%B6%E6%8A%80%E6%9C%AF%E9%80%89%E5%9E%8B_jsPlumb_VS_mxGraph/">记一次绘图框架技术选型 - jsPlumb VS mxGraph</a><br><a target="_blank" rel="noopener" href="https://itnext.io/how-to-integrate-mxgraph-with-angular-6-18c3a2bb8566">Angular使用</a> <a target="_blank" rel="noopener" href="https://github.com/diegogusava/angular-mxgraph">使用范例</a></p>
<h4 id="node-red-开源"><a href="#node-red-开源" class="headerlink" title="node-red 开源"></a>node-red 开源</h4><p><a target="_blank" rel="noopener" href="https://github.com/node-red/node-red">github</a><br>node-red是IBM公司开发的一个开源的JS绘图库，是一个OpenJS基金会项目。</p>
<p>使用方式，通过iframe的方式嵌入到angular应用中，使用不是很方便</p>
<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><ol>
<li><a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/45264866">12 个评估 JS 库你需要关心的事</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/leungwensen/blog/blob/gh-pages/2015/frontend-visual-modeling.md">前端可视化建模技术概览</a></li>
<li><a target="_blank" rel="noopener" href="https://medium.com/thinkspecial/ui-ux-workflow-design-5329edf9ba0b">UI/UX Workflow Design Analyzing libs</a></li>
</ol>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2020/08/08/js-flowchart/" data-id="ckdnbmq7x0000bxvoa03760uq" class="article-share-link">Share</a>
<ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/%E5%8F%AF%E8%A7%86%E5%8C%96/" rel="tag">可视化</a></li></ul>
</footer>
</div>
</article>
</section>
<aside id="sidebar">
<div class="widget-wrap">
<h3 class="widget-title">Tags</h3>
<div class="widget">
<ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E5%8F%AF%E8%A7%86%E5%8C%96/" rel="tag">可视化</a></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">Tag Cloud</h3>
<div class="widget tagcloud">
<a href="/tags/%E5%8F%AF%E8%A7%86%E5%8C%96/" style="font-size: 10px;">可视化</a>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">Archives</h3>
<div class="widget">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/08/">August 2020</a></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">Recent Posts</h3>
<div class="widget">
<ul>
<li>
<a href="/2020/08/09/init-hexo/">Hexo + Gitpages 博客搭建</a>
</li>
<li>
<a href="/2020/08/08/js-flowchart/">Javascript 流程图框架对比</a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info" class="inner">
© 2020 John Doe<br>
Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
</div>
</div>
</footer>
</div>
<nav id="mobile-nav">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/archives" class="mobile-nav-link">Archives</a>
</nav>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script src="/js/script.js"></script>
</div>
</body>
</html>