Whoopsina的博客

Http-proxy-middleware安装报错proxy is not a function

Whoopsina — Fri, 24 Jun 2022 12:23:34 +0800

CRA创建的项目中使用Http-proxy-middleware，首次安装无报错，重新运行时报proxy is not a function错；问题所在：因为下载的最新版本的Http-proxy-middleware，引入的方式发生改变解决办法：我们在src/setupProxy.js文件中修改如下参考资料...

package.json文件中Node相关字段解析

Whoopsina — Fri, 17 Jun 2022 08:36:02 +0800

package.json 之 Node.js 相关字段

从浏览器地址栏输入URL后，到页面渲染出来，整个过程都发生了什么？

Whoopsina — Tue, 26 Apr 2022 23:21:03 +0800

从一道面试题来看前端页面的生命周期：从浏览器地址栏输入URL后，到页面渲染出来，整个过程都发生了什么？

HTTP缓存策略与方案

Whoopsina — Tue, 19 Apr 2022 23:10:18 +0800

文章目录前言一、什么是HTTP缓存策略二、缓存策略1. 与缓存有关的首部字段名ExpiresCache-ControlLast-Modified和If-Modified-SinceEtag和If-None-Match2. 强制缓存缓存新鲜度与使用期算法3. 协商缓存4. 启发式缓存三、前端应用中的HTTP缓存方案四、用户操作与HTTP缓存前言一个Web应用在生产环境中，往往经常会被用户访问很多次，现代计算机的发展水平，网页页面加载和渲染的速度是非常快速的，可以做到毫秒级别。然而在页面加载和渲染整个过程

React SSR原生实现服务端渲染

Whoopsina — Sat, 16 Apr 2022 22:42:41 +0800

