- 博客(147)
- 收藏
- 关注
RSS订阅
原创 思考-个人成长(面向前端,也不只是前端)
背景个人成长一直是很多同学最为关注的话题，大家也都可以到处看到相关的一些想法：有迷茫的、有焦虑的、有吐槽的、有建议的等等。在最近的一次团队沟通中，也基本上和大部分的同学深入聊到了这个话题，这里也做一个总结和思考。正文成长的话题，个人理解，可以分为三个部分：What、Why、How 来依次解析。What首先要搞明白的就是，大家所说的成长到底是个什么东西，而不是泛泛而谈，我要成长，要弄清楚、弄明白到底要啥。那成长这个词的含义，来自百度百科的解释：成长，一般指长大、长成成人，也泛指事
2021-10-03 13:30:54
1496
原创 在 Vite 中配置所有静态资源文件和按需加载文件使用自己的 CDN 域名
这样，根据不同的环境变量值，Vite 将根据 `VITE_CDN_DOMAIN` 设置 `base` 和插件的配置，确保所有静态资源文件和按需加载文件都使用正确的 CDN 域名。在上面的示例中，我们通过 `process.env.VITE_CDN_DOMAIN` 获取环境变量的值，并根据当前的构建模式（开发环境或生产环境）来确定是否使用 CDN 域名。首先，创建不同环境的 `.env` 文件，例如 `.env.development` 和 `.env.production`。希望这个解答对你有所帮助！
2023-09-05 12:48:35
1622
1
转载 面试官：说说 React 和 Vue 框架的区别？？？
虚拟 DOM（Virtual DOM）本质上是JS 和 DOM 之间的一个映射缓存，它在形态上表现为一个能够描述 DOM 结构及其属性信息的 JS 对象。它主要存储在内存中。主要来说：虚拟dom是一个js对象，存储在内存之中。虚拟dom能够描述真实dom（存在一个对应关系）当数据变化的时候，生成新的DOM，对比新旧虚拟DOM的差异，将差异更新到真实DOM上。
2022-12-26 15:33:45
432
1
转载 Github上高质量开源项目推荐
本教程从 IntelliJ IDEA 的安装、卸载、软件设置、项目配置等各个方面进行讲解。– 各个学校近几年考研初试真题（包括 408）。– 408 统考资料和信息汇总。– 408 统考资料和信息汇总。华中科技大学考研资料及信息汇总。电子科技大学考研资料及信息汇总。南京大学考研资料及信息汇总。北京大学考研资料及信息汇总。清华大学考研资料及信息汇总。湖南大学考研资料及信息汇总。上海交大考研资料及信息汇总。哈工大考研资料及信息汇总。西工大考研资料及信息汇总。北邮考研资料及信息汇总。杭电考研资料及信息汇总。
2022-11-03 17:40:44
3838
转载 封装axios，一次封装终身受益
过去的一段时间，我都认为接口请求封装是前端的必修课。只要是写过生产环境前端代码的人，应该都脱离不了异步接口请求，那么 接口请求 的封装是必经之路。直到前些天，我们屋某个美团写后台的小姑娘问我前端问题时。我才发现她们代码中的接口请求....} else {....}})....})这样写也不是说不好，在某种程度上，这增加了代码的可读性。但是我们大多数页面需要的接口都不止一个，那么我们的组件中极有可能出现数十上百行重复代码。那么随着请求的体量越来越大，我们的项目便越来越难以维护。
2022-10-24 10:28:31
257
原创 JavaScript 的这 4 个运算符
这样，我们避免了不必要的更新和任何副作用，例如解析，重新渲染，失去焦点等。” 要检查空值的属性之后的运算符。新版本的 ECMAScript 引入了三个新的逻辑赋值运算符：空运算符，AND 和 OR 运算符，这些运算符的出现，也是希望让我们的代码更干净简洁，下面分享几个优雅的 JavaScript 运算符使用技巧。CMAScript 发展进程中，会有很多功能的更新，比如销毁，箭头功能，模块，它们极大的改变 JavaScript 编写方式，可能有些人喜欢，有些人不喜欢，但像每个新功能一样，我们最终会习惯它们。
2022-10-12 10:15:46
128
转载 10 张脑图，帮你彻底打牢 javaScript 基础
万丈高楼平地起，而对于前端人而言，道理亦是如此，想要走的更远，必须彻底打牢javaScript基础今天就来给大家分享10张思维导图，让你彻底打牢javaScript基础。
2022-08-24 16:10:12
314
原创 身为程序员如何在项目开发中逐步成长
作为一个前端开发工程师，我们总是希望自己能够快速地成长。从需要有人带，到成长为能够独立去进行项目开发，然后到带着其他人去进行项目开发，再然后走得更远...
2022-08-24 14:43:46
364
转载 学会这10+个JavaScript 单行代码，让你的代码更优雅
JavaScript 非常大的特点容易上手且非常灵活，代码实现方式五花八门；有时候能一行代码解决，就尽量不用两行。本文整理了非常有用的单行代码，这些需求都是在开发中非常常见的，用单行代码可以帮助你提高工作效率。
2022-08-24 14:29:28
272
转载 v-model与.sync修饰符的区别
在日常开发的过程中,v-model指令是经常用到的,一般来说 v-model 指令在表单及元素上创建双向数据绑定,但 v-model 本质是语法糖。但提到语法糖,这里就不得不提另一个与v-model有相似功能的双向绑定语法糖了,这就是 .sync修饰符。...
2022-07-11 13:44:16
183
原创 互联网中---外包的含义
外包，在我们这个行业是一个很常见的名词，对应着一个特殊的工种。但是我发现很多朋友好像妖魔化了外包，觉得这玩意就是一个“坑”。但是这个问题吧，得去辩证的看。很多人一提到“外包”就是非常的消极，觉得这个人大概是“没救”了。但是外包，真的不好吗？它并不是一味的坏，它坏坏的中还透着一些些的好。说实话，外包的存在还是圆了很多打工人的“大厂梦”，也帮助不少人成功“镀金”。但大家也知道，有很多关于大厂外包的不好评价，例如：没有上升通道、没有福利没有保障、脏活累活全干、干电池人等等。其...
2022-04-06 22:42:29
2902
1
转载 40＋ 大厂常考 JS 手写题系列【摸鱼必备】
🎄 前言本文主要总结了 2021 年前端提前批和秋招所考察的手写题，题目来源于牛客网前端面经区，统计时间自 3 月初至 10 月底，面经来源于阿里、腾讯、百度、字节、美团、京东、快手、拼多多等 15 家公司，并做了简单的频次划分。 ⭐⭐⭐⭐⭐: 在 15 家公司面试中出现 10+ ⭐⭐⭐⭐：在 15 家公式面试中出现 5-10 ⭐⭐⭐：在 15 家公司面试中出现 3-5 无星：出现 1-2 🌟 promise实现promise考察频率: (⭐⭐⭐⭐⭐)
2022-04-06 22:26:33
422
转载 最全的 Vue3 快速上手指南【值得收藏】
Vue3简介面临的问题：随着功能的增长，复杂组件的代码变得难以维护，Vue3就随之而来，TypeScript使用的越来越多，Vue3就是TS写的所以能够更好的支持TypeScript在这里介绍就这么简单vue2的绝大多数的特性 在Vue3都能使用，毕竟Vue是渐进式的响应式原理进行使用Proxy实现，v-model可以传参了等等新特性基础工作使用Vue3的话，那么必须通过使用构建工具创建一个Vue3项目安装 vue-cli#npmnpmi...
2022-03-20 21:21:40
3832
转载 总结了 42 种前端常用布局方案
对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。本篇文章总结了四十二种CSS的常见布局，这四十二种布局可以细分为如下几类： 水平居中 垂直居中 水平垂直居中 两列布局 三列布局 等分布局 Sticky Footer布局 全屏布局 这些内容也正是本篇文章的目录。水平居中实现水平布局比较简单，方法也比较多，这里总结了7种常用的布局方法，其公共的C
2022-03-17 09:48:28
1422
原创 Vue使用proxy提示 “Refused to set unsafe header “Referer“”
在调用另一个源节点接口的时候，报错提示“Refused to set unsafe header "Referer"报错信息经过查询发现是因为浏览器拒绝人为设置伪装的referer正巧不巧，在用vue的proxy来进行跨域处理，由此记录一下用法。这是在调用axios的方法method:'post', url:"/api/v1/home/page", headers:{ 'Content-Type':'application/x-www-form-ur
2022-03-05 21:51:58
13339
6
原创 常见移动端兼容性问题
1.IOS移动端click事件300ms的延迟相应移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。这是由于区分单机事件和双击屏幕缩放的历史原因造成的。解决方式：fastclick可以解决在手机上点击事件的300ms延迟zepto的touch模块，tap事件也是为了解决在click的延迟问题触摸屏的相应顺序为touchstart-->touchmove-->touchend-->click，也可以通过绑定ontouchstart事件，加快
2022-02-19 23:32:24
3028
转载 讲透 Vue3 响应式是如何实现的(转载)
前言本文使用 ref 对 vue 的响应性进行解读，仅仅是响应性原理解析，不涉及 vue 组件等概念。vue 的响应性的实现，在 @vue/reactivity 包下，对应的源码目录为 packages/reactivity。如何调试 vue 源码，可查看该文章[1]为什么使用 ref 进行讲解，而不是 reactive？ref 比 reactive 的实现简单，且不需要用到 es6 的 Proxy，仅仅需要使用到对象的 getter 和 setter 函数因此，讲述响应性原理，..
2022-02-19 23:30:29
841
转载 说一下从url输入到返回请求的过程
问题: 从浏览器地址栏输入url到请求返回发生了什么你一看这种烂掉牙的问题，小case，但996面试大佬由此延展的问题已经远远超越了这个问题本身了，不信你就接着看。我回答了首先会进行 url 解析，根据 dns 系统进行 ip 查找。话音刚落，此时一位喜欢修福报的公司的大佬打断了我，说url为啥要解析，dns查询规则是什么？我一听就心里想，不按套路出牌啊，网上一般都没问这两个问题，心里再一想，俗话说，万事开头难，扛过这一波，答出来，就是阳光明媚，万物骚动的春天！先说为什么url要解析（也就
2022-02-19 23:26:36
414
转载 async/await 你是会用，但是你知道怎么处理错误吗？
Promise封装请求大家平时如果使用Promise封装请求，那么当你使用这个请求函数的时候是这样的：//封装请求函数constrequest=(url,params)=>{returnnewPromise((resolve,reject)=>{//...dosomething})}//使用时consthandleLogin=()=>{request('/basic/login',{...
2022-02-19 23:24:15
548
原创 彻底删除vscode及安装的插件和个人配置信息
1、卸载vscode应用软件（在控制面板里面找不到改软件，所以只能进入应用所在文件夹进行卸载）## 此步骤虽然删掉了应用软件，但是此时重新安装会发现之前下载的插件和个人配置信息都还会重新加载出来，所以继续进行以下步骤：2、找到下图中文件夹的目录，然后将之删除，即可彻底清除已安装的插件个个人配置信息## 经过以上两步操作之后，再次重新安装软件，将是最原始的状态...
2022-02-19 22:11:39
3112
转载 首屏加载从11s到1s，详解前端性能优化
全文共6511字/词，阅读大概需要13分钟，太长不看党请直接移步????「开始优化」部分直接查看优化手段背景前段时间公司服务器网络波动，网站访问变慢，一些性能问题也随之暴露了出来。纷纷反馈在这样的弱网条件下，访问新项目时，加载了近1分钟都没加载出来，而访问其他页面顶多也就30-40s。在网络恢复后，尝试访问了下页面，无缓存首次打开需要等待近11s的时间，最大的资源达到了3.7M...在对项目做了一些优化处理后，再次无缓存打开可以发现网页几乎是秒开，平均耗时在1s以内在这里总结记录一下
2021-12-31 16:56:20
1595
原创 Git 各指令的本质，真是通俗易懂啊
0前言作为当前世界上最强大的代码管理工具Git相信大家都很熟悉，但据我所知有很大一批人停留在clone、commit、pull、push...的阶段，是不是对rebase心里没底只敢用merge？碰见版本回退就抓瞎？别问我怎么知道的，问就是：“我曾经就是这样啊～～”。针对这些问题，今天就将这几年对Git的认知和理解分享出来，尽可能的从本质去讲解Git，帮助你一步一步去了解Git的底层原理，相信读完本篇文章你便可以换种姿态，更加风骚得使用Git各种指令。1基本概
2021-12-31 16:53:51
176
原创 Vue组件通信方式居然有这么多？你了解几种
vue组件通信的方式，这是在面试中一个非常高频的问题，我刚开始找实习便经常遇到这个问题，当时只知道回到props和$emit，后来随着学习的深入，才发现vue组件的通信方式竟然有这么多！今天对vue组件通信方式进行一下总结，如写的有疏漏之处还请大家不吝赐教。1. props/$emit 简介props和$emit相信大家十分的熟悉了，这是我们最常用的vue通信方式。props：props可以是数组或对象，用于接收来自父组件通过v-bind传递的数据。当props为数组时，直接接收父组件.
2021-12-31 16:45:54
480
原创 CSS 垂直居中的正确打开方式
前言之爆锤面试官神器 - CSS无论是实际开发中，亦或者是求职面试中，css 垂直居中往往都是一个绕不开的话题，其中不乏有许多面试者在多次双重尝受打击之后，而没有一个很好的反击点，刚好结合自己以前受的委屈和痛苦，来给大家一个锤爆面试官大佬们的机会。其实垂直居中主要分为了两种类型：居中元素宽高已知和居中元素宽高未知，那么我们就结合这两种类型来一一做举例。css 垂直居中.png居中元素宽高已知1. absolute + margin auto顾名思义，就是利用当前元素的pos...
2021-12-31 16:42:54
285
转载 做好这 16 个方向，逐步搭建出团队的 vue3 前端架构
前言由于vue3.2版本的发布，<script setup>的实验性标志已经去掉，这说明这个语法提案已经正式开始使用，并且我个人对这个方案表示非常喜欢，其他的更新[1]请自行了解。到目前为止，我认为 vue3 已经完全可以用于生产环境。在此将我的开发体验，总结至此，分享给大家。我认为前端架构核心工作是定制一套适合当前业务需求的解决方案，从而降低需求的增加而带来的技术实现的复杂度。下面我将从 16 个方向，逐渐带领大家搭建一套属于你自己的脚手架，制定一套合理的解决方案，为项目打下良好...
2021-12-31 12:55:36
545
转载 在BOSS直聘发现了一个前端小秘密
故事的由来开头：小姐姐HR小姐姐看简历比较累，需要一直手动点击下一个按钮，才能前往下一个简历一位同事 - 后端架构师小哥哥想给HR做一个自动查看下一个简历的工具，又不想做得复杂，不想做成浏览器插件这种，于是手写JS代码，想在浏览器中的console控制台写代码就自动执行，实现打开简历后若干秒自动查看下一个简历的功能问题来了当同事小哥哥在控制台写在JS代码时候，用document.querySelector这个API一直获取不到DOM节点，我当时觉得他写的选择器不对劲，于是要他简化了下选择
2021-12-27 21:59:59
636
原创 一文搞懂前端组件发布 npm 库
前端的组件都是基于 javascript 开发，然后用 node.js 打包，发布到 npm 的。所以我们要做组件发布，首先要了解 npm 包的开发与发布。npm 包的开发与发布项目初始化我们常常用 npm init 命令来初始化 node 项目；如果使用默认的设置，则可加入参数 -y。下面，我们新建一个 npm-components 文件夹，然后初始化项目：$mkdirnpm-components$cdnpm-components$npminit-y此时，会在项目...
2021-12-27 21:50:52
2384
转载 走进数据通信之Websocket
一、写在前面 最近在做一个可视化拖拽搭建 H5 页面的项目，整个项目分为后台配置应用和前台渲染应用。其中一个业务场景是要求配置页面的同时，前台渲染应用能够同步将配置渲染出来。换句话说，你在后台配置这个页面背景色是红色，那么前台应用无须刷新页面等操作背景色就自动变为红色。 这个需求的核心是保持两个前端应用的数据实时同步，换句话说也就是两个前端应用之间的通信。 乍一看这个需求，第一时间想到的是 iframe ，将应用2内嵌到应用1中，然后调用 window.postMessage()...
2021-12-24 13:28:49
294
原创 VSCode 中代码没有颜色/颜色为白色
1.页面最下方，点击纯文本2.出现下拉框可以选择，如：选择html3.就有颜色啦~~~快去试试啦 。。。
2021-12-18 22:50:17
34212
8
转载 3D数据可视化大屏，超炫酷 -
最近上线的项目如上。本次将会围绕这一大屏应用的部分技术进行分享，其中包含以下内容： 路径 能量光罩于噪声处理 bloom辉光 飞线 视频材质的应用 1. 路径路径可以说是我们在可视化开发中较为常用了。线的显示本身是路径，飞线的方向需要路径，物体按照某轨道移动也需要路径。1.1 路径移动路径移动的实现很简单，使用THREE.CurvePath插值工具配合动画工具就可以达到效果。这里与@tweenjs/tween.js配合使用，编写了..
2021-11-29 14:22:29
2826
原创 好记性不如烂笔头——Vuex篇
俗话说的好“好记性不如烂笔头”，今天秉承着后期复习方便的态度，整理了一份Vuex基础知识点，并以思维导图的方式呈现出来，方便跟老铁们一起查漏补缺。Vuex.png一、基础1.png二、核心概念2.png2.1 State2_1.png2.2 Getter2_2.png2.3 Mutation2_3.png2.4 Action2_4.png2.5 Module2_5.png三、重要API3.png3.
2021-11-24 21:49:25
179
原创 使用 Vue 从零开始手写一个猫咪瀑布流组件
猫咪瀑布流如下动态图，一张张不规则的可爱猫咪照片是否勾起了你的少女心呢？瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。瀑布流实现的方式有很多种，但是原理都是差不多的，本文我们来详细介绍下下面这个猫咪瀑布流是如何实现的。瀑布流原理mao.jpg如上图：第1、2、3、4、5张图排在容器内的第一行，即靠近顶部。我们会发现第6张图并没有排在第1张图的下面，而是排在了第3张图下面。其实这就是瀑布流的关键之处，那么第6张图片是根据什么排列的呢?
2021-11-24 21:47:15
514
原创 4个很 丝滑 的 Veu 路由过渡动效
Vue Router 过渡是向Vue应用程序添加个性的一种快速简便的方法。它让我们可以在应用程序的不同页面之间添加平滑的动画/过渡效果。如果使用得当，它可以让我们的应用程序更加现代和专业，从而增强用户体验。在今天的文章中，我们介绍使用Vue Router过渡的基础知识，然后再介绍一些基本示例，希望能给大家一些启发和灵感。下面我们要创建的四个过渡页面。将 Vue 路由过渡添加到项目中通常，Vue路由器设置如下所示//defaulttemplate<template&g..
2021-11-20 19:56:33
983
2
原创 你不知道的vscode之光标操作
前言欢迎来到vscode的世界，vscode在前端届是现在越来越普及的开发工具了，因为其开箱即用的特性让人爱不释手，但也因为这个特性让我们开发者对它本身或者其很多提效的设计理念知之甚少，这也是本系列文章出现的原因，本文是系列文章的首篇，如果觉得有帮助的话请点赞鼓励作者继续写下去吧~~我们的目标只有一个，让我们喊出我们的口号：让开发如丝般顺滑！文章中的示例大多mac版为主，因为本人是mac，但win版无需担心，破阵心法，牢记于心：command就是ctrl键。系列文章目录对于vscode的
2021-11-20 19:47:55
2259
原创 从 ESLint 开启项目格式化
前言1.1 开篇代码错误检查和自动格式化对于我们来说都不陌生，它往往陪伴着我们的每一行代码输出、每一次保存提交，我们享受着自动格式化带来的便利，但偶尔也有些小问题影响体验。比如，面对同一个项目，各位项目协作者格式化方案却不一致，导致文件提交中频繁的出现代码格式的变动，微微到影响代码review；完成某条分支的代码merge，开开心心 commit，却被一堆 eslint error 阻止了脚步，确认提醒无伤大雅之后，--no-verify解决一切；自动保存的时候，发现引号在单双之间横跳 ....
2021-11-20 19:45:58
1442
1
原创 快速入门 postcss 插件：自动转换 px 到 rem
postcss 是 css 的 transpiler，它对于 css 就像 babel 对于 js 一样，能够做 css 代码的分析和转换。同时，它也提供了插件机制来做自定义的转换。这一节，我们通过一个 px 自动转 rem 的功能来入门一下 postcss 的插件。postcss 的原理postcss 是 css 到 css 的转译器，它也和 babel 一样，分为 parse、transform、generate 3个阶段。各种转换插件都是工作在 transform 阶段，基于 AST
2021-11-20 19:43:28
1688
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人