如何避免前人挖坑,后人填坑

前言

前段时间,接手了一个外包公司给我们公司做的项目页面,整体修改下来苦不堪言,这段填坑经历也让我理解到了代码质量与代码后面持续性维护的重要性。不能舒服了自己,恶心了下一个接手人。我就以这次这个项目的一丝丝感受分享给大家。

Read More

TSLint中常见的问题及处理方法

本文中很多地方会用ts表示typescript。本文主要针对刚使用typescript和tslint的同学,新手使用TSLint规则校验typescript代码时,总会碰到一些TSLint的错误提示,花费较多的时间和精力去解决这些错误信息,本篇文章将列出本人在项目开发中使用TSLint碰到的问题,及解决方案。TSLint是可配置的,如果项目中引用了TSLint,会有一个tslint.json的配置文件,可以通过其中的配置项去选择需要校验的规则,不知道如何配置的同学可以访问:
[link]: https://palantir.github.io/tslint/rules/ 网上也有很多关于配置的文章。
声明:本文中TSLint的提示信息为本次项目中tslint.json所配置的校验规则。

Read More

RxJS进阶——关于流的理解和应用

RxJS是微软公司推出的响应式编程的JavaScript库。
对于它的学习,最开始我的理解是把它当成是 能优雅地解决异步问题的lodash
随着学习的深入,发现它采用了订阅者模式,其中也带有纯函数的思想。
直到在使用了RxJS 6之后才了解其少有人意识到的另一面——流。

Read More

我使用jest测试项目中常见的问题

简介

公司的前端项目的技术栈为 react + ts + Rxjs。react就不多说了,大型项目一般都会采用react,单向数据流比双向绑定渲染来的更加准确和内存的更少消耗(diff)。ts的强类型保证了数据的精准,减少bug。Rxjs则会更好的获取异步数据,不受其他元素影响。技术的革新带来的是代码和效率的质变,同时也会对一部分技术带来冲击。比如说老牌单元测试框架jest。下面我就描述一下在项目中遇到的jest测试难题和解决过程,后面还有可能遇到新的会再更新到博文中

Read More

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

简介

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

需求整理:

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

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

Read More

React antdesign upload组件自定义上传到S3

简介

关于上传到S3,本文服务模块使用的是‘aws-sdk’ putObject()上传。UI模块使用的是antd中的upload组件,在使用antd组件的时候发现官方提供的上传方式有两种:

  1. 使用路径上传,antd中有一个属性action需要上传到的地址。
  2. 使用自定义上传,antd中的customRequest。
    本文选用的是第二种,自定义上传会覆盖组件默认的上传行为,所以我们需要去定义progress、onSuccess、onError。
    本文会使用到的技术:React,Rxjs,采用TSLint校验。

Read More

用7段代码来理解常用的写作模式

对于开发者来说,“设计模式”这个概念肯定不陌生,它是经过分类的、代码设计经验的总结,能将编写代码进行工程化,从而提升开发效率。
简而言之,它就是“代码模板”。

设计模式 + 代码逻辑 => 清晰高效的程序

“写作模式”这个叫法也借鉴于此,是我针对一些热门技术文章的写作方式进行的总结,能帮我们快速地构思出结构清晰的文章。
下面通过7篇热门技术文章来总结7种写作模式。

Read More