常用UML图类图(class) 场景 可以用来描述前端组件间关系 传统类图之间的关系 继承(Generalization)/泛化(Generalization) 鸟继承了动物 前端一般使用在明确声明了继承关系的情况下 Vue.extends、class api的extends 实现(Realization) 一般是类实现了某个接口 大雁实现了飞翔这个接口 依赖(Dependency) 动物依赖水、氧气 表现在代码层面，为类B作为参数被类A在某个method方法中使用，可以说类A依赖类B 依赖关系是具有偶然性的、临时性的、非常弱，因为可以随便改变入参类，只要其能提供需要的数据 前 ...

时间评估需求评审 了解需求故事(背景) 为什么要做这个需求 领导要求 线上用户反馈 明确需求价值 需求能带来什么收益(用户体验改善、PV增加…) 针对多个需求让PM确定优先级 了解项目平台 web 桌面客户端 Native 确定deadline 针对技术难点，提出技术调研需求 方案调研 针对技术难点进行调研评估 组织相关会议评审确定可行性 需求评估 需求评估其实就是在确定的deadline时间中找出可以满足的需求 通过需求了解阶段获取的信息，评估相关需求的合理性，不合理的需求可砍掉 待砍需求特征 现有技术栈无法实现或需要花费较长时间实现导致项目延期的需求 需求价值不高 明 ...

SQL基础数据库表组成 库db 表table 行(记录)1 列(字段,field)1，列(字段,field)2 行(记录)2 列(字段,field)1，列(字段,field)2 注意项大小写不敏感 SQL对大小写不敏感 SELECT和select是一样的 SQL执行顺序 SQL语句执行的时候是有一定顺序的。 from 先选择一个表，构成一个结果集。 where 对结果集进行筛选，筛选出需要的信息形成新的结果集。 group by 对新的结果集分组。 having 筛选出想要的分组。 select 选择列。 order by 当所有的条件都弄完了。最后排序。 当一条查 ...

latex公式渲染及利用客户端做公式资源的清洗背景历史背景 最近接手的项目中，有大量的H5渲染latex公式的需求 由于历史原因，我们的latex公式资源都是针对mathjax公式渲染引擎定制化制作的 存在的问题我们存在的问题 由于历史原因，我们的资源大部分都是针对mathjax制作的，无法直接用katex进行渲染。而mathjax在pc端使用时，效果、速度勉强还能接受，但在移动端却差强人意，渲染速度慢，公式闪烁等问题严重。 社区内的渲染方案 要实现latex公式的渲染，社区内主流的方案有两种： 一，使用katex渲染引擎来渲染。 速度快，渲染效果好 对数据格式有要求，部分字符无法渲染 ...

ESLint + Prettier + Husky + lint-staged 打造代码检查工作流 记录搭建代码检查工作流的相关问题 基本介绍 ESLint 代码检查工具 特点 代码静态检查 提前发现低级语法错误 代码风格检查 检查代码风格 关于eslint的配置可以查阅我之前的文章，有详细解释 Prettier 代码格式化工具 特点 有一套自己的格式化规范 基本支持前端涉及的所有语言 js、jsx、css、html、md等等 ESLint、Prettier 二者异同 eslint还是侧重于代码静态检查、prettier侧重于代码格式化 eslint使用--fix ...

npm script 的 pre、post 钩子及在 pre commit 时进行 lintpre、post 钩子介绍 npm run为每条命令提供了pre-和post-两个钩子（hook）。 以npm run lint为例，执行这条命令之前，npm会先查看有没有定义prelint和postlint两个钩子，如果有的话，就会先执行npm run prelint，然后执行npm run lint，最后执行npm run postlint 可以在这两个钩子中来完成一些其它事情，如在执行test前先执行lint操作 示例123456789"scripts": { "dev": "w ...

eslint 配置记录 最近项目中需要集成eslint，学习后特在此做个记录 介绍 官方介绍 ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于2013年6月创建。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。 总结 代码静态检查 提前发现低级错误；如声明了变量却没有使用、使用了== 代码风格检查（此能力较弱） 团带整体编码风格的检查；如单双引号、分号等的使用 安装安装及初始化123npm i -D eslint ...

样式类的命名BEM基本组成 B(block)-每个模块可视为一个 block E(element)-代表.block 的后代，用于形成一个完整的.block 的整体 M(modifer)-代表.block 的不同状态或不同版本。如 current active 等特殊样式 命名约定12345678.block-name {}.block-name__element-name {}.block-name--modifier-name {} 长单词采用-分隔,如 siteName 用 site-name BE 之间采用__(双下划线) ...

在 vue 中使用 swiper 的 virtual 特性swiper 介绍 前端开发中，经常会碰到轮播、翻页等需求。swiper就是用来解决此类需求的。 功能全、覆盖场景多，可适配移动端等特点，让它成为实现此类需求的最好选择。 它有专门的vue版本，vue-awesome-swiper 背景 项目是基于vue全家桶开发的，有轮播需求，轮播的 slides 数量较多，slide 的 DOM 结构比较复杂。 问题 项目中使用的是vue-awesome-swiper，它基于swiper做了相关封装 使用时并没有使用virtual slides特性，初始化时会渲染所有slide，导致初始渲染速度 ...

数组扁平化前置知识浅扁平化 浅扁平化就是只扁平化一层数组 深扁平化 实现无线层级的多维数组扁平化 方法原始数组1var needFlatArr = [1, 2, [3, 4], [[5, 6, 7]], [8, [9, 10], [[11]]]] 浅扁平化实现 concat + apply 12345678// 1.concat + apply - 浅扁平化// concat在拼接数组时，若入参中有数组时，则遍历此数组每项(不会递归遍历，仅会遍历一层)，并将其依次拼接到尾部// [].concat(1,[2,3],[4,5],[[6,7]]) 结果[1,2,3,4,5,[6,7]]// ...