mxgraph的艰难入门

前言

公司今年有个需求是希望前端能展现出大数据计算过程的拓扑图,最好还是能够动态展现。部门老大给我们推荐了mxgraph这个绘图js库,希望我们能够熟练掌握。于是我就先着手开始研究起来了。不过我现在对于mxgraph的掌握还非常的渣,这篇文章是记录到现在为止我的学习成果。

Read More

记录工作中React antdesign Tree组件实现时序图的思路,及碰到的问题

简介

“时序图”–>先简单解释一下,突然接到任务要求做一个时序图(后面会附上参考图片),由于需求不是很完善,设计也还没给出图纸,暂时就先做一个满足基本功能的demo。

需求整理:

  1. 默认显示主任务,主任务下有N个子任务,需要查看子任务的运行状态时再加载子任务。
  2. 只有所有的子任务都结束了,主任务才显示完成状态,主任务的运行时间是变化的(开始时间可以确定),子任务可以是并行、串行启动。
  3. 以不同的颜色区分子任务所占主任务的比例。
  4. 每个主任务的运行时间是不同的,所以表示运行时间的刻度是变化的。(不太理解的话,可以观看下面的参考图)。

暂时的需求整理结束,下面来看看实现上遇到的一些问题,及解决方法。
注:本文使用的是React + ts,UI组件库使用的是andtesign.

Read More

记一次omi的项目之旅

前言

前段时间公司提出一个小项目,涉及到几个页面切换和搜索列表展示,由于自己对于webcomponents的学习和项目比较小,所以选择了腾讯开源的omi作为本次开发的框架。当一次小白鼠的同时希望深入一下对于用户自定义组件的了解。万事开头难,js框架也是这样。omi确实很小巧,并且跨多端开发,但是开发中出现的问题也不少。希望以后越来越好吧。

Read More

如何用 es5 写 const 和 let

前言

无意逛某论坛,看到某位博主当面试官的经历,说是准备一道简单的面试题,可是面试者几乎没有一个答出来的。我看了下。便是如何用 es5 的方式实现一个 const。我也懵逼了,我去面试肯定也是答不出来的。仔细一想不禁觉得这个题目很妙,于是整理一下如何用 es5 实现一个 const 和 let

Read More

vue单元测试vue test utils使用初探

简介

最近在做一个项目的重构,技术选型为vue-cli 3.0 + typescript + vue-router + sass.因为我负责的模块比较少比较简单,所以老大让我先把负责部分的测试代码写好。至此我才第一次接触到测试代码,我们项目使用的测试工具是jest,与vue官方出的单元测试工具库vue-test-utils配合使用。第一次接触测试代码,开始的时候还是一脸懵逼,有种学习一门新语言的赶脚。经过几天的摸索之后学会了简单的编写测试代码,并对几种情况进行特殊处理。本文是一篇vue单元测试的基础入门文章,只介绍测试代码,需要了解搭建测试框架的朋友可以自行参阅vue-test-utils官方文档等资料。

Read More

用Node.js实现文件循环覆写

这次编写Node.js项目的时候用到了日志模块,其中碰到了一个小问题。
这是一个定时执行可配置自动化任务的项目,所以输出信息会不断增加,也就意味着日志文件会随时间不断增大。
如果对日志文件大小不加以控制,那么服务器的磁盘迟早会被撑满。所以限制文件大小是有必要的。
最理想的控制方式就是当文件大小超过限制时,清除最先记录的数据。类似一个FIFO的队列。

1
2
3
4
5
6
# 删除前面的数据
- 1 xxx
......
100 abc
# 文件末尾追加数据
+ 101 xxxx

Read More

webpack4入门和多文件打包尝试

简介

按照webpack官网的说法,webpack本质上是javascript应用程序的静态资源打包器(static module bundler),它可以将模块按照依赖和规则打包成符合生产环境部署的前端资源。webpack可以将按模块异步加载按需引用,通过loader的转换还可以将任何资源看作模块,比如css、图片、json、commonjs模块、amd模块、es6模块等。如今webpack的大版本更新到4.x了,让我们看下如何使用。

Read More

新手关于import/export的理解

前言

从事前端工作已经两年多了,技术上从最开始的jq,到后来的angular,然后react,vue,都一一学习过来并且应用到了实践中。自从有了es6,node,有了脚手架,感觉写代码体验如飞。直到有一天用原生开发,出现了这样一个问题。我需要在原生的页面上引入另一个文件,我习惯性的import 了那个文件,可是没有效果…

Read More

git提交规则

对于IT人员来说GitHub,相信大家都不陌生,本文主要讲解使用Git命令提交时的message规范。对于一个英文水平有限的IT人员在项目中很多时候使用git commit, message往往会写的不尽如人意,或者当你使用git log时往往不知道之前提交的是什么东西,修改了什么,这样对以后的查看很不友好。git 提交有一个成熟的工具(Commitizen),本文也将介绍使用(Commitizen)来规范我们的提交信息。 Commitizen网址: link: https://www.npmjs.com/package/commitizen

Read More