前端开发

字典组件作为常用组件，好好封装一下很有必要。封装组件不难，比较麻烦的地方在于处理字典的数据。 使用字典组件时，数据引用常见方式 字典数据作为 JSON 文件在前端项目中引入； 应用…

el-table 的 show-overflow-tooltip 虽然可以帮我们在单元格内容过长时，隐藏多余内容，并自动加上 tooltip，但是只要加上了show-overflo…

该需求来源于实时搜索客户名称，使用el-select相比用弹窗嵌套表格轻便不少。但是当远程搜索获得的数据量大时，怎么加上分页呢？ 基于对 element plus 了解的不够全面，…

前几天浏览 MDN 的 Web Api，偶然看到 CSS 自定义高亮 API ，感觉挺实用，虽然现在 Firefox 还未支持该 Api，了解一下也不吃亏。 CSS 自定义高亮 A…

2.gif 使用 el-table 的 selection 选择数据操作，翻页后之前的选中状态就会消失。但是产品需要我们可以选择不同页面的多条数据，然后一起进行批量操作。 基础的跨…

UI 同学设计了上图效果，两个颜色图形代表 a，b 两个数据的百分占比，难点在这个斜边的实现，但是掌握了 CSS 的 linear-gradient，也就没什么难事了。 linea…

前端在上传视频时，需要截取视频中的 N 帧画面，选择一张做封面。 通过监听 video，我们可以使用 canvas 绘制当前视频位置的画面，并输出 base64 图片数据。虽然实现…

有时候我们需要播放 m3u8 格式的视频，或者实现更多定制化需求，HTML 的 video 元素无法满足所需，这时候可以考虑使用 Video.js。 video.js是为HTML5…

说明：本文结论均基于 React 16.13.1 得出，若有出入请参考对应版本源码 题目 在开始进行源码分析前，我们先来看几个题目： 题目一： 渲染下面的组件，打印顺序是什么？ i…

说明：本文结论均基于 React 16.13.1 得出，若有出入请参考对应版本源码 题目 老规矩，在进入正题前，先做个题目： 下面的组件能按照期望工作吗（每隔一秒数字增加 1）？W…

本文代码：https://github.com/ParadeTo/chinese-chess Demo地址：http://www.paradeto.com/vue-chinese-…

本文代码：https://github.com/ParadeTo/chinese-chess Demo地址：http://www.paradeto.com/vue-chinese-…

引言 为了提升用户体验，React 团队提出了 Concurrent 模式。Concurrent 模式可以在应用更新的同时保持浏览器对用户的响应，并根据用户的设备性能和网速进行适当…

引言 上篇[1]讲述了 Concurrent 模式中关于时间切片的实现方式，本文来讲讲 Concurrent 模式中另外一个特性：更新插队。我们先来看一个例子： import&nb…

引言 从React的渲染流程[1]我们知道，JSX 会先转为一颗 Fiber Tree，然后通过 Renderer 渲染成页面。 对于 Web 平台，这个 Renderer 就是 …

实现一门简单的解释型语言分三步：词法分析，语法分析，解释执行。 词法分析 词法分析是编译器的第一步，他的工作是将一个长长的字符串识别出一个个的单词，比如 int age = 43;…