blog
blog copied to clipboard
bigo-frontend
👨🏻💻👩🏻💻 bigo前端技术博客
# JSON Schema入门和应用 ## 何为JSON Schema？ JSON数据格式对于web开发者都为所熟悉，在平时的开发中离不开它，例如前后端数据传输格式，webpack配置文件，对象序列化等实际应用场景，通常都以JSON格式定义和储存。它以简洁易懂的结构、体积小的优点得以在各类编程语言中广泛流行。 那么什么是JSON Schema? JSON Schema其实是对json数据格式的描述和规范，是对JSON格式一种约束，更明确地定义数据的类型和结构。伴随着JSON被创造出来，JSON Schema的诞生是必然的，类似其他数据格式YAML，也会创造YAML Schema的标准来进行规范，并使用这个规范来校验格式。这就好比有了Javascript，自然就会有Typescript，开发者更倾向于使用工具替代人为来进行约束，校验，使开发效率和开发质量大大加强。 ## 掌握使用 举个简单的例子，你便清楚JSON Schema的使用 这里有两个对象a，b，唯一的区别是对象里的属性类型不同，当你想指定对象属性的类型时，假若你只想要字符串类型，那么可以使用JSON Schema来进行定义 ```json { "type": "object", "properties": { "title": { "type": "string" }...
[toc] ## 一、前言 入职的第一个需求是跟着一位前端大佬一起完成的一个活动项目。 由于是一起开发，当然不会放过阅读大佬的代码的机会。 因为我的页面中需要使用到倒计时功能，发现大佬的已经写了个现成的倒计时组件，于是直接就拿过来用了。 传个参数就实现了功能的感觉真是太棒了。项目完成后，就膜拜了一下大佬的倒计时组件的代码。真是让我学到了不少。列举如下： 1. 计时器为什么要用setTimeout而不用setInterval 2. 为什么不直接将剩余时间-1。 3. 如何将所需要的时间返回出去（有可能我只需要分钟和秒数，那就只返回分钟和秒数，也有可能我全都要）。 4. 不确定接口返回的是剩余时间还是截止日期，该怎么同时兼容这两种情况。 5. 不确定接口返回的时间是秒还是毫秒单位。 好了，你可能不太理解这些问题，但是没关系，看完下面的解释，相信你会豁然开朗。  ## 二、开始手操 ### 1. 先创建一个vue组件 ```html export default { data: ()...
原文链接：[Advanced frontend Interview topics with React](https://dev.to/danilosilvadev/advanced-frontend-interview-topics-with-react-i3f) 首先，请让我明确一点，这篇文章没有教你任何东西。这只对主题和想法进行了组织，并对每个主题和想法进行了简单总结。 **目录：** - [Axios](#axios) - [懒加载（Lazyload）](#懒加载lazyload) - [错误边界（Error Boundaries）](#错误边界error-boundaries) - [Webworker](#webworker) - [IndexDB](#indexdb) - [Token、cookies 和 JWT](#tokencookies-和-jwt) - [性能检查](#性能检查) - [PWA](#pwa) - [实时性](#实时性) -...
 本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。 ## 背景 bigo前端开始推广bff，hello农场作为首个bff落地项目，历经2个月，完成了从0-1的落地实践。 【node实战系列】按照小模块拆分，从开发者的角度讲叙，如何进行bff高可用编码。 本系列文章，基于eggjs框架编码，使用ts语法，为了提升阅读体验，建议大家先了解一下eggjs。 ## 系列文章 - [【node实战系列】编写一个重试装饰器](https://github.com/bigo-frontend/blog/issues/49) - [【node实战系列】自行实现应用缓存](https://github.com/bigo-frontend/blog/issues/53) - [【node实战系列】异步并发，自定义Promise.allSettled](https://github.com/bigo-frontend/blog/issues/56) - 【node实战系列】rpc与http协议通讯 - 【node实战系列】使用reqId跟踪全流程日志 - 【node实战系列】入参校验validate - 【node实战系列】异常中断 - 【node实战系列】base64编码 - 【node实战系列】服务发现 - 【node实战系列】编码与约定...
### 问题起因 公司的设计小姐姐突然找我说我做的一个图片合成工具透明的区域变成黑色了。  第一步想法是背景初始化存在问题，导致透明区域黑化。但试了下通过浏览器选中canvas元素下载图片透明区域是生成正常的，那就是在绘制完成后到下载这一步中间发生了问题。检索了一下整个步骤，再绘制完成到下载过程中有 1. 将canvas转成blob对象 2. 调用压缩库压缩blob对象 3. 将blob对象写到本地 通过浏览器选中canvas元素下载跟执行过程1，3是类似的，所以问题应该是出现再过程2将blob对象压缩过程中的操作导致的黑底，压缩用的库是使用的image-conversion,其中进行压缩的核心代码是  上图是压缩库的核心方法，利用的是canvas转图片时通过对第2个参数设置进行压缩，但仅限于图片格式为 image/jpeg 或 image/webp，因为调用的时候是没有指定图片格式，默认为image/jpeg的格式，所以再进行压缩的过程中，透明区域的颜色会默认为黑色渲染，所以生成的图片在透明区域就会呈现为黑色区域。也就是image-conversion的图片压缩只适用于不存在透明通道的图片，对需要透明通道的图片并不适用。 ### png图片格式的压缩 那如何保留透明通道的图片压缩呢，先了解下png图片的一些基础。 png，全称为流式网络图形格式(Portable Network Graphic Format)，是一种位图文件(bitmap file)存储格式。主要有3种格式：png8，png24， png32 png本身是一种数据压缩文件，是由很多种数据块，分为两种类型：关键数据块以及辅助数据块。图片的内容集中在关键数据块上，数据类型如下： |数据块符号| 数据块名称...
# 如何使用泛型写一个自动提示api方法及参数的功能 最近在使用ts开发vue应用，在开发过程中遇到泛型这个概念。基于对于泛型的理解和认识，突发奇想，如果能够利用泛型的特点， 实现一个api自动提示的功能多好，这样不但对同一个项目中的其他开发者起到提示作用，省去查看文档的功夫；还可以把这一套方法放到我们公司的typescript项目模板中，方便其他同事开发使用，提高公司的研发效率。说干就干，下面就讲讲咋做的。 首先我们得了解几个概念 ### 泛型 我们先看一段代码 ```javascript class Stack { private data = []; pop () { return this.data.pop() } push (item) { this.data.push(item) } } const stack...
 本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。 # 【node实战系列】自行实现应用缓存 ## 背景 bigo前端开始推广bff，hello农场作为首个bff落地项目，历经2个月，完成了从0-1的落地实践。 【node实战系列】按照小模块拆分，从开发者的角度讲叙，如何进行bff高可用编码。 本系列文章，基于eggjs框架编码，使用ts语法，为了提升阅读体验，建议大家先了解一下eggjs。 ## 系列文章 - [【node实战系列】编写一个重试装饰器](https://github.com/bigo-frontend/blog/issues/49) - [【node实战系列】自行实现应用缓存](https://github.com/bigo-frontend/blog/issues/53) - 【node实战系列】异步并发，自定义Promise.allSettled - 【node实战系列】rpc与http协议通讯 - 【node实战系列】使用reqId跟踪请求全流程日志 - 【node实战系列】入参校验validate - 【node实战系列】异常中断 - 【node实战系列】base64编码 - 【node实战系列】服务发现...
# React单元测试实践 单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。单元测试是由[程序员](https://baike.baidu.com/item/程序员)自己来完成，最终受益的也是程序员自己。执行单元测试，就是为了尽量证明这段代码的行为和期望的一致。 其实我们每天都在做单元测试，包括那些认为自己从来没有写过单元测试的同事。你写了一个函数，log一下或者在界面上点一下，这，也是单元测试，把这种单元测试称为临时单元测试。临时单元测试的软件，一个是很难能够覆盖所有场景，二个是无法自动化运行，大幅度提高后期测试和维护成本。可以说，进行充分的单元测试，是提高[软件质量](https://baike.baidu.com/item/软件质量)，降低开发成本的必由之路。 下面讲一下我个人的 React 单元测试实践，旨在抛砖引玉。以下谈论到的优缺点以及实践方法等，均带有个人主观色彩，如有不同意见，望不吝赐教～ ## 单元测试的优点 能够用更低的成本去验证代码的稳定性，基本保证目标代码在之后一直按照初始的预期运行，同时可以接入持续集成，进行低成本的重复使用，在第一时间发现问题，减少维护成本。 ```js // 验证 keepInTarget 辅助方法是否能够永远保证返回的值为 adns 和 targets 的交集 // 如果在界面上测试这个功能，进行一次操作的时间就已经够写出下面的测试用例了 it.each([ // eslint-disable-next-line no-sparse-arrays [, [], undefined], [[],...
## 前言 _Bigo计算平台前端组其中的两个产品，前端的框架都使用了 `Amis`，一个**低代码前端框架**，公司之前也有几篇文章介绍了 `Amis`，其适用场景、使用方式以及项目中的落地和最佳实践等等。这里，我主要想借 `Amis` 来表达一些我对 **Low Code 前端**的想法。_ ## 从概念出发 **LCDP**，引用 Wiki 的解释： > A low-code development platform (LCDP) provides a development environment used to create application software...