狮乐园

在 CRA 中使用 webp 图片提升加载性能

littleLyon 2020-08-27 发布
7 收藏

webp 是 google 提倡的一种新的 image 格式，意在为 web 提供体积更小的图片格式。通常情况下，无损压缩可以减小 25%-35% 的体积（有例外情况，反而会增大体积，但是是因为转换图片格式不兼容引起的），有损压缩...

适配 CRA 项目为微前端应用

littleLyon 2020-05-07 发布
3 收藏

前期准备一个使用 CRA 创建的新项目或者旧项目了解 publicPath 是什么了解 single-spa 中关于微前端应用的概念（及 qiankun 中 html-entry 的概念）解决如何覆盖 CRA 配置的问题通常情况下，覆盖 CRA 配置...

JSON.parse 比 Object 字面量语法更快

littleLyon 2019-12-02 发布
1 收藏

因为 JSON 语法比 Javascript 的语法更简单，因此解析 JSON 比解析 Javascript 更高效。当一个 web app 需要加载在首次加载时，解析一个非常复杂的、大型的、符合 JSON 规范的对象字面量配置对象时（比如配置 red...

typescript 3.7 中值得注意的 3 个新特性

littleLyon 2019-11-17 发布
4 收藏

距 typescript 3.7 正式发布已经有一段时间了，这段时间正在对手上的项目进行 typescript 的迁移工作，所以会特别留意每一次的 release。

15 分钟掌握 vue 3.0 函数式 api

littleLyon 2019-10-24 发布
5 收藏

在分享 vue-next 各个子模块的实现之前，我觉的有必要比较全面的整理下 vue-next 中提出的函数式 api，了解这些的话，无论是对于源码的阅读，还是当正式版发布时开始学习，应该都会有起到一定的辅助作用。

vue-3.0 runtime-core 源码阅读指南

littleLyon 2019-10-22 发布
5 收藏

最近又抽时间把 vue-next/runtime-core 的源码陆陆续续地看完了，期间整理了很多笔记，但都是碎片化的。本来是想整理一下，写成一篇文章分享出来的，但是感觉最终的成果物只能是一篇篇幅巨长的解析文，就算我一行...

15 分钟掌握 vue 3.0 响应式原理

littleLyon 2019-10-12 发布
8 收藏

最新 vue-next 的源码发布了，虽然是 pre-alpha 版本，但这时候其实是阅读源码的比较好的时机。在 vue 中，比较重要的东西当然要数它的响应式系统，在之前的版本中，已经有若干篇文章对它的响应式原理和实现进行...

使用 queueMicrotask 来执行微任务

littleLyon 2019-09-09 发布
2 收藏

写这篇文章的原因是因为，这几天在看 core-js 的源码，然后发现了 queueMicrotask 的实现。由于之前做的项目，对于微任务的执行需求，一般是使用 asap 这个库来完成的，如果没有使用这个库的话，简易版本可以通过...

从测试到全栈，这些年我都经历了什么

littleLyon 2019-09-05 发布
1 收藏

写这篇文章的动机，完全是因为在每日逛 SF 的过程中，发现了一起分享你的故事这个活动，出于标题处小姐姐爆表的颜值让我有了恋爱的感觉以及对于奖品中 T-shift 的渴望，我无情地抛下了手头的工作（明天还给做 hot...

如何对 react hooks 进行单元测试

littleLyon 2019-08-13 发布
7 收藏

使用 react hook 来做公司的新项目有一段时间了，大大小小的坑踩了不少。由于是公司项目，因此必须要编写单元测试来确保业务逻辑的正确性以及重构时代码的可维护性与稳定性，之前的项目使用的是 react@15.x 的版...

零碎的知识（二）

littleLyon 2019-06-11 发布
4 收藏

这个媒体查询属性的作用是，当用户在操作系统中设置了 reduced-motion 的选项时，能够根据其值声明不同的 css 样式，因为有的人可能喜欢炫酷的特效，有的人可能更倾向于内容（比如我），而有的人甚至因为生理问题...

你不知道的 JSON.stringfy

littleLyon 2019-05-31 发布
25 收藏

JSON.stringfy()是将一个 JavaScript 对象转化为 JSON 格式字符串的标准方式。许多 JavaScript 框架在其内部，都会使用 JSON.stringify()：Express的 res.json()、Axios的 post，以及webpack stats，它们都调用了...

零碎的知识（一）

littleLyon 2019-03-02 发布
11 收藏

最近没怎么写新的东西，一是因为一直在准备换新的工作，所以一直在准备面试，二是因为过年，心静不下来，所以也无法输出或者翻译一些文章，三是由于手头还有一些遗留工作需要完成和交接，比较忙。

2018 所思所感

littleLyon 2018-12-21 发布
20 收藏

2018 马上就过去了，今年对于我来说是很特别的一年，因为去年的现在，我曾经十分迷茫，因为工作这几年，写了很多代码，参与了很多项目，但总有一种碌碌无为的感觉，而且似乎离成为一名合格的全栈工程师越来越远了...

13 个设计 REST API 的最佳实践

littleLyon 2018-12-20 发布
56 收藏

之所以翻译这篇文章，是因为自从成为一名前端码农之后，调接口这件事情就成为了家常便饭，并且，还伴随着无数的争论与无奈。编写友好的 restful api 不论对于你的同事，还是将来作为第三方服务调用接口的用户来说...

高级 Vue 组件模式 (9)

littleLyon 2018-10-29 发布
13 收藏

到此为止，我们的 toggle 组件已经足够强大以及好用了，因此这篇文章不会再为它增加新的特性。如果你是从第一篇文章一直读到这里的读者，你一定会发现，整篇文章中，我几乎没有对 toggle-on 和 toggle-off 做出任...

高级 Vue 组件模式 (8)

littleLyon 2018-10-28 发布
17 收藏

在第七篇文章中，我们对 toggle 组件进行了重构，使父组件能够传入开关状态的初始值，同时还可以传入自定义的状态重置逻辑。虽然父组件拥有了改变 toggle 组件内部状态的途径，但是如果进一步思考的话，父组件并...

高级 Vue 组件模式 (7)

littleLyon 2018-10-26 发布
11 收藏

到目前为止，仅从 toggle 组件自身的角度来看，它已经可以满足大多数的业务场景了。但我们会发现一个问题，就是当前 toggle 组件的状态对于调用者来说，完全是黑盒状态，即调用者无法初始化，也无法更改组件的开...

高级 Vue 组件模式 (6)

littleLyon 2018-10-21 发布
18 收藏

之前的五篇文章中，switch 组件一直是被视为内部组件存在的，细心的读者应该会发现，这个组件除了帮我们提供开关的交互以外，还会根据当前 toggle 的开关状态，为 button 元素增加 aria-expanded 属性，以 aira ...

高级 Vue 组件模式 (5)

littleLyon 2018-10-21 发布
12 收藏

在之前的文章中，详细阐述了子组件获取父组件所提供属性及方法的一些解决方案，如果我们想在父组件之中访问子组件的一些方法和属性怎么办呢？设想以下一个场景：