这次带大家彻底搞懂 flex 布局

大家好,我是前端西瓜哥,今天我来带大家彻底搞懂 flex 布局。

flex 布局,即弹性布局,是前端开发中非常常用的布局方式。主要是馋它很简单就能让容器内元素水平垂直居中的能力。

首先我们需要有一个容器元素(我们叫做 container),然后容器元素内有一些子元素(我们叫做 item)。

1
2
3
4
5
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
阅读更多

聊聊 JavaScript 的几种模块系统

大家好,我是前端西瓜哥,今天我们来聊聊 JavaScript 的模块系统。

模块系统

模块系统是什么?简单来说,其实就是我们在一个文件里写代码,声明一些可以导出的字段,然后另一个文件可以将其导入并使用。

模块化的优点:

  1. 文件里声明的变量会被隔离,不会暴露到全局,可以有效解决以往变量污染全局空间的问题;

  2. 更容易看出代码之间的依赖关系,看文件头的的导入代码就知道;

  3. 方便多人协作,各自开发自己的模块,而不冲突;

  4. 不用担心文件引入的顺序;

  5. 方便以文件为单位做单元测试;

模块化解决了变量污染、代码维护、依赖顺序问题。

阅读更多

使用 Prettier 美化你的代码

大家好,我是前端西瓜哥。今天带大家来学习 Prettier。

为什么要用 Prettier?

Prettier 是一款流行的代码格式化工具。它支持的语言相当多。

它很纯粹,就一个代码格式化工具,并不会做代码质量的检查(比如声明了一个未被使用的变量)。

Prettier 会强制使用统一的代码风格,原理就是解析语言生成 AST 抽象语法树,然后用自己的一套风格写回到文件。

Prettier 的优点:

  1. 开箱即用。它本身就自带了一套代码风格,风格还很好看。我们不需要特意找一个基础风格包,然后再加上一长串的自定义规则;

  2. 支持多种语言。除了 JS,还支持 TS、CSS、JSON、Less 等各种语言。不用一个个找每个语言对应的格式化工具。

但 Prettier 坚持自己的品味,它更希望用户使用它精心挑选出来的代码风格,只提供较少的自定义配置规则。

比如有个 printWidth 的配置(默认值为 80),当一行代码超过特定字符数时会对其做拆分换行。这个配置无法关闭,你必须得设置一个值。

阅读更多

项目中使用 husky 格式化代码和校验 commit 信息

大家好,我是前端西瓜哥。今天我们学习使用 husky 工具,在 commit 的时候做一些风格的校验工作,包括 commit 信息格式化和文件格式化。

git hook 和 husky

git hook 让我们可以在 git 执行一些行为的前后时机,执行一些脚本。

比如 pre-commit ,能够在我们真正提交 commit 之前先执行一段代码,如果这段代码报错(exit 1),提交会被取消;如果正常执行,commit 会被真正提交。

或是 commit-msg,也能在真正 commit 前拿到 commit 信息内容,去做一些检验工作。

利用 git hook 的能力,我们就可以在 commit 前做一些风格检验或格式化,比如 ESLint、Prettier、commit 格式等。

git hook 是 sh 脚本,在项目 .git/hooks 目录下。这有一个比较尴尬的问题:.git 下的文件是不会被 git 提交的。husky 就是解决这个问题的一个方案。

阅读更多

你需要掌握的 Koa 洋葱模型和中间件

大家好,我是前端西瓜哥。

Koa 是一个 nodejs 框架,经常用于写 web 后端服务。它是 Express 框架的原班人马开发的新一代 web 框架,使用了 async / await 来优雅处理无处不在的异步逻辑。

我们常说 Koa 其实是洋葱模型,今天就来深挖下 Koa 的洋葱模型到底是什么。

什么是洋葱模型

在这之前,我们先简单看看 Koa 是如何使用的。

在 Koa 中,我们通过 app.use 方法注册中间件。中间件可以注册多个,它们的执行顺序和注册时机相关,先注册的先执行。

所谓中间件就是一个函数,这个函数接受 Koa 提供的两个参数:

  1. ctx 上下文对象;
  2. next 函数。

