最近我们设计师反馈，他想要做如下的一个加载动画。但是要么效果好的导出的 GIF 体积特别大，看了下有 8M 多了，要么体积小的 GIF 效果又特别不清楚。然后我看了下效果，发现其实用 SVG 动画来实现应该比较简单，于是就和设计师要了一下原始的稿子导出成 SVG 后处理了下。 将 AE 动效稿子转成 SVG 动画的话 Airbnb 有出过一款 Lottie 的工具。通过它的 AE 插件 Bodymovin 能够以 JSON 的形式导出动…
2020-09-19
RESTful 是目前比较主流的一种用来设计和编排服务端 API 的一种规范。在 RESTful API 中，所有的接口操作都被认为是对资源的 CRUD，使用 URI 来表示操作的资源，请求方法表示具体的操作，响应状态码表示操作结果。之前使用 RESTful 的规范写过不少 API 接口，我个人认为它最大的好处就是帮助我们更好的去规划整理接口，如果还是按照以前根据需求来写接口的话接口的复用率不高不说，整个项目也会变得非常的杂乱。 文件即…
2020-09-15
MySQL 5.7 增加了 JSON 数据类型的支持，在之前如果要存储 JSON 类型的数据的话我们只能自己做 JSON.stringify() 和 JSON.parse() 的操作，而且没办法针对 JSON 内的数据进行查询操作，所有的操作必须读取出来 parse 之后进行，非常的麻烦。原生的 JSON 数据类型支持之后，我们就可以直接对 JSON 进行数据查询和修改等操作了，较之前会方便非常多。 为了方便演示我先创建一个 user …
2020-09-06
今天是端午节，首先祝大家端午节快乐，然后今天要和大家说一下最近对 think-mongo 模块做了一些升级。ThinkJS 3 虽然已经支持使用 think-mongoose 来接入 mongoose 模块，不过因为文档这块默认还是 think-mongo 所以用这个模块的同学还是比较多。而这个模块因为是两三年前开发的了，依赖的 mongodb 模块一直是 2.x 的版本，适配 MongoDB 数据库 2.0 版本。而 MongoDB …
2020-06-25
最近开发肺炎疫情专题页，大量的使用到了 ECharts 地图和图表相关的功能。之前也没有使用过 ECharts，所以把一些稍微复杂的需求实现总结一下，希望以后能帮助到大家。 地图 不同的文字颜色 上面是一个非常简单的中国肺炎确诊数地图，其中的数据都是模拟非真实的数据。默认文字颜色都是黑色的，但是由于湖北的背景色比较重，所以需要换一个浅色的文字。省名都已经使用 label.formatter 方法进行了重新的格式化，而 formatter…
2020-02-23
在 ThinkJS 的用户群里，经常有开发者提出需要对源码进行加密保护的需求。我们知道 JavaScript 是一门动态语言，不像其他静态语言可以编译成二进制包防止源码泄露。所以就出现了 pkg、nexe 之类的工具，支持将 JS 代码连同 Node 一块打包成一个可执行文件，一来解决了环境依赖的问题，二来解决了大家关心的源码保护的问题。 在 pkg 模块的 README 中，罗列了它的几大用处，如果你有下面的几个需求的话建议不妨试试。…
2019-12-28
Chimee 是由奇舞团开源的一套可扩展的H5组件化播放器框架。由于前段时间业务有视频播放的需求所以使用了它，并基于它提供的插件系统之上开发了一系列的插件，其中最复杂的是控制条插件。由于默认的样式无（实）法（在）满（是）足（太）设（难）计（看）需（了）求（！），所以我们重新开发了一套 lizheing/chimee-plugin-controlbar 并总结一些心得，希望对大家有帮助。 Chimee 插件规范 开篇之前我们先简单的了解下…
2019-12-25
什么是 ZEIT ZEIT 是免费的云平台，支持部署静态网站以及 Serverless 函数。Serverless 是近几年比较火的概念，简单去理解就是你只需要去实现具体的业务逻辑，而与最终服务相关的服务器、HTTP 服务等则由第三方管理。Serverless 又被称为 FaaS（函数即服务），由于业务粒度非常细，所以非常方便做动态扩容等自动化运维任务。 //一个最简单的基于 Node.js 的 Serverless 函数 module…
2019-12-01
需求描述 由于我所在的业务是资讯内容类业务，因而在业务中会经常碰到如下场景：有一个内容列表，列表中需要按照一定的规则插入广告。除了获取广告数据，广告展现和点击后需要有打点上报逻辑。正常来说我们会这么写： import React from 'react'; export default class extends React.Component { state = {newsData: [], adData: […
2019-11-26
前言 这篇文章是多年前在 SegmentFault 上的一个回答，原问题是问如何使用 Canvas 实现一个下图类似的圆环选择器，点击后会出现对应的日期。虽然已经有 Canvas 的答案了，不过当时正好在学习 SVG 就顺手自己实现了一下。我感觉对大家去理解 SVG 的贝塞尔曲线会有一定的帮助，所以重新整理了下发出来。另外感兴趣的同学还可以去原问题上看一下，除了标准答案 Canvas 的实现以及我写的 SVG 实现之外，还有使用 DIV…
2019-10-08
