Whoopsina-优快云博客

原创前端常见的跨域解决方案

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

2022-03-12 00:09:51 2153

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

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

2022-03-10 23:21:37 1292

原创【前端工程化】五：webpack5快速入门（一）

webpack5webpack5相对于webpack4做了大量的升级和优化，因此webpack5的学习迫在眉睫！！首先我们需要下载webpack5，不推荐使用全局的webapck，为了统一webpack版本，建议将webpack和webpack-cli安装在开发依赖中，在学习webpack5之前，我们需要先具备一些基础知识；browserslistrc 工作流程browserslistrc是用来配置各种工具适配浏览器的范围，通过在 Can i use 上面的数据来查找；有两种配置的方法pac

2022-02-11 22:58:09 871

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

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

2022-06-24 12:23:34 599

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

package.json 之 Node.js 相关字段

2022-06-17 08:36:02 480

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

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

2022-04-26 23:21:03 3252

原创 HTTP缓存策略与方案

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

2022-04-19 23:10:18 633

原创 React SSR原生实现服务端渲染

代码仓：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(服.

2022-04-16 22:42:41 287

原创【Node】Koa的简单实现

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

2022-04-08 22:38:54 637

原创【Node】Express框架简单入门

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

2022-03-29 22:47:47 1392

原创 React hooks使用与实现原理剖析

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

2022-03-29 08:49:56 1633

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

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

2022-03-28 19:57:29 1709

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

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

2022-03-24 23:24:50 990

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

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

2022-03-16 00:32:59 900

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

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

2022-03-08 22:27:27 1071 2

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

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

2022-03-07 23:35:14 684

原创 Node中module.exports和exports的区别

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

2022-03-07 22:32:39 241

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

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

2022-03-06 19:01:31 429

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

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

2022-03-02 23:30:01 1078 1

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

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

2022-03-02 00:27:03 647

原创 Git的常用命令指南

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

2022-02-28 00:12:03 438 4

原创 github如何配置ssh

HTTPS和ssh的区别当我们从github拉取代码的时候会发现有两种方法，分别是https和ssh，其中使用https可以任意克隆项目，而使用ssh是需要我们提前配置SSH key的；同时当我们修改了代码要push的时候，通过https克隆的代码是需要我们验证用户名和密码的，而ssh不需要，平时如果我们固定在一台电脑上开发的时候，我们一般会选择ssh的方式；检查是否已有SSH key$ cd ~/.ssh$ ls检查改目录下是否有id_rsa.pub 或 id_dsa.pub 文件，如果存在则

2022-02-26 16:42:49 2754

原创【前端工程化】五：webpack5快速入门（四）

CSS抽离与压缩将Css文件单独提取一个文件中，推荐当css文件大于150kb时在考虑使用该插件，否则会多一次css的请求；开发环境中使用压缩性价比不高，所以一般在生产环境中使用；生产环境下，在loader中配置MiniCssExtractPlugin.loader代替style-loader，在插件中配置MiniCssExtractPlugin的输出路径用于抽离CSS ，配置CssMinimizerPlugin插件来压缩CSS代码**注意：**使用了插件以后，在css的loader配置中就不需要

2022-02-26 16:00:14 914

原创【前端工程化】五：webpack5快速入门（三）

区分打包环境由于我们在不同环境下的配置不同，所以我们需要将不同环境的配置分别写在不同的文件中，并提取公共配置；对于不同环境下，我们传入不同的参数；"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "serve": "webpack serve", "build2": "webpack --config ./config/webpa

2022-02-23 23:18:27 464

原创【前端工程化】五：webpack5快速入门（二）

webpack-dev-server要实现在开发时修改了文件可以自动编译展示，可以使用webpack的watch属性为true和vscode的live server插件，即观察模式// webpack.config.jsmodule.exports = { watch: true, ...}但是这样做有几个缺点：所有源代码都会重新编译因为我们使用了clean-webpack-plugin插件，所以每次编译成功以后都需要进行文件读写操作live server是vscode插

2022-02-20 17:09:28 814

原创 webpack5的HMR热更新不起作用

解决办法1：在配置文件中添加target: 'web’module.exports = { ..., target: 'web', devServer: { hot: true }, ...}解决办法2：删除目录下的.browserslistrc文件产生原因：因为我们在开发阶段配置Mode为development，与我们配置的.browserslistrc文件的兼容性有冲突，官方建议我们使用taget: 'web’的方式来解决；...

2022-02-13 23:09:49 1099

原创发布订阅模式与观察者模式简单实现

发布订阅模式我们假定，存在一个事件中心，某个任务执行完成，就像事件中心发布一个信号，其他任务可以向信号中心订阅这个信号，从而知道什么时候自己可以开始执行，这就叫做发布订阅模式；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met

2022-02-13 16:49:09 231

原创 React 如何组件性能优化实践

React 组件性能优化最佳实践React 组件性能优化的核心是减少渲染真实 DOM 节点的频率，减少 Virtual DOM 比对的频率。1. 组件卸载前进行清理操作在组件中为 window 注册的全局事件, 以及定时器, 在组件卸载前要清理掉, 防止组件卸载后继续执行影响应用性能.需求：开启定时器然后卸载组件，查看组件中的定时器是否还在运行。import React, { useState, useEffect } from "react"import ReactDOM from "reac

2022-02-12 11:50:18 336

原创 React生命周期详解

React生命周期所谓的React生命周期，就是指组件从被创建出来，到被使用，最后被销毁的这么一个过程；而在这个过程中，React提供了我们会自动执行的不同的钩子函数，我们称之为生命周期函数；**组件的生命周期大致分为三个阶段：组件挂载阶段，组件更新阶段，组件销毁卸载阶段 **16.4之后的声明周期图谱如下：组件初始化阶段由ReactDOM.render()触发—初次渲染constructor()getDerivedStateFromPropsrender()componentDid

2022-02-10 23:15:05 4718 1

原创 script标签中async与defer的区别

script标签内未设置async或者defer时：（1）script放在，会阻塞HTML代码的解析和渲染，而放在底部时，不会阻塞HTML代码的解析和渲染。（2）script放在，将无法操作HTML元素，而放在底部时，可以操作HTML元素。（3）script放在，无法通过脚本改变内联的CSS样式，而放在底部时，可以通过脚本改变内联的CSS样式script标签内设置async时：当script脚本加载完毕后，script脚本会立即执行，此时会阻塞HTML代码的解析和渲染；script标签设置d

2022-01-25 00:29:55 3993 2

原创【前端工程化】四：打包工具Rollup快速上手和Parcel的使用

Rollup相比于webpack，rollup要小巧的多，它仅仅是一款ES Module打包器，并不支持例如HMR等特性，它的初衷是提供一个充分利用ESM各项特性的高效打包器；Rollup快速上手yarn add roullup --dev下载之后rollup会提供一个cli程序，可以通过yarn或者npx来执行，避免我们通过路径去查找cl（这里和前面我们手动写的xp-web工作流类似）Usage: rollup [options] 必须指定 --format，即打包后的格式（amd, cj

2022-01-14 13:27:35 944

原创【数据结构与算法】JavaScript数据结构与算法读书笔记

javaScript数据结构与算法读书笔记

2022-01-13 23:02:46 438

原创【前端工程化】三：模块化开发之webpack4快速入门

模块化开发ESModules存在环境兼容问题模块文件过多，网络请求频繁所有的前端资源都需要模块化需求，将所有ES6的代码编译成ES5或兼容性更好的代码，并且将转换后的代码打包成一个文件，并且支持不同类型的资源模块；前面两个需求可以使用前面学习的构建系统glup等，但是最后一个需求需要我们学习新的模块化打包工具；Webpack4yarn add webpack webpack-cli --devwebpack支持0配置打包，默认会将src/index.js ->dist/m

2022-01-13 22:56:24 656 2

原创【前端工程化】二：自动化构建工具Grunt和Gulp的使用及封装工作流与发布

自动化构建在开发网页应用的时候，经常会有一些需要在开发阶段去重复执行的命令NPM Script是实现自动化构建工具流的最简单方式“build”: “sass scss/main.scss css/style.css --watch”,npm script的preserve钩子机制,在执行yarn serve之前执行yarn build；“preserve”: "yarn build,使用npm-run-all模块可以同时执行多个script任务；// npm install npm-ru

2022-01-09 21:51:22 704

原创【前端工程化】一：脚手架工具yeoman以及plop的使用

脚手架的作用是创建项目基础结构，提供项目规范和约定，我们常用的三大框架也是有各自的脚手架生态

2022-01-05 22:32:25 926

原创【JavaScript高级】一：函数式编程与JS异步编程，手写Promise实现

笔记来源---- 拉勾大前端高薪训练营首次编辑时间：2021年5月27日20:43:41从入行前端到现在一路都是自学过来的，不说经验多少，但多少多少还是经历了一些项目的；摆脱了入门的尴尬期，才发现接下来的面临的问题更是头疼；自学过来的小伙伴应该都很清楚的知道自己的弱点在哪里，知识未形成体系，经常是这里缺一块那里缺一块，这里补那里补导致知识点很散落；其实一直以来研究了很多培训机构和辅导班之类的，一直没有发现自己想要的；最早关注拉勾教育是在去年的十月份，因为关注了许多前端的公众号，时常有推送一些知识点.

2021-05-27 22:51:02 247

空空如也

空空如也