代码仓：React SSR原生实现文章目录服务端渲染1. 客户端渲染存在的问题2. webpack打包配置3. 客户端React附加事件4. 实现服务器路由5. 实现Redux支持6. 防范XSS攻击 CSR：Client Side Rendering，服务器端仅返回JSON数据，DATA和HTML在客户端进行渲染 SSR ： Server Side Rendering，服务器端返回HTML，DATA和HTML在服务器端进行渲染 src目录下新建三个文件夹client(客户端代码),server(服.

【Node】Koa的简单实现

Whoopsina — Fri, 08 Apr 2022 22:38:54 +0800

简单实现Koa.js 入口文件application.js const http = require('http') const { Stream } = require('stream') const context = require('./context') const request = require('./request') const response = require('./response') class Application { constructor() {

【Node】Express框架简单入门

Whoopsina — Tue, 29 Mar 2022 22:47:47 +0800

文章目录基础与应用什么是Express？Express起步路由基础请求和响应请求对象响应对象Express中间件应用程序级别中间件路由器级中间件错误处理中间件内置中间件第三方中间件Express 路由路由方法路由路径路径参数路由处理程序响应方法app.route()快速路由器基础与应用什么是Express？ Express 是一个快速，简单，极简的 Node.js web 应用开发框架。通过它，可以轻松的构建各种 web 应用。例如接口服务传统的 web 网站开发工具集成等 … Expres

React hooks使用与实现原理剖析

Whoopsina — Tue, 29 Mar 2022 08:49:56 +0800

文章目录1. React hooks介绍2. React hooks使用useState()useReduceruseContextuseEffectuseMemomemo方法useCallbackuseRef3. 自定义hook4. React 路由 Hooks5. React Hooks原理分析useState钩子函数的实现原理useEffect钩子函数的实现原理useReducer钩子函数的实现原理 1. React hooks介绍 React Hooks是用来做什么的？对函数型组件进行增强，让函

项目中使用了Hash路由时如何同时使用锚点？

Whoopsina — Mon, 28 Mar 2022 19:57:29 +0800

背景：项目中使用了hash路由，但是又需要使用锚点定位，从而产生冲突解决：手动获取元素使用scrollIntoView方法 function MyLink({id, children}) { const onClick = (e) => { e.preventDefault(); const element = document.getElementById(id); // scrollIntoView()将目标元素移动到浏览器顶部 // scrollIntoVi

前端要理解的cookies和token的区别

Whoopsina — Thu, 24 Mar 2022 23:24:50 +0800

常用的cookie 互联网服务离不开用户认证，一般流程是下面这样：用户向服务器发送用户名和密码服务器验证通过后，在当前对话（session）里面保存相关数据，比如用户角色、登录时间等等（可以理解为保存在服务的一个session store中）服务器向用户返回一个session_id，写入用户的Cookie 用户随后的每一次请求，都会通过Cookie，将session_id传回服务器服务器收到session_id，找到前期保存的数据（可以理解为去session store中查找），由此而知用户的身份

Event Loop、宏任务、微任务到底什么关系？

Whoopsina — Wed, 16 Mar 2022 00:32:59 +0800

原文地址：「前端进阶」从多线程到Event Loop全面梳理面试题：说说事件循环机制(满分答案来了) CPU、进程、线程 CPU、进程、线程之间的关系 cpu：计算机的核心，承担了所有的计算任务；进程：进程就好比工厂的车间，它代表CPU所能处理的单个任务，CPU使用时间片轮转进度算法来实现同时运行多个进程；线程：线程就好比车间里的工人，一个进程可以包括多个线程，多个线程共享进程资源；浏览器是多进程的，每一个tab就是一个独立的进程；浏览器包含了主进程、第三方插件进程、GPU进程、渲染进程

前端常见的跨域解决方案

Whoopsina — Sat, 12 Mar 2022 00:09:51 +0800

什么是跨域？所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源；跨域了会怎么样？ Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 Js对象无法获得 XMLHttpRequest 和 Fetch API 遵循同源策略为什么会有跨域限制？如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击；解决跨域的方式有哪些？ 1. jsonp **概念：**通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另

手撕JavaScript中常用的方法call,apply,bind等

Whoopsina — Thu, 10 Mar 2022 23:21:37 +0800

forEach function forEach(arr, fn) { for (let i = 0; i < arr.length; i++) { fn(arr[i]) } } filter function filter(arr, fn) { let res = [] for (let i = 0; i < arr.length; i++) { if (fn(arr[i])) { res.push(arr[i])

JavaScript中浅拷贝和深拷贝到底是什么？

Whoopsina — Tue, 08 Mar 2022 22:27:27 +0800

文章目录前言JavaScript中的数据类型赋值与拷贝的区别浅拷贝与深拷贝实现浅拷贝的方式实现深拷贝的方式总结前言在JavaScript中，浅拷贝和深拷贝是经常出现的概念，工作中经常会遇到，那么到底什么是浅拷贝和深拷贝呢，他们又有什么样的关系呢？如何实现它们呢？这些对于前端工程师而言必须要弄明白。 JavaScript中的数据类型在我们深入理解浅拷贝与深拷贝之前，我们需要先了解JavaScript中的数据类型的特点简单数据类型：直接存储在栈(stack)中的数据，例如String，Numbe

前端模块化开发到底是什么？

Whoopsina — Mon, 07 Mar 2022 23:35:14 +0800

文章目录前言模块化演变过程模块化规范的出现模块化的最佳实践ES Modules基本特性ES Modules 导出ES Modules导入导出的注意事项ES Module导入用法ES Module导入导出对象ES Module浏览器环境 PolyfillES Module在Node.js下支持情况前言前端的模块化开发经过长时间的演变现在已经趋于稳定，但是模块化的演变过程对于前端开发者的学习来说也是十分重要的，所以我总结了模块化的演变过程和当下最流行的模块化方案的基本使用，希望大家能有所收获模块化演变

Node中module.exports和exports的区别

Whoopsina — Mon, 07 Mar 2022 22:32:39 +0800

在Nodejs当中，每个模块都相当于被一个function (exports, require, module, __filename, __dirname) {}函数包裹，而这个函数提供了多个参数，其中就有module.exports和exports，这是我们导出模块的两种方式；首先 module.exports和exports刚开始都是一个空对象，当我们使用exports.name = 'xp'和module.export.name = 'xp'时，指向同一个内存空间，此时module.export

【你不知道的JavaScript】一：JavaScript中this到底指向谁？

Whoopsina — Sun, 06 Mar 2022 19:01:31 +0800

1.1 this到底是什么当一个函数被调用时，会创建一个执行上下文，这个记录会包含函数在哪里被调用（调用栈），函数的调用方式，传入的参数等信息。this就是这个记录的一个属性，会在函数执行的过程中用到； this实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用； 1.2 绑定规则 1.2.1 默认绑定无法应用其他规则时的默认规则虽然this的绑定规则完全取决于调用位置，但是只有foo()运行在非strict mode下时，默认绑定才能绑定到全局对象；在严格模式下调用foo()则不

如何在项目中使用git hook规范化代码

Whoopsina — Wed, 02 Mar 2022 23:30:01 +0800

什么是Git Hooks？参考资料：官方文档简单的讲，所谓Hook，一般就是在特定时期提供一个可介入自定义的脚本； Husky 大多数前端程序员对编写shell脚本是不熟悉的，这个时候就有个神奇的工具Husky来帮助我们实现Git Hooks的使用需求； npm install husky -D // 旧版本 { ..., "husky": { "hooks": { "pre-commit": "npm run test" } } } // 新版本 { "s

【前端工程化】六：前端规范化标准及工具ESLint等基本使用

Whoopsina — Wed, 02 Mar 2022 00:27:03 +0800

ESlint的基本使用最为主流的js lint工具监测js代码质量 ESLint很容易统一开发者的编程风格 ESLint可以帮助开发者提升编码能力 ESLint安装初始化项目安装ESLint模块为开发依赖npm install eslint -D 通过CLI命令验证安装结果npx eslint -v ESLint快速上手编写“问题”代码使用eslint执行检测，最新版本的eslint可以不需要配置配置文件npx eslint .\test.js --fix自动修复问题代码完成esli

Git的常用命令指南

Whoopsina — Mon, 28 Feb 2022 00:12:03 +0800

参考资料： https://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html 常用Git命令什么是Git？ Git是一个分布式的版本控制系统，与集中式的版本控制系统不同的是，每个人都工作在通过克隆建立的本地版本库中。也就是说每个人都拥有一个完整的版本库，查看提交日志、提交、创建里程碑和分支、合并分支、回退等所有操作都直接在本地完成而不需要网络连接；使用git之前，我们需要了解几个专用名词： **工作区：**我们修改文件的地方，就是你在电脑里能看到的