前端进阶之路
关注
分享
扫一扫
文章平均质量分 54
记录了从事前端开发多年遇到的问题及解决办法、新知识的学习经验以及经典前端面试题
前端卡卡西呀
前端程序员。面向搜索引擎开发，熟练掌握CV大法的拷贝程序员---前端卡卡西
展开
-
git push报错【remote: You are not allowed to push code to this project.】解决办法
解决git push报错【remote: You are not allowed to push code to this project.】原创 2025-03-07 10:01:29 · 557 阅读 · 0 评论 -
MacOS使用FileZilla通过ssh密钥文件连接远程服务器（已解决）
macOS使用 filezilla通过ssh密钥连接远程服务器原创 2024-08-29 13:51:11 · 1267 阅读 · 0 评论 -
React：状态管理Mobx
MobX 是一个身经百战的库，它通过运用透明的函数式响应编程（Transparent Functional Reactive Programming，TFRP）使状态管理变得简单和可扩展。简单直接编写无模板的极简代码来精准描述出你的意图。要更新一个记录字段？使用熟悉的 JavaScript 赋值就行。要在异步进程中更新数据？不需要特殊的工具，响应性系统会侦测到你所有的变更并把它们传送到其用武之地。轻松实现最优渲染所有对数据的变更和使用都会在运行时被追踪到，并构成一个截取所有状态和输出之间关原创 2024-05-24 09:10:16 · 835 阅读 · 0 评论 -
React：Mobx的autorun 和 runInAction（异步）
React：Mobx的autorun 和 runInAction（异步）原创 2024-05-22 16:55:56 · 671 阅读 · 0 评论 -
React：状态管理zustand
React：状态管理 zustand原创 2024-05-22 16:53:08 · 1372 阅读 · 0 评论 -
React：状态管理Redux
React：状态管理Redux原创 2024-05-21 17:21:49 · 405 阅读 · 0 评论 -
服务器中使用Docker安装并注册GitLab Runner
centOs 使用Docker 安装并注册Gitlab Runner原创 2024-05-20 09:49:22 · 677 阅读 · 0 评论 -
React: memo
React.memo 允许组件在 props 没有改变的情况下跳过重新渲染。原创 2024-05-14 16:27:22 · 1023 阅读 · 1 评论 -
React-hooks：useMemo
React-hooks: useMemo: 它在每次重新渲染的时候能够缓存计算的结果。原创 2024-05-13 10:10:21 · 839 阅读 · 0 评论 -
React：Router-3.路由懒加载
react router路由懒加载原创 2024-05-11 09:39:03 · 695 阅读 · 0 评论 -
React：Router-2. createBrowserRouter函数式
前边的文章提供了组件式路由的方式，在及以上版本，提供了函数式路由创建方式。原创 2024-05-09 10:31:21 · 925 阅读 · 0 评论 -
React：Router-1.BrowserRouter组件式
React router： 1.BrowseRouter组件式原创 2024-05-08 17:41:47 · 586 阅读 · 0 评论 -
CentOS 自建gitlab仓库：安装相关工具
腾讯轻量级服务器 自建gitlab仓库原创 2024-05-07 09:29:27 · 411 阅读 · 0 评论 -
微前端micro-app 子应用 调用父应用方法
微前端micro-app 子应用调用父应用方法原创 2024-04-26 17:58:11 · 1348 阅读 · 1 评论 -
React-hooks: useCallback
useCallback：是一个允许你在多次渲染中缓存函数的 React Hook。原创 2024-04-23 15:25:26 · 540 阅读 · 0 评论 -
React：Router
路由基本使用1、明确好界面中的导航区、展示区2、导航区的a标签改为Link标签 import {Link} from 'react-router-dom'; <Link to="/xxx"></Link>3、展示区写Route标签进行路径的匹配 <Route path="/xxx" component={Demo}/>4、<App> 的最外侧包裹一个 <BrowserRouter> 或 <HashRouter>路由组件原创 2022-08-05 16:18:23 · 623 阅读 · 0 评论 -
从零开发 stylelint规则(插件)
从零开发一个自定义的 Stylelint插件工程。原创 2022-06-27 16:31:03 · 1244 阅读 · 1 评论 -
纯html项目配置babel，报错Uncaught ReferenceError: require is not defined
需求描述有时候想要写一个简单的测试 demo，只需要一个 html文件 + 一个js文件，但是需要 import 一些npm包，如何做简单的 babel 配置呢？操作步骤创建项目mkdir democd demo此时 demo 目录下空空如也，什么也没有。npm初始化npm init一路回车，此时 demo 下新增了一个 package.json 文件新增 src/index.js 和 index.html 文件，目录结构如下：| - src| |- index.j原创 2022-05-26 23:43:52 · 5862 阅读 · 2 评论 -
React-hooks：useEffect
1.理解函数副作用什么是副作用对于React组件来说，主作用是根据数据(state/props)渲染UI，除此之外都是副作用（比如手动修改DOM）。常见的副作用数据请求（发送ajax）手动修改 DOMlocalstorage操作useEffect 函数的作用就是为react函数组件提供副作用2.基础使用使用步骤导入 useEffect 函数调用 useEffect 函数，并传入回调函数在回调函数中编写副作用处理修改数据状态检测副作用是否生效示例代码import {us原创 2022-05-06 07:19:28 · 3939 阅读 · 2 评论 -
React：组件传参
react：组件传参数原创 2022-04-24 22:39:09 · 4475 阅读 · 0 评论 -
Jest：JS测试框架学习
基本使用安装 yarn add --dev jest新建功能文件 Sum,jsfunction Sum(a,b) { return a + b;}module.exports = {Sum}新建测试文件 Sum.test.js (跟2中功能文件对应，jest会自动匹配)const {Sum} = require("./Sum.js");test("测试求和方法: a+b", () => { expect(Sum(1,2)).toBe(3);})修改 packa原创 2022-04-12 16:14:17 · 1390 阅读 · 3 评论 -
React：Props类型校验&默认值
props 类型校验规则设置 以及 默认值设置原创 2022-03-30 10:43:01 · 1533 阅读 · 1 评论 -
JSONP请求报错block:mixed-content（已解决）
Mixed Content: The page was loaded over HTTPS，blocked the content must be served over HTTPS问题描述开发环境 调用接口 正常，发布到测试环境时，调用接口提示 “block:mixed-content”问题原因浏览器不允许在https页面里嵌入http的请求开发环境是本地起的http服务，发到测试环境时是 https，而调用的接口地址是固定的 http接口，导致测试环境报错。解决问题方法1.如果该接口支持原创 2022-03-11 15:29:27 · 1679 阅读 · 0 评论 -
React：生命周期
React 新旧版本 生命周期对比学习原创 2022-02-25 17:39:03 · 641 阅读 · 3 评论 -
巧用Es6解构赋值
1、常用解构赋值## 数组解构let [foo, [[bar], baz]] = [1, [[2], 3]];foo // 1bar // 2baz // 3// 忽略部分值let [ , , third] = ["foo", "bar", "baz"];third // "baz"let [x, , y] = [1, 2, 3];x // 1y // 3// 结合 rset 扩展运算符，分配其余值let [head, ...tail] = [1, 2, 3, 4];hea原创 2022-02-18 17:28:58 · 433 阅读 · 2 评论 -
特殊函数：纯函数
纯函数特征只要是同样的输入（实参），必定得到同样的输出（返回）约束条件不得改写参数数据；不会产生任何副作用，例如网络请求、输入和输出设备等；不能调用Date.now() 或者 Math.random()等不纯的方法；举例redux 的 reducer 函数必须是一个纯函数。纯函数：function test(x) { return 1;}非纯函数：function test1() { return new Date();}function test2(x) { re原创 2022-02-16 23:22:37 · 220 阅读 · 0 评论 -
React：从头学state
初始版本：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div原创 2022-01-28 16:47:39 · 541 阅读 · 0 评论 -
前端超实用编码技巧
获取时间戳的 时:分:秒let timeStamp = new Date().getTime(); // 获得时间戳new Date(timeStamp).toTimeString().slice(0,8); // '13:44:41'时分秒 前补0 （倒计时）let hour = 9;// badhour = String(hour).length > 1 ? hour : '0'+hour;// goodhour = String(hour).padStart(2,.原创 2021-12-31 18:06:33 · 779 阅读 · 16 评论 -
NodeJs 常用模块
1.http模块// 引入模块const http = require('http');// 创建服务，// req：获取浏览器信息// res：给浏览器响应信息const proxy = http.createServer((req, res) => { // 设置响应头 res.writeHead(200, { 'Content-Type': 'text/plain' }); // 设置编码格式 res.writ('<head><meta ch原创 2021-12-10 15:25:41 · 1313 阅读 · 3 评论 -
算法系列：4. 快速排序
/** * @Desc 快速排序 * 分区：在数组中任意选择一个 ‘基准’，所有比基准值小的放到基准值前边，比基准值大的放在基准值后边 * 递归的对基准前后的数组 进行 “分区” */Array.prototype.quickSort = function() { const rec = function(arr) { if (arr.length <= 1) { return arr; } const原创 2021-11-04 13:42:29 · 238 阅读 · 1 评论 -
撤销git commit / git add 操作
Git仓库有四个部分：工作区、暂存区、本地仓库(commit历史)、远程仓库工作区： 用户当前编辑的内容 是在工作区，通过 git add 将工作区内容提交到 暂存区；暂存区： git add 之后的修改保存在 暂存区，暂存区内容 通过 git commit 提交到 本地仓库；本地仓库： git commit 后的内容存储在本地仓库，在这里可以通过 git log 查看 commit 历史记录，本地仓库内容 通过 git push 提交到远程仓库远程仓库： git push将本地仓库的修改，推送到原创 2021-10-09 11:29:48 · 2352 阅读 · 0 评论 -
vuex使用详解-Module模块
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：const moduleA = { state: () => ({ ... }), mutations: { ... }, actions: { ... },原创 2021-09-17 09:43:34 · 1588 阅读 · 1 评论 -
创建自定义名称ssh密钥，并使用不同密钥登录不同服务器
今天整理自己的托管平台时，发现很多个平台共用同一个密钥，即默认的 id_rsa，考虑到风险性，想到使用不同密钥，登录不同平台/服务器，做好隔离。什么是公钥什么是私钥？公钥就好比一把锁，你在一个平台放上你的公钥，就相当于你自己买了把锁在该平台把你的东西锁起来了。私钥好比开锁的钥匙 你在平台上的锁，只有你的私钥这把钥匙才能打开，平台其他人都打不开。公钥可以给任何人，但是私钥只能自己拿着！！一、创建默认ssh密钥一般，我们的密钥存放在 ～/.ssh 目录下，以下以 MacOs示例1.进入.ssh文件原创 2021-09-14 15:26:00 · 7745 阅读 · 2 评论 -
Swiper4.3.3 制作轮播图
想要的轮播图效果如下：(gif制作可参考 这篇文章)代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图</title> <l原创 2021-08-27 15:38:10 · 528 阅读 · 4 评论 -
前端小白从入门到进阶必备的N个网站（建议收藏）
文档学习类1.MDNMDN是一个完整的学习平台，你可以在这里深入学习Web技术以及能够驱动Web的软件，包括：网络标准（例如：CSS、HTML 和 JavaScript）、开发开放网络应用、开发 Firefox 附加组件。2.菜鸟教程菜鸟教程提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识，可以看做是前端开发字典，可在上边查漏补缺。3.W3CSchoolw3cschool是一个专业的W3原创 2021-08-05 13:45:05 · 4566 阅读 · 2 评论 -
VsCode超实用插件推荐，让你的开发效率火力全开
辅助开发类：1.VeturVUE开发必备插件1.语法高亮，包括 vue/html css/sass/scss/less/stylus js/ts2.语义高亮，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件3.语法错误检查，包括 CSS/SCSS/LESS/Javascript/TypeScript4.emmet 支持5.支持调试6.代码片段自动补全 包括 HTML/CSS/SCSS/LESS/JavaScript/TypeScript2.Vue...原创 2021-07-30 15:20:54 · 7239 阅读 · 55 评论 -
Vue3.0系列(二)： VUE3.0组合API
一、Vue2.0 存在的问题：“使用data、computed、methods、watch 组件选项来组织逻辑通常都很有效。然而，当我们的组件开始变得更大时，逻辑关注点的列表也会增长。尤其对于那些一开始没有编写这些组件的人来说，这会导致组件难以阅读和理解。”。“这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块。” – vue官网为了 将业务的 数据 和逻辑 结合在一起，Vue 3.0 提供了 组合式原创 2021-07-23 16:45:57 · 1022 阅读 · 3 评论 -
2021 百度网盘网页版 倍速播放技巧(亲测有效)
2021 百度网盘网页版 倍速播放技巧(亲测有效)安装谷歌浏览器(chrome浏览器)打开谷歌浏览器，地址栏输入：chrome://extensions/ 或者 直接点这里在打开的扩展程序 页面，开启右上角 的 “开发者模式”下载 Global-Speed 扩展 点击这里获取 ，或者评论 or 私聊我将 步骤4 中下载的 .crx 文件 拖入 步骤3 打开的页面(chrome://extensions/ )安装成功后，可以看到 Global-speed扩展, 开启该扩展打开百度网盘视原创 2021-07-05 10:17:39 · 19485 阅读 · 130 评论 -
Vue3.0系列(一): VUE3.0的新特性
和Vue2.0 相比，Vue3.0有哪些亮点：序号特性解析1Performance性能上比Vue2.0快1.3-2倍2Tree shaking support按需编译，体积更加轻量化3Composition API组合API，类似 ReactHooks4Better TypeScript support对 Ts 提供了更好的支持5Custom Renderer API暴露了自定义渲染API6Fragment,Teleport(Pro原创 2021-06-29 13:55:07 · 1070 阅读 · 4 评论 -
.git/hooks/pre-commit: line 2: ./node_modules/pre-commit/hook: No such file or directory
解决办法：找到当前项目中.git/hooks 目录将该目录下的原创 2021-07-27 09:45:00 · 3005 阅读 · 0 评论