大家好，我是前端西瓜哥，今天我来带大家彻底搞懂 flex 布局。 flex 布局，即弹性布局，是前端开发中非常常用的布局方式。主要是馋它很简单就能让容器内元素水平垂直居中的能力。 首先我们需要有一个容器元素（我们叫做 con…
大家好，我是前端西瓜哥，今天我们来聊聊 JavaScript 的模块系统。 模块系统 模块系统是什么？简单来说，其实就是我们在一个文件里写代码，声明一些可以导出的字段，然后另一个文件可以将其导入并使用。 模块化的优点： 文件里声明…
大家好，我是前端西瓜哥。今天带大家来学习 Prettier。 为什么要用 Prettier？ Prettier 是一款流行的代码格式化工具。它支持的语言相当多。 它很纯粹，就一个代码格式化工具，并不会做代码质量的检查（比如声明…
大家好，我是前端西瓜哥。今天我们学习使用 husky 工具，在 commit 的时候做一些风格的校验工作，包括 commit 信息格式化和文件格式化。 git hook 和 husky git hook 让我们可以在 git 执行一些行为的前后时机，执行一些脚本。 比如 pre-commit ，能够在我们真正提交…
大家好，我是前端西瓜哥。 Koa 是一个 nodejs 框架，经常用于写 web 后端服务。它是 Express 框架的原班人马开发的新一代 web 框架，使用了 async / await 来优雅处理无处不在的异步逻辑。 我们常说 Koa 其实是洋葱模型，今天就来深挖下 Koa 的洋葱模型到底…
大家好，我是前端西瓜哥。 tsconfig.json 是用来配置 TS 编译选项的，通常位于项目的根目录位置。 我们可以用 ts 提供的 tsc 命令行工具，执行 tsc --init。 $ tsc --init Created a new tsconfig.json with: TS target: es2016 module: commonjs strict: true esModuleInterop: true skipLibCheck: true forceConsistentCasingInFileNames: true You can learn more at https://aka.ms/tsconfig 然后我们就能得到一…
大家好，我是前端西瓜哥，今天来说说怎么在 macOS 上写自定义命令行工具。 苹果的 masOS 系统的底层核心是 Darwin 系统。Darwin 是类 Unix 系统，所以我们可以在 masOS 上，像 Linux 一样，执行命令行工具。 我们通常通过第三方安装的命令行工具…
大家好，我是前端西瓜哥。今天我们聊聊 IOC，很高大上的东西。 IOC，全称为 Inversion Of Control，即 控制反转。 控制反转是面向对象编程中的一种设计原则，作用是降低各个模块之间的耦合度。 控制反转是思想，不是具…
大家好，我是前端西瓜哥，今天来做做 TS 类型体操。 TypeScript 类型编程 TypeScript 的类型系统，最基本的是简单对应 JavaScript 的 基本类型，比如 string、number、boolean 等，然后是新增的 tuple、enum、复合类型、交叉…
大家好，我是前端西瓜哥，这次来看看如何做前端性能优化。 因为前端优化的方案非常多，本文不会太深入讲解，否则就篇幅太长了，主要还是让大家对大的脉络有一些认识。具体里面的小点以后我会另写文章讲解。 前端性能优…
大家好，我是前端西瓜哥，今天我们来聊聊 OT 算法是什么。 OT 的英文全称是 Operational transformation，是一种处理协同编辑的算法。 它常用于实现协同文档的底层算法，支持多个用户同时编辑文档，不会因为并发修改导…
大家好，我是前端西瓜哥，今天我们来聊聊搜索的一些坑。 搜索是一个比较常见的业务需求，但里面有些容易踩坑的地方，我们今天来聊一聊。 我们先用 React 实现一个简单的搜索 Demo。 当我们在 input 输入内容时，就会通过 onChange 事件…
大家好，我是前端西瓜哥。这次我们来看看虚拟列表是什么玩意，并用 React 来实现两种虚拟列表组件。 虚拟列表，其实就是将一个原本需要全部列表项的渲染的长列表，改为只渲染可视区域内的列表项，但滚动效果还是要和渲染所…
大家好，我是前端西瓜哥。今天带大家来学习如何做 React 性能优化。 使用 React.memo() 一个组件可以通过 React.memo 方法得到一个添加了缓存功能的新组件。 1 2 3 4 5 const Comp = props => { // } const MemorizedComp = React.memo(Comp); 再次渲染时，如果 props 没有发生改变，就跳过该组件的重…
大家好，我是前端西瓜哥。 最近在尝试优化 React 组件，使用了 React.memo() 去缓存组件的渲染结果。 但有一个问题，就是要使 React.memo() 的缓存生效，需要保持 props 对象的浅比较结果为 true。 所以我们需要通过 useCallback 或 useMemo 处理一些对象类型的 prop，…
大家好，我是前端西瓜哥。 最近做的新功能有性能问题，所以我想尝试优化一下 React 组件的性能。下面我们来好好学习一下 React.memo 的用法。 组件状态更新和重渲染 当某个组件里的状态发生改变时，React 会调用该组件的 render 方法，生…
大家好，我是前端西瓜哥。最近在研究 React 源码，用到了 yarn link 命令来链接两个项目。 我对其底层原理产生了兴趣，所以写了这么一篇文章，希望能够通过故事的形式，来让大家理解 yarn link 的使用场景和用法。 另外 npm link 和 yarn link 的效果是…
大家好，我是前端西瓜哥，今天来学习 React 中的列表渲染要加 key 的原因。 在 React 中我们经常需要渲染列表，比如展示好友列表。 常用写法是用 Arrary.prototype.map 方法，将数组形式的数据映射为 JSX.Element 数组，并嵌入到组件要返回的 JSX.Element 中，如下： 1 2 3 4 5…
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情 最近公司的前端项目从 React 16 升级到了 React 17，导致 ahooks 的 useClickAway 不能按预期工作。 下面西瓜哥我就来说说到底发生了什么事。 ahooks 中的 useClickAway…
Redux 是一种状态容器 JS 库，提供可预测的状态管理，经常和 React 配合来管理应用的全局状态，进行响应式组件更新。 Redux 一般来说并不是必须的，只有在项目比较复杂的时候，比如多个分散在不同地方的组件使用同一个状态。对于这种…
img 是 HTML 元素，基本用法如下： 1 <img src="./img.jpg" alt="图片描述" /> background-image 则是一个 CSS 样式属性，用于设置元素的背景图片。 1 2 3 .bg { background-image: url("./img.jpg"); } img 是内容的一部分 首先 img 是 DOM 树的一部分，属于网页的内容。 有些客户端（比…
大家好，我是前端西瓜哥。今天说一说稀土掘金的一些问题。 稀土掘金是一个技术博客平台，是程序员发布自己的技术文章、分享知识的地方。 其中主要是前端的文章比较多，一是因为前端开发较多，二是前端技术发展迅速，非…
Cookies 是浏览器本地保存数据的一种方案，且会在每次请求中带上该字段。 cookie 最常见的用法是作为用户登录凭证，赋予原本没有状态的 HTTP 协议以一种状态，让识别一个请求是哪一个用户发出成为可能。 HTTP 响应报文通过 Set-Cookie 头字段给浏览…
大家好，我是前端西瓜哥。 最近在试图做一个在线斗地主的游戏，为此需要实现一个洗牌算法，最后是给它实现了。一起来看看我是怎么将它实现的吧。 思路其实也不复杂，就两步： 拿到完整的一副牌（这里我们需要设计一下牌…
大家好，我是前端西瓜哥。 我给网站加上按需加载语言功能有一段时间后，测试给我找到了这么一个的 bug。 可能还是因为支持的语言太少，国外用户也太少的原因，所以这个问题这么晚才被发现。 那我们来看看这个问题。 场…
我们有时候需要遍历数组的元素，将它们传入到异步函数中执行，其中的异步写法容易写错，我们来看一下有哪些易错点。 假设我们有个异步方法 sleepPromise，形式如下： 1 2 3 4 5 6 7 function sleepPromise(msg, t) { return new Promise((resolve) => { setTimeout(() =>…
目前在手机微信浏览器中打开的 H5 页面，是无法通过 JavaScript 的 API 实现图片或文件下载的。 为什么在手机的默认浏览器就可以下载，但我们在微信里面打开浏览器，就下不了了呢？ 我觉得是微信 APP 的权限问题，下载的权限是掌握在当前…
大家好，我是前端西瓜哥。 因为深圳疫情的原因，我被迫在家远程办公，到现在已经有一个月了。 这个时间非常漫长，算是我最长的一段远程办公的经历，让我对远程办公这件事情有了一些思考，下面来简单说说远程办公的优缺…
大概上个月开始，我们公司就开始要求写每日简报了，要写昨天做的工作和今天要做的工作。 作为一名打杂前端，做的需求杂而小，很容易忘记做过的一些工作，每次都要想半天，太难了。 但是 git log 好朋友不会忘记我们的付出，…
国际化
2417
5 mins
最近做了一个将按需加载语言包的需求，有不少收获，这里记录一下。 改造前的项目 原来项目是将所有的语言包合并在一起，放到一个 JSON 文件里然后被引入。 打包后的脚本里，有完整的语言包的代码，导致打包文件非常大。理论…
大家好，我是前端西瓜哥。今天我们来了解一下 script 脚本的三种加载方式。 默认加载 一般的 script 写法为： 1 <script src="app.js"></script> 这种写法有一个问题：它会 阻塞 HTML 的 DOM 构建。 假如我们在 head 元素中使用了 script 脚本，它就会阻止后面元素的渲染，包括 body 元…
编辑器
1188
3 mins
大家好，我是曾经的图形编辑器开发者前端西瓜哥，今天继续说说图形编辑器开发需要用到的知识点。 图形编辑器的一个非常基础需求是：可以通过选择工具勾画出一个矩形选区，来选中该区域内的所有图形，以方便之后的批量…
编辑器
1186
3 mins
大家好，我是前端西瓜哥。今天我们来学习使用 canvas 技术实现图片查看器需要掌握的一个知识点。 需要在一个特定大小的容器内加载并展示一张照片，我们可以怎样进行图片的默认展示？ contain contain，将图片保持宽高比缩放…
大家好，我是前端西瓜哥，今天我们做一道简单的前端面试题。 用 JavaScript 实现一个 once 函数，要求传入函数只能执行一次。且第二次及以后再调用时，仍会返回第一次执行的值。 效果要求如下： 1 2 3 4 5 6 const addOnce = once(function(a, b) { return a + b; }); addOnce(1,…
大家好，我是前端西瓜哥。 今天谈谈贝塞尔曲线是什么以及它的原理，并说说如何用 Canvas 技术绘制一条三阶贝塞尔曲线。 贝塞尔曲线是什么？ 贝塞尔曲线，是通过几个简单的参数描述一条曲线的一种参数曲线。 贝塞尔曲线是由 皮埃…
我是前端西瓜哥，今天教你怎么开发一款图形编辑器。 虽然说的是图形编辑器，其实也归为编辑器，和文本编辑器开发的思想很多地方是共通的。如果你做文本编辑器的开发，也可以看看。 编辑器是比较复杂的项目，由多个功能…
我是前端西瓜哥，今天来整下 TopK 算法。 TopK，即求数组的最小（或最大）的 k 个数，且不要求这些数要排序返回。 这是一个非常经典的面试题。解法也是相当的多，能较好考察面试者的数据结构与算法基础。 求最小和最大的…
西瓜哥我前几个月入职新公司，接手了同事的国际化需求。陆陆续续搞了几个月，发现国际化看起来简单，实际落地却是困难重重。 因为国际化是系列工程，是需要团队所有成员在整个产品的迭代开发的每个流程中去考虑的。 本…
快速排序，简称快排。快排是所有排序算法中应用最广泛的。接下来我们将会说说一个经典的快排是如何实现的。 思路 快排的核心思想是分治。 所谓分治，就是分而治之的意思，将原来的问题拆分为多个规模较小子问题，这些子…
大家好，我是前端西瓜哥，本文讲的是一道比较经典的前端面试题，本文将会深入分析此题，深挖知识点，让你完全掌握此题的解法。 这是道 Web 前端的陈年烂题，烂是烂，但我就是要说，高考也是年年有呢。此题考察的是对 JavaScript 方…
因为最近在某个算法刷题交流群里不小心发了个广告，突然就被踢了。 原因是这样的，上上周末加了个 leetcode 每日打卡群，想看看别人怎么讨论算法题解的，或许能对我平时刷算法题有什么启示。 加群一周后，我看到一个群友的头上…
VSCode 是微软旗下的一款开源的代码编辑器，深受广大开发者的喜爱。通过安装插件的方式，你可以在上面进行不同语言项目的开发，说是瑞士军刀其实也不为过，是不少开发者（指 Web 前端开发者）的主力开发工具。 其中，VSCo…
最近看完了吴军老师的《浪潮之巅》的上册，觉得挺不错，也推荐大家看看。本书主要是以公司为章节，讲述一些曾经或正站在浪潮之巅的不同领域的科技公司历史，分析了它们成功或是失败的原因，讲述了其兴衰背后的规律。…
转眼间 2021 年就要过去了，不得不让人觉得时光的流速之快。虽然不舍，但它的一点点离开，给我留下的是每天的点滴成长。这一年，我自觉得过得很充实。 种一棵树最好的时间是十年前，其次是现在。 看看 2021 年年初的 flag 先看看我…
看了《复盘网飞》的一些简单的读后感。第一次正式写，有点糙。 创业的灵感并不是顿悟而来的 当人们谈及网飞的成功时，往往会津津乐道于网飞起源的创业故事：网飞创始人之一里德•哈斯廷斯租借电影录像带因逾期而交了 40…
本文内容涉及少量剧透，请酌情阅读。 背景介绍 《佐贺偶像是传奇》是由 MAPPA、Avex Pictures、Cygames 合力制作的一部原创电视动画。其中，MAPPA 是一家非常有想法的动画公司，几乎什么题材…
国际化
1967
4 mins
笔者最近接手了公司的国际化开发需求，花了不少时间调研了国际的一整套实施方案，有一点小心得，给大家分享分享。 本文仅针对国际化其中的一个小点 “按需加载语言包” 做分析。 前端国际化是什么？ 所谓前端国际化，就是…
本文将讲解 Web 页面如何实现自定义菜单功能。 查看线上 demo 思路 核心思路是：注册 contextmenu 事件，取消该事件的默认行为，然后通过 event 对象拿到光标相对视口的坐标位置（event.clientX 和 event.clientY），…
平常我们开发时很少摆弄 webpack 配置，都是大佬给我们配好了，我们吭呲吭呲写业务代码就好了，对很多常用的 loader 和 plugin 大概知道它是干嘛的，但实际上底下做了什么事情却像隔了层雾。 所以我就写了这篇文章，希望你看完这篇文章后…
大家好，我是养猫五个多月的fstar，今天和大家讲讲养猫的问题。 随着养猫越来越流行，很多人脑子一热就养猫，养着养着发现和自己预期的有非常大的偏差，后悔养猫最后选择弃养或者送养。这种事其实可以在决定前多…