前端西瓜哥的博客_JavaScript

在 React 中使用 Redux 的 4 种写法

大家好，我是前端西瓜哥。今天我们看看React 中使用 Redux 的 4 种写法。Redux 是一种状态容器 JS 库，提供可预测的状态管理，经常和 React 配合来管理应用的全局状态，进行响应式组件更新。Redux 一般来说并不是必须的，只有在项目比较复杂的时候，比如多个分散在不同地方的组件使用同一个状态。对于这种情况，如果通过 props 层层传递，代码会变得不可维护，这时候我们可以考虑使

react

redux

原创 2022-06-04 20:39:45 176 阅读

实现一个自定义 React Hook：useLocalStorageState

大家好，我是前端西瓜哥。最近做需求，需要将数据保存到 localStorage 里，在组件初始化的时候获取，然后修改该值的时候，要保存到本地的 localStorage 中。倒是并不难。function App() { const STORAGE_NAME = 'app_theme'; const defaultVal = '前端西瓜哥' const [value, setValue] =

json

数据保存

原创 2022-05-30 23:20:14 105 阅读

JSONP 是如何实现跨域的？

大家好，我是前端西瓜哥。今天讲 JSONP。JSONP，是 JSON with Padding 的缩写，字面上的意思就是 “填充 JSON”。JSONP 是解决跨域请求的一种方案，我们先了解下跨域请求是什么。跨域浏览器在跨域发送 Ajax/fetch 请求时，会触发浏览器的同源策略，导致请求失败。只要协议、域名、端口有一个不同，那浏览器就会认为是跨域。比如你在 a.com 下通过 Aja

json

跨域

ajax

原创 2022-05-28 11:30:59 88 阅读

需要学习哪些东西，才能找到前端开发工作？

在万物皆可转前端的当下，很多人好奇需要学习什么东西，才能找到一份前端开发工作。西瓜哥今天就来说一说。HTML首先自然是前端三件套：HTML + CSS + JavaScript。HTML，全称为 HyperText Markup Language，中文名为超文本标记语言。HTML 也就是我们看到的网页的布局结构，比如这里放一个导航栏，那边是正文内容，都是靠 HTML 来组织的。HTML 主要由尖括

css

html

git

原创 2022-05-26 23:39:27 122 阅读

JS 中的类数组对象如何转换为数组？

大家好，我是前端西瓜哥，今天说一下 JS 的类数组对象是什么，以及如何将类数组对象转为数组。类数组对象是什么？类数组对象，就是含有 length 属性的对象，但这个对象不是数组。通常来说还会有 0 ～ length-1 的属性，结构表现上非常像一个数组。const arrlike = {1:'a', 4: 'd', length: 9};Array.isArray(arrlike) // fals

数组

迭代

原型链

原创 2022-05-25 23:07:40 219 阅读

CSS 中的 BFC 是什么？

大家好，我是前端西瓜哥。今天来学习 BFC。BFC，为 Block Formatting Context 的缩写，中文翻译为块格式上下文。BFC 是 Web 页面 CSS 渲染的一个机制，是块级盒子布局中产生的区域。你可以将一个 BFC 可以理解为一个容器，里面的元素不会影响到容器外的布局。怎样的元素属于 BFC？根元素，也就是 HTML 元素浮动元素，即使用了 float 属性且值不为 non

css

原创 2022-05-16 23:31:38 146 阅读

img 元素和 background-image 属性的区别

大家好，我是前端西瓜哥。今天带大家学习 img 元素和 background-image 属性的区别。img 是 HTML 元素，基本用法如下：<img src="./img.jpg" alt="图片描述" />background-image 则是一个 CSS 样式属性，用于设置元素的背景图片。.bg { background-image: url("./img.jpg");}im

css

原创 2022-05-14 11:44:05 289 阅读

编程题：实现一个 LazyMan 方法

大家好，我是前端西瓜哥。今天我们来看一道 JS 编程题。问题实现一个LazyMan，可以按照以下方式调用:LazyMan("Hank")输出:Hi! This is Hank!LazyMan("Hank").sleep(10).eat("dinner")输出Hi! This is Hank!//等待10秒..Wake up after 10Eat dinnerLazyMan("Hank").eat

延迟执行

数组

中间件

原创 2022-05-11 21:10:13 147 阅读

【React Hooks 学习笔记】useEffect

大家好，我是前端西瓜哥。今天继续讲 React Hooks 中 useEffect 的用法。useEffect 用于实现副作用，在这里你将会脱离声明式，写命令式的代码。准确来说，写的是与通过声明式控制 DOM 数无关的代码。执行的时机是在组件完成渲染之后，进行下一轮渲染之前。如果你熟悉类组件，你可以将 useEffect 当作是 componentDidMount（组件挂载）、componentD

回调函数

数组

sed

原创 2022-03-01 10:21:06 63 阅读

【React Hooks 学习笔记】useContext

今天简单说说 React Hooks 的 useContext。

ide

默认值

原创 2022-03-01 10:20:49 47 阅读

【React Hooks 学习笔记】useRef

大家好，我是前端西瓜哥。今天说说 React Hooks 的 useRef。Refs，是关联引用的意思，是

简单实现

封装

自定义

原创 2022-03-01 10:19:46 88 阅读

【React Hooks 学习笔记】useCallback

大家好，我是前端西瓜哥，今天学 useCallback。useCallback 用于缓存函数。它接受一个回

缓存

回调函数

简单使用

原创 2022-03-01 10:19:34 31 阅读

LeetCode 题解——旋转图像

旋转图像的三种解法

i++

空间复杂度

时间复杂度

原创 2022-03-01 10:19:12 37 阅读

那么我们用 Canvas 来画一个精灵球吧！

大家好，我是前端西瓜哥。今天很无聊，就用 Canvas 画个精灵球吧。这个是完整版的在线 demo：https://codepen.io/F-star/pen/VwrQzKm画个背景色 const canvas = document.querySelector('canvas');canvas.width = 600;canvas.height = 300;const ct

背景色

宽高

2d

原创 2022-03-01 10:18:58 79 阅读

LeetCode 刷算法题的一些套路

说说 Leetcode 刷算法题的一些套路。

数据

数组

数据结构

原创 2022-03-01 10:18:31 152 阅读

【React Hooks 系列】useState

大家好，我是前端西瓜哥。React 在 16.8 引入了 Hooks 概念，赋予了函数组件以 “魔法”，也能

引用类型

函数返回

数组

原创 2022-03-01 10:18:08 106 阅读

LeetCode 题解——两数之和

大家好，我是前端西瓜哥，今天我们来解析 LeetCode 的第一道题目：两数之和。暴力破解最容易想到的方法是双重遍历，用暴力穷举的方式找到答案。function twoSum(nums: number[], target: number): number[] { for (let i = 0; i < nums.length; i++) {for (let j = i + 1; j <

时间复杂度

数组元素

映射关系

原创 2022-03-01 10:17:49 42 阅读

为什么我喜欢用 Markdown？

大家好，我是前端西瓜哥。作为程序员和文字工作者，是有必要了解 Markdown 的，它能够让我们非常高效率地进行写作

富文本编辑器

富文本

二级

原创 2022-03-01 10:14:58 156 阅读

web 前端需不需要刷算法？

大家好，我是坚持刷算法的前端西瓜哥。最近我一如既往地打开了 Leetcode 官网打算找道算法题做做，然后看

职业发展

时间复杂度

前端开发

原创 2022-03-01 10:14:41 84 阅读

「源码解读」TJ 大神的 only 库

大家好，我是前端西瓜哥。我最近尝试开启一个源码解读系列，不定期解读一些简单或复杂的源码。今天要解读 npm

数组

白名单

字符串

原创 2022-03-01 10:12:48 155 阅读

在容器内显示图片的五种方案：contain、cover、fill、none、scale-down

大家好，我是前端西瓜哥。今天我们来学习使用 canvas 技术实现图片查看器需要掌握的一个知识点。需要在一个特定大小的容器内加载并展示一张照片，我们可以怎样进行图片的默认展示？containcontain，将图片保持宽高比缩放到刚好能够放入容器，是最常用的方案。优点是可以一次看到整张图片，缺点是不能填充整个容器，因此会产生 “黑边”。这里我们假设画布宽高为 400 x 200，图片宽高为 80

宽高

缩放

图片缩放

原创 2022-03-01 10:12:26 681 阅读

图形编辑器——矩形选区是如何实现选中多个图形的？

图形编辑器中，矩形选区选中多个图形的三种实现方式。

碰撞检测

图形包

贝塞尔曲线

原创 2022-03-01 10:12:07 197 阅读

【柯里化】实现 sum 函数

我是西瓜哥，今天看一道前端的高频面试题。要求实现 sum 函数可以做到sum(1)(2)(3)(4) // 10sum(1, 2)(3)(4) // 10sum(1)(2, 3)(4) // 10柯里化本题考查的是函数柯里化。柯里化（Currying）是一种技术，能够将原本应该接受多个参数并直接返回结果的函数，改为接受单一参数并返回新函数，这个新函数又可以接受剩余的参数返回

返回结果

代码实现

调用函数

原创 2022-03-01 10:11:47 485 阅读

LeetCode 题解——岛屿问题

今天我们做一道经典算法题——岛屿数量，用到了 Flood fill 算法。

数组

i++

二维数组

原创 2022-03-01 10:11:29 178 阅读

用JavaScript实现一个once函数，让传入函数只执行一次

大家好，我是前端西瓜哥，今天我们做一道简单的前端面试题。用 JavaScript 实现一个 once 函数，

缓存

javascript

函数返回

原创 2022-03-01 10:11:14 186 阅读

Canvas 简单入门小教程

今天简单说说 Canvas 入门的基础知识。

宽高

开发者

绘制图形

原创 2022-03-01 10:11:03 43 阅读

Cavans 简单入门小教程 2

今天继续讲解 Cavans 入门小教程的第二部分。

f5

默认值

显式

原创 2022-03-01 10:10:46 26 阅读

贝塞尔曲线是什么？如何用 Canvas 绘制三阶贝塞尔曲线？

今天谈谈贝塞尔曲线是什么以及它的原理，并说说如何用 Canvas 技术绘制一条三阶贝塞尔曲线。

贝塞尔曲线

视觉设计

维基百科

原创 2022-03-01 10:10:29 518 阅读

LeetCode 题解——判断一棵二叉树是否为二叉搜索树

今天做一道 medium 难度的算法题：判断一棵二叉树是否为平衡二叉树。

子树

二叉搜索树

中序遍历

原创 2022-03-01 10:09:40 278 阅读

为什么说数组实例的 reduce 方法灵活？

我们在业务开发中，经常要处理数组，转换为我们需要的数据。所以我们会经常使用数组实例方法，常用到的有 forEach、map、filter 等，它们符合单一职责原则，简单易懂，适合初学者。而 reduce 方法，就没这么好理解了，但是它更加灵活，适合老鸟写一些花里胡哨的代码。今天西瓜哥我就聊聊 reduce。1reduce 是什么？Array.prototype.r

迭代

数组

回调函数

原创 2022-03-01 10:08:44 31 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	在线客服	网站地图	意见反馈

开源基础软件社区	51CTO学堂
51CTO	汽车开发者社区

51CTO博客

wx6218929b46480的博客

在 React 中使用 Redux 的 4 种写法

实现一个自定义 React Hook：useLocalStorageState

JSONP 是如何实现跨域的？

需要学习哪些东西，才能找到前端开发工作？

JS 中的类数组对象如何转换为数组？

CSS 中的 BFC 是什么？

img 元素和 background-image 属性的区别

编程题：实现一个 LazyMan 方法

【React Hooks 学习笔记】useEffect

【React Hooks 学习笔记】useContext

【React Hooks 学习笔记】useRef

【React Hooks 学习笔记】useCallback

LeetCode 题解——旋转图像

那么我们用 Canvas 来画一个精灵球吧！

LeetCode 刷算法题的一些套路

【React Hooks 系列】useState

LeetCode 题解——两数之和

为什么我喜欢用 Markdown？

web 前端需不需要刷算法？

「源码解读」TJ 大神的 only 库

在容器内显示图片的五种方案：contain、cover、fill、none、scale-down

图形编辑器——矩形选区是如何实现选中多个图形的？

【柯里化】实现 sum 函数

LeetCode 题解——岛屿问题

用JavaScript实现一个once函数，让传入函数只执行一次

Canvas 简单入门小教程

Cavans 简单入门小教程 2

贝塞尔曲线是什么？如何用 Canvas 绘制三阶贝塞尔曲线？

LeetCode 题解——判断一棵二叉树是否为二叉搜索树

为什么说数组实例的 reduce 方法灵活？