使用vue自定义指令来开发一个表单验证插件

简介

这段时间在进行一个新项目的前期搭建,新项目框架采用vue-cli3和typescirpt搭建。因为项目比较轻量,所以基本没有使用额外的ui组件,有时候我们需要的一些基础组件我就直接自己开发了。今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过程。本文是以ts为基础开发的,如果同学们需要js版的只需要把ts语法转为js即可。

Read More

mxGraph使用经验总结

mxGraph是一个支持多种语言(Java、JavaScript、PHP、.NET)的画图框架,所绘制的图形可以在主流浏览器以及原生应用上使用。
mxGraph官方资料全英文,网上有几篇mxGraph的教程,对于“入门”和“使用”讲解得比较详细。
所以这篇文章不是介绍如何画一个图形,写一个hello world,而是重点介绍学习mxGraph时觉得比较重要的、难以理解的或者容易被忽略的知识点。
需要读者对mxGraph的文档有一定的了解或者使用mxGraph。

Read More

页面和应用之间的交互

前言

公司某个项目有一个功能,需要在网页上通过用户上传文件后,拉起本机的应用,然后应用显示上传速度等各种各样的详细信息,网页上显示上传进度等简短信息。类似zoom的完美体现。我们知道js是运行在浏览器的,所以拉起应用肯定需要各个桥梁相互配合。本篇文章也是这个探索过程的总结。

Read More

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