2017年11月github上值得关注的开源项目,将JavaScr

作者:科技资讯

引言

js2flowchart 是八个可视化库,可将此外JavaScript代码转变为白玉无瑕的SVG流程图。你可以轻易地运用它上学其余代码、设计你的代码、重构代码、解释代码。那样二个强有力的神器,真的值得您抱有,看上面截图就领会了,有未有很强大。

图片 1

前面二个开荒者恒久是最不愿寂寞的一堆人,大家愿意折腾,愿意担当各样新鲜事物。 所以大家差非常少每一日都足以看出种种JS库/框架 平地而起何况被各类人说大话为神器

有一些经验的前端开采者会择需而取,未有经验的前端就有一些懵逼了,迷失在JS库海中。

这其间图片部分上传会失败,为了美丽的读书体验,移步到本人的github地址查阅原来的小说

Github

那篇作品根据 JS.ORG|STATSgithub最盛行的JS项目排行,给大家轻便表达表明

数据图表相关

  1. charts -- 轻易,响应快捷,具备零注重关系的今世SVG图表

    【官网】

  2. tikzcd-editor -- 用于制造可交流图的粗略可视化编辑器。

    【Demo】

    [图形上传战败...(image-4ff1d0-151二〇〇五372709卡塔尔国]

  3. wasm-particles -- 那是二个视觉基准,每种粒子从WebAssembly更新,然后用WebGL绘制到荧屏上。

    demo

  4. Wade -- 比不慢的1kb搜索

  5. lottie-web -- 解析Adobe After Effects动漫与Bodymovin一齐导出为json,并在运动器材上原生呈现

  6. luxon -- 在JS中运用日期和岁月的库

    官网

  7. date-fns -- 现代JavaScript日期实用程序库

  8. g2 -- 支付宝推出的粗略图表生成工具G2
    demo

  9. imaskjs -- vanilla js 输入掩码

    示例

设置使用

  • 安装
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测试</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,
 shapesTree = svgRender.buildShapesTree;
 const svg = shapesTree.print();
 document.getElementById("svgImage").innerHTML = svg;
};
createSVG();

大家间接在文本域中输入本身的代码,如下,左侧会一贯生成流程图,那只是二个简便的现身说法:

图片 2

NO.1FreeCodeCamp中文站

图片 3

1FreeCodeCamp

FreeCodeCamp是叁个无偿赞助你学习编制程序的开源社区。你能够由此FCC提供的优越、免费的在线教程学习,达成编程挑衅,以致在线下移动。
自家加入过德雷斯顿FCC编制程序竞赛,加入比赛的进程独有贰个感到就是'根本停不下来'。以为和打游戏同样,一步步的闯关。同时能够印证本身的实力。极其是对此本身不熟知的框架,依照API写出等级次序,依然蛮有成就感的。

UI相关

  1. minui -- 基于专门的学业的小程序 UI 组件库,帮助自定义标签组件,轻量、易用、工具化

  2. cube-ui -- 一个梦幻般的移动UI lib由Vue施行

    示例

  3. scrollama -- 用IntersectionObserver滚动查询

    demo

js2flowchart的表征甚至适用项景

js2flowchart得到你的JS代码并回到SVG流程图,适用于客商端/服务器,支持ES6。

重在特色:

  • 概念抽象等第以仅渲染导入/导出,类/函数名称,函数注重性以渐渐学习/解释代码。
  • 自定义抽象等第援救创设和煦的虚幻品级
  • 意味着生成器,以浮动分裂抽象级其余SVG列表
  • 概念流树改正器以映射远近出名的API,譬喻[] .map,[]。forEach,[] .filter到方案上的循环布局等。
  • 销毁修饰符,用于在方案上用叁个模样替换代码块
  • 自定义流树改善器协理创设和谐的流改过器
  • 流树忽视过滤器完整个省略一些代码节点,如日志行
  • 聚集节点或任何代码逻辑分支特出展示方案的关键片段
  • 张冠李戴节点或任何代码逻辑分支以隐讳不太重要的事物
  • 概念的体裁宗旨支持选取你心仪的样式
  • 自定义核心扶持创建自个儿的核心,越来越好地相符你的上下文颜色
  • 自定义颜色和体制扶持提供方便的API来改动特定样式而无需样品

用例场景:

  • 由此流程图解释/记录你的代码
  • 透过视觉了然学习其余代码
  • 为使得JS语法不难描述的别样进度创设流程图

以上全部机能能够一直到github上详细摸底,用法太多,这里就不在介绍了!

NO.2AngularJS

图片 4

angularjs

AngularJS 极其构造化,大而全,而且有风华正茂套很周密的测验流程补助。
对它的褒贬是尽管重,慢,可是老练稳定
对于angularjs相信大家都曾经十三分熟识,它改动了前端开拓的习于旧贯和心得
angularjs提供的职能:

  • 透过沙盘模拟经营和 指令来创立 HTML 的视图 view(代码模块化)
  • controller用于更新数据的变量,操作页面逻辑等。同期$scope是controller里的唯生龙活虎页面数据出自
  • 多少的双向绑定,同不常候帮衬$scope.apply(卡塔尔 免强更新
  • 依靠于注入
  • 自定义指令

形象管理

  1. chimee -- 二个摄像播放器意在为浏览器带给卓越的心得

    【官网】

  2. voxelengine3 -- Javascript中的体素引擎

    【Demo】

  3. 田野同志play -- 矢量字段浏览器。用WebGL制作,爱与激情。其风度翩翩超酷

    【Demo】

  4. UPNG.js -- 快捷和行业革命的PNG(APNG)解码器和编码器

    示例

  5. animateplus -- 是二个留意于品质和创作灵活性的JavaScript动漫库。它的指标是提供牢固的60 FPS,重量小于2 KB(减少和降少),使其特意切合运动道具。

    官方demo

本文由金沙误乐游戏发布,转载请注明来源

关键词: 金沙误乐游戏 日记本 流程图 转换为 漂亮