- 博客(4492)
- 收藏
- 关注
RSS订阅原创 化前端代码规范Eslint + Prettier+ Lint-staged + Husky + Commitlint
在实际开发中常常会遇到同事之间协作开发，由于编辑器代码格式化的不同以及其他代码规范问题，导致代码之间格式不统一，合并代码时常常非常痛苦，因此急需在项目中配置一套可靠的代码规范工具，但是网上的文章很多配置非常复杂，因此总结了一套非常简单的配置方式，能够快速搭建一套可用模板。本文主要有两大工具Prettier+Commitlint，配置中穿插Lint-staged 、Husky 、Eslint 等工具的配置。...
2022-08-13 09:10:04
759
原创 Vue之手写 Vuex
首先需要去官网熟悉一下基本概念。Vuex 是集中式状态管理工具。它和全局对象有两点区别，第一点是 Vuex 中的数据是响应式的，即数据变动视图也会跟着变动，第二点是 Vuex 中的数据必须显示提交才可以改变，也就是说修改数据的时候都需要显示调用提供的 commit 方法。它的核心概念有4个，其中 state 用来存放数据，getter 用来获取数据（类似于 Vue 的计算属性）...
2022-08-07 16:43:56
440
转载 关于常用构建工具的一些总结
谈到目前最🔥的构建工具，那无疑要属 vite 了。vite 以其独特的 nobundle 打包机制，再配合浏览器对 ESM 规范的支持，能给开发人员带来很好的开发体验，越来越受到大家的欢迎。看到 vite 这么优秀，小编也忍不住加入了学习的大军，近距离体验 vite 的魅力。在学习过程中，小编发现要想弄懂 vite 的核心原理，还需要去了解 esbuild 和 rollup，因此又花费了一些时间去了解这两个构建工具。通过对这三个构建工具的学习，再结合以前对 webpack 的使用，整个人对构建工具这一块.
2022-08-06 11:25:00
579
原创 如何删除.git目录
这篇文章主要介绍“如何删除.git目录”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“如何删除.git目录”文章能帮助大家解决问题。
2022-07-25 15:41:50
11734
转载 前端(React、Vue)多环境配置
在一个正常的迭代周期内，一般会经历开发、测试、生产3个阶段，每个阶段都需要一个独立的环境，再加上某些特殊需求需要增多几个环境(如嵌入到其他应用下、迭代有新的阶段)，如果没有一个好的多环境管理方案，那么就会出现代码强耦合、切环境操作复杂等问题...
2022-07-23 14:05:19
1920
转载 前端代码规范和编码风格实践详解
文章开始之前首先思考一个问题：缩进的代码风格到底是 2 个空格还是 4 个空格是受谁控制的？VS Code 默认设置？还是 Prettier? 或者其他什么？
2022-07-23 09:34:41
1462
转载 Vue和React对比学习之组件传值(Vue2 12种、Vue3 9种、React 7种)
简介Vue和React是目前前端最火的两个框架。不管是面试还是工作可以说是前端开发者们都必须掌握的。今天我们通过对比的方式来学习Vue和React的组件传值这一部分。本文首先讲述Vue2、Vue3、React的组件传值方式，然后具体介绍了每种传值的应用场景以及具体的使用。最后对比总结了Vue和React在组件传值这部分的相同点和不同点。希望通过这种对比方式的学习能让我们学习的时候印象更深刻，希望能够帮助到大家。Vue2Vue2 组件通信共有12种props $emit /
2022-05-30 08:57:48
659
原创 Vue和React对比学习之Ref和Slot
简介Vue和React是目前前端最火的两个框架。不管是面试还是工作可以说是前端开发者们都必须掌握的。今天我们通过对比的方式来学习Vue和React的Ref和Slot。本文首先讲述了Vue和React各自支持的Ref和Slot以及具体的使用，然后通过对比总结了它们之间的相同点和不同点。希望通过这种对比方式的学习能让我们学习的时候印象更深刻，希望能够帮助到大家。RefRef可以帮助我们更方便的获取子组件或DOM元素。当我们使用ref拿到子组件的时候，就可以使用子组件里面的属性和方法了
2022-05-30 08:52:20
484
转载 vue3最全资源库来袭，包含（web、移动、小程序、Electron、常用库、面试、文档工具）等资源
一.介绍vue3-resource专注于收集vue3相关资源，包含（web/移动/小程序/桌面/常用库/面试/文档&工具）等资源.持续更新中！！！ 如果这些资源对你有帮助，👏 欢迎star 支持下【vue3-resource】二.特别说明🌟 推荐的资源全部支持vue3，由于个人精力有限，可能会遗漏很多优秀的vue3开源资源或资源错误！还请您点此主动推荐或修改建议！！！十分感谢🙏。 可点击在线预览查看详细资源， 站点部署在github，可能访问过慢，请耐心等待。三.资源推荐资源共分
2022-05-26 13:17:24
1173
原创 HTTP请求头referer图片防盗链
referer的作用包含当前请求页面的来源页面的地址，即当前页面是通过此来源页面的链接进入的。举个例子：页面https://wangxiaokai.vip/posts/rel-canonical/中有一张图片juejin-seo-demo.png图片的请求头如下：服务器在接收到请求后，可以获知图片资源的请求的来源页面是https://wangxiaokai.vip/posts/rel-canonical/什么情况下，referer不会被发送来源页面采用的协议为表示本地文件的
2022-05-25 09:09:28
406
转载 GitHub Actions自动化部署前端项目指南
前言在项目开发过程中，随着需求的不断变化以及后期不断修复bug，伴随着的便是我们不停的打包部署。打包部署这期间的操作虽然不复杂，但是非常繁琐。目前市面上可以使用jenkens等工具实现持续集成（CI/CD），但是如果我们服务器资源少，且只需要简单的自动化部署，那么有更优雅的方式实现自动化部署：GitHub Actions。本篇文章以前端项目为例，下文所有操作基于前端项目。1.什么是GitHub Actions？GitHub Actions是GitHub推出的一款持续集成（CI/CD）服务，它
2022-05-20 16:34:02
2250
原创 前端图片canvas，file，blob，DataURL等格式转换
最近用到一些图片相关的操作，记录一下笔记。将file转化成base64场景： 获取到一个file类型的图片，如果直接在html中预览？这里就是利用html5的新特性，将图片转换为Base64的形式显示出来。有两种方法：方法一：利用URL.createObjectURL()<!DOCTYPE html><html><head> <title>base</title></head><body>&l.
2022-05-09 20:50:12
1321
转载 微前端qiankun从搭建到部署的实践
最近负责的新项目用到了qiankun，写篇文章分享下实战中遇到的一些问题和思考。示例代码： github.com/fengxianqi/…。在线demo：qiankun.fengxianqi.com/单独访问在线子应用：subapp/sub-vue subapp/sub-react为什么要用qiankun项目有个功能需求是需要内嵌公司内部的一个现有工具，该工具是独立部署的且是用React写的，而我们的项目主要技术选型是vue，因此需要考虑嵌入页面的方案。主要有两条路：iframe
2022-05-09 20:47:46
1986
原创 前端常见问题以及解决方案
一、跨域1、同源策略浏览器同源策略限制请求同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。限制以下行为Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 Js对象无法获得 AJAX 请求不能发送有三个标签是允许跨域加载资源：<img src=XXX> <link href=XXX> <script src=XXX>2、解决方案1）通过jsonp跨域script标
2022-05-08 14:33:21
4723
原创 React通过redux-persist持久化数据存储
在React项目中，我们经常会通过redux以及react-redux来存储和管理全局数据。但是通过redux存储全局数据时，会有这么一个问题，如果用户刷新了网页，那么我们通过redux存储的全局数据就会被全部清空，比如登录信息等。这个时候，我们就会有全局数据持久化存储的需求。首先我们想到的就是localStorage，localStorage是没有时间限制的数据存储，我们可以通过它来实现数据的持久化存储。但是在我们已经使用redux来管理和存储全局数据的基础上，再去使用localStorage来读
2022-05-04 09:10:11
1362
原创 http缓存总结
HTTP的缓存机制 缓存机制无处不在，有客户端缓存（cookie、localstorage等），服务端缓存（session），代理服务器缓存等。在HTTP中具有缓存功能的是浏览器缓存。 HTTP缓存作为web性能优化的重要手段，对于从事web开发的朋友有重要的意义。思维导图如下：1、缓存的分类 缓存分为强制缓存和协商缓存。1、 强制缓存 当本地缓存中含有请求的数据且（及缓存时间还未过期）时，客户端直接从本地缓存中获取数据。当本地缓存没有所请求的数据时，客户端的才会从服务端获取数
2022-05-02 10:34:12
496
原创 react-redux 中使用useSelector、useDispatch
1. react-redux 之 Hooks apiHooks 提供了很多好用的api，甚至很多人认为Hooks的useReducer等Api已经可以取代Redux了。其实Hooks和Redux的使用场景并不冲突，而且可以互相借鉴，react-redux(7.1)也引入了Hooks风格的Api。1.1 useState 的缺点useState和useReducer是Hooks中最常用的Api，适合用来进行简单的状态管理，但也都有一些无法满足的需求useState可以用最简单的方式更新
2022-05-01 22:50:02
7629
原创 react hooks 和 react-redux hooks 应用场景
目前 ，Hooks 应该是 React 中最火的概念了，在阅读这篇文章之前，希望你已经了解了基本的 Hooks 是什么？下面就介绍一下简单的使用场景react hooksuseStateuseState是react自带的一个hook函数，它的作用就是用来声明状态变量。 useState这个函数接收的参数是我们的状态初始值（initial state）， 它返回了一个数组，这个数组的第[0]项是当前当前的状态值， 第[1]项是可以改变状态值的方法函数。import React, { u
2022-05-01 22:44:26
1114
原创 axios 超时重试，异常重试
安装 axios-retry网络异常请求重试处理 断网 弱网 validateStatus 与 retryCondition 包含关系安装 axios-retrynpm install axios-retry复制代码const whiteRetry = new Set(['ECONNABORTED', undefined]);axiosRetry(instance, { retries: 2, // 重复请求次数 shouldResetTimeout: true
2022-05-01 16:43:53
1276
原创 如何编写一个 Webpack Loader
前言在平时自己由零搭建项目时，虽然基础配置都比较熟悉，比如配置 file-loader, url-loader, css-loader 等，配置不难，但究竟是怎么起作用的呢，今天就来说说如何编写一个 Webpack Loader。Loader 作用按我自己的简单理解，loader 通常指打包的方案，即按什么方式来处理打包，打包的时候它可以拿到模块源代码，经过特定 loader 的转换后返回新的结果。比如 sass-loader 可以把 SCSS 代码转换成 CSS 代码编写 Loader
2022-04-30 16:23:34
596
原创 如何编写一个 Webpack Plugin
webpack 内部执行流程一次完整的 webpack 打包大致是这样的过程：将命令行参数与 webpack 配置文件 合并、解析得到参数对象。 参数对象传给 webpack 执行得到 Compiler 对象。 执行 Compiler 的 run 方法开始编译。每次执行 run 编译都会生成一个 Compilation 对象。 触发 Compiler 的 make 方法分析入口文件，调用 compilation 的 buildModule 方法创建主模块对象。 生成入口文件 AST(抽象语法
2022-04-30 16:22:26
440
转载 2022，前端应该阅读这些文章
同学们都知道，前端圈变得越来越卷了，各种技术层出不穷，简直让人应接不暇。可能很多跟我一样，一时间，看到这个也想学，看到那个也想学，最终的结果是什么？那就是：啥都没学！所以笔者花费了几天时间，整理了一下前端必读文章，同时也可以当作是一份知识图谱，用来查漏补缺。本资料适宜人群：希望按部就班的、系统的学习前端知识的（初级->中级->高级）； 希望对自己的知识图谱进行查漏补缺的； 希望当作面试手册进行知识复盘的；本文主要是笔者查阅了很多资料并结合自己的理解，整理而成的，请大家积极..
2022-04-29 21:56:33
539
1
原创 Git Commit格式校验
Git 规范Git 作为现在最流行的分布式管理工具，基本上是每个团队的必备。Git Commit格式校验准备commitlint/cli用于格式校验 准备husky用于git提交代码时触发校验huskyhusky 是创建 git 客户端 hooks 的神器。目前最新版本是 7.*，文档在这里(opens new window)初始化 husky 只需要三步。首先要安装：$ npm i husky --save-dev复制代码执行下面的脚本，会初始化一个 .husky
2022-04-27 19:00:32
3255
1
原创 React前端周刊0423
2022 年值得推荐的 React 库— React 的生态体系已经变得如此庞大，以至于我们日常就要跟踪超过 1500 个 React 库的动态。我们常常遇到的问题不是没有可用的库，而是选择太多了导致不知道作何选择。本文作者罗列出了开发项目所需的各种类型的库以及推荐他们的原因。Robin WieruchReact Native v0.68 正式发布— 这是 React Native 第一个可选择使用新架构的版本，该架构支持了Fabric渲染器和TurboModule系统。就像 Pau...
2022-04-23 16:23:34
1312
原创 实现浏览器多标签页通信
前言我们都知道浏览器是可以打开很多标签页的，如果每个标签页代表的是单独的一个网站，那么这些标签页之间肯定是不能通信的，如果能通信那估计我们都得凉凉。但是在很多情况下，浏览器中的很多标签页都属于某一个网站，而且这些标签页之间会使用一些相同的数据，这个时候我们就需要让这些标签页的数据都保持同步。比如很多博客网站，点击文章列表通常是打开一个新的标签页进入文章详情页，那么如果我们在文章详情页点赞、评论等操作，而文章列表页也使用了这些数据，这个时候我们需要保持两边的数据一致，衍生出来就是详情页改了数据，需要让
2022-04-21 08:45:56
5277
1
原创 前端跨页面通信
背景用户在实际的操作场景中会打开多个 Tab 页面A、B、C、D、E...。当用户在 E Tab 页退出登录，并且登录到新的账号，然后用户切换到非 E 的 Tab 时，发现登录信息没有刷新， 并且由于登录信息没有刷新，会出现操作异常。这个问题简单来说就是多个 Tab 信息没有同步。问题的关键在于一个 Tab 退出重新登录，需要通知到其他的 Tab 刷新到最新的信息。本质问题就是解决前端跨页面通信。本篇文章就是对前端跨页面通信的解决方案做了一个了解。onstorageWindowEventHa
2022-04-15 14:52:16
1678
原创 reset.css 重置样式表
css重置样式表个人整理工作中常用的css重置样式，和一些样式解决方法，并写上了注释, 大家还有什么好的重置样式，或者一些样式解决方案，欢迎留言讨论。html, body { height: 100%; /* 文字风格 Sans-serif 各笔画粗细相同，Serif 笔画粗细不同，monospace 等宽体，cursive草书，fantasy梦幻 */ font-family: "Microsoft YaHei", sans-serif, "Helvetica Neue", Helveti
2022-04-10 11:33:54
1247
原创 React useImperativeHandle
使用函数时组件的时候，ref转发是必须要了解的概念// 实现 ref 的转发const FancyInput = React.forwardRef((props, ref) => ( <div> <input ref={ref} type="text" /> <div>我是自定义的函数式组件</div> </div>));const App = () => { const ref =
2022-04-04 08:39:40
4196
1
转载 useRef 简单易懂解析
翻译自：beta.reactjs.org/learn/refer…当你希望组件“记住”一些信息，但是你不希望这些信息触发重新 render 的时候，你可以使用 ref，它像一个秘密的“口袋”，用于在组件中存储信息。系列文章useRef 简单易懂解析（一）useRef 的使用 useRef 简单易懂解析（二）useRef 的例子 useRef 简单易懂解析（三）ref 和 state 的对比 useRef 简单易懂解析（四）useRef 的原理 useRef 简单易懂解析（五）ref 的最
2022-04-03 11:01:09
1459
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人