.NET手撸绘制TypeScript类图——上篇

近年来随着交互界面的精细化，TypeScript越来越流行，前端的设计也越来复杂，而类图正是用简单的箭头和方块，反映对象与对象之间关系/依赖的好方式。许多工具都能生成C#类图，有些工具也能生成TypeScript类图，如tsuml，但存在一些局限性。

我们都是.NET开发，为啥不干脆就用.NET撸一个TypeScript类图呢？

说干就干！为了搞到类图，一共分两步走：

  1. 解析.ts文件，生成抽象语法树(AST)，并转换为简单的类、属性、方法等对象
  2. 将这个对象绘制出来

本文将分上下两部分，上篇将介绍我移植的一个.NET Standard 2.0的TypeScript解析库，下篇将介绍如何将AST转换为真正的图，并实现一些基本的交互。

.ts文件生成抽象语法树

正常来说编译原理挺难的，但好在有人赶在了我的前头

.NET手撸绘制TypeScript类图——上篇的更多相关文章

  1. .NET手撸绘制TypeScript类图——下篇

    .NET手撸绘制TypeScript类图--下篇 在上篇的文章中,我们介绍了如何使用.NET解析TypeScript,这篇将介绍如何使用代码将类图渲染出来. 注:以防有人错过了,上篇链接如下:http ...

  2. 使用工厂方法模式设计能够实现包含加法（+）、减法（-）、乘法（*）、除法（/）四种运算的计算机程序，要求输入两个数和运算符，得到运算结果。要求使用相关的工具绘制UML类图并严格按照类图的设计编写程序实

    2.使用工厂方法模式设计能够实现包含加法(+).减法(-).乘法(*).除法(/)四种运算的计算机程序,要求输入两个数和运算符,得到运算结果.要求使用相关的工具绘制UML类图并严格按照类图的设计编写程 ...

  3. 1、使用简单工厂模式设计能够实现包含加法（+）、减法（-）、乘法（*）、除法（/）四种运算的计算机程序，要求输入两个数和运算符，得到运算结果。要求使用相关的工具绘制UML类图并严格按照类图的设计编写程

    1.使用简单工厂模式设计能够实现包含加法(+).减法(-).乘法(*).除法(/)四种运算的计算机程序,要求输入两个数和运算符,得到运算结果.要求使用相关的工具绘制UML类图并严格按照类图的设计编写程 ...

  4. CentO7-使用plantuml绘制UML类图

    准备工作 到PlantUml官网(http://plantuml.com/download)下载plantuml.jar.官网上还有一个在线的demof服务.plantuml的官网真的很挫! 到官网下 ...

  5. Android Studio中绘制simpleUML类图详细说明及使用

    一.Android Studio中安装simpleUML 1.下载simpleUML jar包 地址为:http://plugins.jetbrains.com/  搜索 simpleUMLCE 2. ...

  6. 转：深入浅出UML类图（具体到代码层次）

    深入浅出UML类图 作者:刘伟 ,发布于:2012-11-23,来源:CSDN   在UML 2.0的13种图形中,类图是使用频率最高的UML图之一.Martin Fowler在其著作<UML ...

  7. 深入浅出UML类图（一）

    在UML 2.0的13种图形中,类图是使用频率最高的UML图之一.Martin Fowler在其著作<UML Distilled: A Brief Guide to the Standard O ...

  8. 深入浅出UML类图

    原作者:http://www.uml.org.cn/oobject/201211231.asp 在UML 2.0的13种图形中,类图是使用频率最高的UML图之一.Martin Fowler在其著作&l ...

  9. UML的类图关系分为： 关联、聚合/组合、依赖、泛化（继承）

    UML的类图关系分为: 关联.聚合/组合.依赖.泛化(继承).而其中关联又分为双向关联.单向关联.自身关联:下面就让我们一起来看看这些关系究竟是什么,以及它们的区别在哪里. 1.关联 双向关联:C1- ...

随机推荐

  1. 如何在Linux服务器上部署Mysql

    一.安装mysql 1.通过文件上传工具,将mysql安装包上传到linux服务器上 2.卸载mariadb包,由于系统中存在mariadb包会导致mysql安装时报错mariadb-libs被mys ...

  2. 由一次线上故障来理解下 TCP 三握、四挥 & Java 堆栈分析到源码的探秘

    本文导读: 生产故障场景介绍 TCP 建连三次握手过程 TCP 断连四次挥手过程 结合 Java 堆栈剖析源码 再从堆栈中找到"罪魁祸首" 问题优化方案总结 1.生产故障场景介绍 ...

  3. unittest中HTMLTestRunner模块生成

    unittest里面是不能生成html格式报告的,需要导入一个第三方的模块:HTMLTestRunner 一.导入HTMLTestRunner 方法1.这个模块下载不能通过pip安装了,只能下载后手动 ...

  4. 不得不看的秘诀，如何成为一名合格的web前端工程师

    何为:前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业. Web前端开发技术主要包括三个要素:HTML.CSS和JavaScript! 它要求前端开发工程师不仅要 ...

  5. JS中作用域和作用域链

    1.执行环境(execution context) 执行环境定义了变量和函数有权访问的其他数据,决定了他们各自的行为.每个执行环境都有与之对应的变量对象(variable object),保存着该环境 ...

  6. 分布式FastDFS集群部署

    FastDFS FastDFS的作者余庆在其 GitHub 上是这样描述的:"FastDFS is an open source high performance distributed f ...

  7. pycharm（社区版2019.1版本）打开README.md文件卡死解决办法

    现象:pycharm(社区版2019.1版本)打开README.md文件卡死 解决办法: 将插件Markdown support前的勾选√去掉,保存修改后重启pycharm即可

  8. 1.在ubuntu中软件安装在哪里?

    ubuntu下安装软件有四种方式: 1.通过deb格式的离线软件包安装 sudo dpkg -i xxx.deb # 安装包,安装程序   -i: install sudo dpkg -r packa ...

  9. chrome devtools tip(2)--自定义代码片段，构建你的工具箱

    平常开发中,有些代码片段常常用到的,比如,获取 url 参数,rgb转16进制,打印下当前页面的性能数据,给所有的 span 加个样式, 防抖节流,fetch接口,类似 jquery这样的顺手 选择 ...

  10. 面试 LockSupport.park()会释放锁资源吗？

    (手机横屏看源码更方便) 引子 大家知道,我最近在招人,今天遇到个同学,他的源码看过一些,然后我就开始了AQS连环问. 我:说说AQS的大致流程? 他:AQS包含一个状态变量,一个同步队列--bala ...