梨逍遥

代码改变世界，程序员创造未来

梨逍遥

浏览器浏览器渲染原理渲染引擎解析 HTML：将 HTML 转换为 DOM 树（Document Object Model）。解析 CSS：将 CSS 转换为样式规则，并应用到 DOM 树。构建渲染树：根据 DOM 树和样式规则生

本文转载自：https://mp.weixin.qq.com/s/xvAJtv1RyOq7rBwaq_tm0Q 1. 使用 JSX 简写尽量对布尔变量使用 JSX 简写。假设你想控制一个导航栏组件的标题可见性。「不好的:」 123retur

隐藏移动端滚动条的几种方案

在移动端开发中，经常会碰到需要横向滚动的场景，例如这样的你可能想到直接设置滚动条样式就可以了，就像这样 123::-webkit-scrollbar { display: none;} 目前来看好像没什么问题，但在某

如何使用 Docker 提升开发及部署体验

前言某些项目在进行私有化部署的时候遇到了一些问题：内网隔离环境，一些 npm 包需要先下载到 u 盘再拷贝到对应的机器上进行安装，安装起来很麻烦。测试环境下，代码和机器配置调试好了，部署到线上机器的时候却出现了问题。线上机器迁移的

构建工具对比与模块化规范

前端工程的痛点前端的模块化需求前端业界的模块标准非常多，包括 ESM、CommonJS、AMD 和 CMD 等等。前端工程一方面需要落实这些模块规范，保证模块正常加载。另一方面需要兼容不同的模块规范，以适应不同的执行环境。兼容浏览器，

vercel部署跨域问题