ctx 上有各种参数,比如请求对象 request 和响应对象 response。

调用 next 函数会执行下一个的中间件,如果你不调用 next 函数,那下一个中间件就不会执行。

阅读更多

一些你需要掌握的 tsconfig.json 常用配置项

大家好,我是前端西瓜哥。

tsconfig.json 是用来配置 TS 编译选项的,通常位于项目的根目录位置。

我们可以用 ts 提供的 tsc 命令行工具,执行 tsc --init

1
2
3
4
5
6
7
8
9
10
11
12
13
$ tsc --init

Created a new tsconfig.json with:                                                                   

  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig

然后我们就能得到一个默认的 tsconfig.json 文件,且这是一种可以添加注释的 json 文件。

里面有很多带有注释的选项,目的是让开发者能够反注释快速启用一些配置。

阅读更多

macOS 上如何写自定义命令行工具?

大家好,我是前端西瓜哥,今天来说说怎么在 macOS 上写自定义命令行工具。

苹果的 masOS 系统的底层核心是 Darwin 系统。Darwin 是类 Unix 系统,所以我们可以在 masOS 上,像 Linux 一样,执行命令行工具。

我们通常通过第三方安装的命令行工具,比如 node、npm、nginx 等,这很方便。

但,有时候我们想运行自己编写的命令行工具,怎么做呢?

阅读更多

听起来高大上的控制反转(IOC)是什么?

大家好,我是前端西瓜哥。今天我们聊聊 IOC,很高大上的东西。

IOC,全称为 Inversion Of Control,即 控制反转

控制反转是面向对象编程中的一种设计原则,作用是降低各个模块之间的耦合度。

控制反转是思想,不是具体实现。

阅读更多

如何做前端性能优化?

大家好,我是前端西瓜哥,这次来看看如何做前端性能优化。

因为前端优化的方案非常多,本文不会太深入讲解,否则就篇幅太长了,主要还是让大家对大的脉络有一些认识。具体里面的小点以后我会另写文章讲解。

前端性能优化,主要分两个大方向:资源加载优化代码优化

阅读更多

协同编辑中使用的 OT 算法是什么?

大家好,我是前端西瓜哥,今天我们来聊聊 OT 算法是什么。

OT 的英文全称是 Operational transformation,是一种处理协同编辑的算法。

它常用于实现协同文档的底层算法,支持多个用户同时编辑文档,不会因为并发修改导致冲突,而使结果不一致或数据丢失。

阅读更多

搜索功能实现遇到的那些坑

大家好,我是前端西瓜哥,今天我们来聊聊搜索的一些坑。

搜索是一个比较常见的业务需求,但里面有些容易踩坑的地方,我们今天来聊一聊。

阅读更多

长列表优化:用 React 实现虚拟列表

大家好,我是前端西瓜哥。这次我们来看看虚拟列表是什么玩意,并用 React 来实现两种虚拟列表组件。

虚拟列表,其实就是将一个原本需要全部列表项的渲染的长列表,改为只渲染可视区域内的列表项,但滚动效果还是要和渲染所有列表项的长列表一样。

虚拟列表解决的长列表渲染大量节点导致的性能问题:

  1. 一次性渲染大量节点,会占用大量 GPU 资源,导致卡顿;

  2. 即使渲染好了,大量的节点也持续占用内存。列表项下的节点越多,就越耗费性能。

虚拟列表的实现分两种,一种是列表项高度固定的情况,另一种是列表项高度动态的情况。

阅读更多

React 性能调试好帮手:useWhyDidYouUpdate

大家好,我是前端西瓜哥。

最近在尝试优化 React 组件,使用了 React.memo() 去缓存组件的渲染结果。

但有一个问题,就是要使 React.memo() 的缓存生效,需要保持 props 对象的浅比较结果为 true。

所以我们需要通过 useCallback 或 useMemo 处理一些对象类型的 prop,让它们保持指向原来的内存对象。

在 props 少的时候还好,但一旦多了之后,我们就比较难通过肉眼确认是哪个 prop 导致缓存失效。

怎样才能够方便地知道 props 的哪个属性发生了改变呢?

你可以试试 useWhyDidYouUpate。

阅读更多