next.js 本地开发环境跨域利用rewrites重写代理在next.config.js中： 123456789async rewrites() { return [ //接口请求前缀带上/admin-api/

Rollup 打包原理与插件

插件机制仅仅使用 Rollup 内置的打包能力很难满足项目日益复杂的构建需求。对于一个真实的项目构建场景来说，我们还需要考虑到模块打包之外的问题，比如路径别名(alias) 、全局变量注入和代码压缩等等。可要是把这些场景的处理逻辑与核心的

Vite双引擎架构

这篇文章我们会将目光集中到 Vite 本身的架构上，一起聊聊它是如何站在巨人的肩膀上实现出来的。所谓的巨人，指的就是 Vite 底层所深度使用的两个构建引擎：**Esbuild **和 Rollup Vite 架构图很多人对 Vite 的双

Vite 配置

no-bundle 的理念通过 Vite 初始化的项目，在项目根目录中有一个 index.html 文件，这个文件十分关键。因为 Vite 默认会把项目根目录下的 index.html 作为入口文件。也就是说，当你访问 http://lo

优势谈判

摘要：优势谈判，指的是在谈判过程中，主动把握谈判节奏，最终让对方感觉自己获胜的谈判模式。很多人都陷入一个误区，认为：谈判的胜利就是自己获胜。其实，谈判的真正目的不是主宰对方，而是让对方感觉也有所收获。要知道，对方会给你你想要的东西，但是

向上管理的艺术

摘要：💼 在职场中，与上级建立良好的关系并有效地向上管理是取得成功的关键之一。本文将总结与归纳关于向上管理的重要要点，并通过案例和经验分享，帮助读者理解如何正确汇报工作、建立和谐的上下级关系以及实现共同提升 💪💼🎉。分类：#职场

React Hooks 使用时要避免的6个错误

今天来看看在使用 React hooks 时的一些坑，以及如何避开这些坑。问题概览：不要改变 hooks 的调用顺序；不要使用旧的状态；不要创建旧的闭包；不要忘记清理副作用；不要在不需要重新渲染时使用 useState；

React 组件代码结构如何组织？

1. 导入依赖项我们需要在组件文件顶部导入组件所需的依赖项，通常是使用 import 来进行导入。对于不同类别的依赖项，建议对它们进行分组，这有助于帮助我们更好的理解组件。可以将导入的依赖分为四类： 12345678910111213

React常见错误，如何避免？

下面来分享在 React 开发中常见的一些错误，以及如何避免这些错误。理解这些问题背后的细节，防止犯下类似的错误。 1. 组件卸载后执行状态更新报错信息：Can’t perform a React state update on an

React 渲染流程

1. React 渲染流程在说 React 的渲染流程之前，先来看一个在渲染流程中绝对绕不开的概念——协调。（1）协调协调，在 React 官方博客的原文中是 Reconciler，它的本意是“和解者，调解员”。那协调是怎么跟 R

React 组件设计模式

在 React 设计模式中，最重要、也是最为大家所津津乐道的几个模式分别是：● 有状态组件与无状态组件● 高阶组件（HOC）● Render Props 这些形态各异的 React 设计模式虽然实现思路有所不同，但本质上基本都是为了实现

React 纯函数组件

1. 纯函数所谓纯函数，它是这样一种函数：即相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用。从纯函数的定义，可以提取出纯函数的必要条件：● 纯函数接受参数，基于参数计算，返回一个新对象；● 不会产生副作用，计算过程不会

React组件通信

在组件之间是存在嵌套关系的，如果我们将一个程序的所有逻辑都放在一个组件中。那么这个组件就会变得臃肿并且难以维护，所以组件化的思想就是对组件进行拆分，再将这些组件嵌套在一起，最终形成我们的应用程序。比如，下面的组件就存在如下的关系：●

React生命周期

1. React 生命周期概览React 会把状态的变更更新到 UI，状态的变更过程必然会经历组件的生命周期。所谓的生命周期就是组件从创建到销毁的过程，它是一个很抽象的概念， React 通常将组件生命周期分为三个阶段：● 装载阶段（

React 组件实践

1. 定义组件接口React 世界由组件构成，所以，如何设计组件的接口就成了组件设计最重要的事情。（1）设计原则React 的组件其实就就是软件设计中的模块，所以其设计原则也遵从通用的组件设计原则，简单说来，就是要减少组件之间的耦

React Router

React Router 是 React 生态系统中最受欢迎的第三方库之一，近一半的 React 项目中使用了 React Router，下面就来看看如何在 React 项目中使用 React Router v6 吧！ 1. 概述Re

React 组件化开发

一、什么是组件化在处理一个复杂的问题时，我们逻辑思维能力是有限的，不太可能一次性搞定所有的内容，那我们就可以对问题进行拆解，拆解成一个个小的问题，最后将其放入整体中，这就是分治的思想。分而治之是软件工程的重要思想，是复杂系统开发和维

package.json

在每个前端项目中，都有 package.json 文件，它是项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包等。package.json 文件是一个 JSON 对象，该对象的每一个成员就是当前项目的一项设置。package

React 基础入门

一、开发前的准备 1. 开发环境（1）Node.jsNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。React 应用并不依赖于 Node.js 运行，但是开发过程中的一些编译过程（比如 npm

HTML 属性

1. inputmodeinputmode全局属性是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。 1<input type="text" inputmode="tel&qu

你不知道的HTML

1. input 标签：输入验证我们通常会使用 JavaScript 来校验表单，比如： 123456function validateForm() { const inputText = document.forms[&q

数据处理库

1. 工具库（1）LodashLodash 是一个一致性、模块化、高性能、提高开发者效率的 JavaScript 实用工具库。Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 Ja

如何去搞前端基建

前言大家好，我是yinhan，话说当下，前端职位在近十年的磨砺之下，已是百花齐放万家争鸣，前端也不再是以前那个单纯的切图仔；要问为什么不单纯，无异于前端工程化、前端 devops、前端跨端、前端工具化、前端 CI/CD、前

拖拽排序库

1. React Beautiful Dndreact-beautiful-dnd 是一款美观且简单易用的 React 列表拖拽库。其动画效果自然，性能优秀，简洁而强大的 API，易于上手，与标准浏览器的互动性非常好。 2. Sor

HTML常见兼容问题

前言iphoneX 的“刘海”为相机和其他组件留出了空间，同时在底部也留有可操作区域。其实对于 web 前端来说，刘海在绝大多数的场景下是可以不用处理的，因为 safari 或客户端（微信，手 Q 等）的 statusBar 已经替我

文件处理库

1. PDF （1）PDF.jsPDF.js 是使用 HTML5 构建的可移植文档格式 (PDF) 查看器。它由社区驱动并受 Mozilla 支持，目标是创建一个通用的、基于 Web 标准的平台来解析和呈现 PDF。（2）jsP

js常见兼容问题

iPhone7 用 for…in 遍历数组失效问题描述：最初学习使用 js 时，觉得for...in遍历比for循环简洁，后期在用户反馈后发现 iPhone7 不支持用 for…in 遍历数组解决方式：改为for循环遍历移动端点

Vue 库

1. 状态管理（1）PiniaPinia 是最新一代的 Vue 轻量级状态管理库。它适用于 Vue 2.x 和 Vue 3.x。它是 Vue 官方成员在 2019 年 11 月重新设计的一个状态存储库，它允许你跨组件/页面

React 库

1、状态管理（1）React ReduxRedux 是 JavaScript 应用程序的状态容器，提供可预测的状态管理。React Redux 是 Redux 官方实现的 React 绑定。可以让你构建一致化的应用，运行于不同的环境（

css常见兼容问题

移动端的 1px问题描述：1px 的边框。在高清屏下，移动端的 1px 会很粗。产生原因：首先先要了解一个概念：DPR(devicePixelRatio) 设备像素比，它是默认缩放为 100%的情况下，设备像素和 CSS 逻辑像素的比值

前端四大手写

要问程序员最心虚的面试题，如果要投票选择，手撕代码一定是前三位的。其中在前端领域，以手写 bind、手写深拷贝、手写 EventHub（发布-订阅）、手写 Promise最为常见，我将他们称为四大手写。本文的目的就是要破除大家对四大手写

图标库

1. IconParkIconPark 提供超过 2400 个高质量图标，还提供了每个图标的含义和来源的描述，便于开发者使用。除此之外，该网站还可以自定义图标，这是与其他图标网站与众不同的地方。该图标库是字节跳动旗下的技术驱动图标样式

动画库

很多时候我们在开发前端页面时都会做一些动画效果来提升用户体验度和页面美观度，所以今天就来给大家推荐几个好用的 JavaScript 动画库，希望对各位小伙伴有所帮助！ Animate.cssanimate.css 是一个使用 CSS3

2023-06-29

DDoS攻击

前端网络安全

DDoS 攻击什么是 DDoS 攻击DDoS 全称 Distributed Denial of Service，中文意思为“分布式拒绝服务”，就是利用大量合法的分布式服务器对目标发送请求，从而导致正常合法用户无法获得服务。比喻一个饭

2023-06-29

HTTPS 证书伪造

前端网络安全

HTTPS 协议的安全依赖于它的证书机制，如果攻击者申请到了一张和你的网站一摸一样的证书，那你网站的安全机制也就不复存在了。本文来聊一聊，如何预防 HTTPS 证书伪造。证书劫持如果想部署 HTTPS 网站，首先向 CA 机

2023-06-29

OS命令注入

前端网络安全

什么是操作系统命令注入？OS 命令注入（也称为 shell 注入）是一种 Web 安全漏洞，允许攻击者在运行应用程序的服务器上执行任意操作系统 (OS) 命令，并且通常会完全破坏应用程序及其所有数据。通常，攻击者可以利用操作系统命令注

2023-06-29

XSS攻击

前端网络安全

一、XSS (Cross-Site Scripting)，跨站脚本攻击，因为缩写和 CSS 重叠，所以只能叫 XSS。原理不需要你做任何的登录认证，它会通过合法的操作（如在 url 输入，在评论框中输入），向你的页面注入脚本（可能是

2023-06-29

URL跳转漏洞

前端网络安全

定义：借助未验证的 URL 跳转，将应用程序引导到不安全的第三方区域，从而导致的安全问题。 1.URL 跳转漏洞原理黑客利用 URL 跳转漏洞来诱导安全意识低的用户点击，导致用户信息泄露或者资金的流失。其原理是黑客构建恶意链接(链接需

2023-06-29

http与https

前端网络安全

HTTP 与 HTTPS HTTPHTTP，全称 HyperText Transfer Protocol，中文名称超文本传输协议，传统的 web 站点都是建立在 HTTP 协议基础上进行通信的，我们访问某些站点时，首先通过该协议传输生

2023-06-29

SQL注入攻击

前端网络安全

SQL 注入攻击简介SQL 注入攻击是黑客对数据库进行攻击的常用手段之一，不论是在 WEB 领域还是其它领域。攻击发生的原因依然是信任问题，开发人员信任用户输入，未对用户输入进行合法性检查，使应用程序存在安全隐患。譬如最常见的搜索功

2023-06-29

md5 加密存储

前端网络安全

使用 md5 加密存储不安全怎么解决md5 是一种常见的非对称加密算法，一般通过加密后的 md5 值获取到原始的字符串并不容易。但是通过彩虹表（将常见密码及其 md5 值对应表预先计算好），可以快速查询到表中的 md5 对应的原文。解

2023-06-29

密码重置漏洞

前端网络安全

密码重置逻辑一码多用（验证码未绑定手机号）验证码回显前端修改密码未确认用户身份验证码不失效本地验证的绕过修改接收的手机或邮箱跳过验证步骤支付逻辑漏洞https://www.jianshu.com/p/8ca02b6de053 密码重置漏

2023-06-29

同源策略

前端网络安全

同源策略定义不同源的页面之间，不准互相访问数据。这是浏览器故意设置的一个功能限制。源window.origin 或 location.origin 可以得到当前源浏览器规定如果 JS 运行在源 A 中，那么就只能获取源 A 的数

7 / 12