- 博客(50)
- 收藏
- 关注
RSS订阅原创 前端无障碍适配
帮助一些视障群体使用手机，点击的热区会增加配合文字识别增加一些语音播报的功能，手机一般可以通过：设置—》辅助功能—》无障碍功能菜单 体验无障碍功能IOS：设置–》辅助功能----》旁白。
2023-02-24 11:28:50
591
原创 互联网寒冬下的面经总结
本科两年多前端开发经验，常用技术栈Vue+TypeScript。换工作的原因：想着趁自己还年轻，不能老是在一家公司混吃等死😂毕业之后没有再面试过，想去外面看看机会，合适就溜，不合适就接受一下社会的毒打认清自身的差距踏实的学习(其实这是最初真实的想法)！最终结果：通过了百度、字节、滴滴、58等岗位的面试。观前提醒：本篇文章仅为记录+分享，提及的问题都有自己粗略的总结，我把能凑合看的都加上了链接，但不保证其正确性而且肯定比较主观，所以希望大家带着质疑和自己的理解辩证的去看。
2022-12-22 23:52:44
3788
原创 面试三部曲：约面方式&心态调整&argue薪资
其实找工作跟菜市场卖白菜或者相亲找对象一个道理，首先你要保证你的白菜质量(前期的准备工作要做足，该背的八股要背，该刷的leetcode要刷)，其次就是大声的吆喝(不要等着别人主动上门来问你价或者给你出价)，最好让整个菜市场打算买菜的都知道你这里有白菜正在出售。类比找对象就是：舔一个人的时候你是舔狗(卑微、怯懦，她晚几分钟回你消息你都得担心半天她是不是还有其他备胎)，舔一千个人的时候你就是海王(VX消息她爱回不回，其他人的消息你都回不过来，哪有功夫想她是怎么想的，狗头保命.jpg)
2022-12-22 23:41:08
643
1
原创 记录一次内存泄漏导致页面崩溃的排查过程
javaScript、Vue、VueRouter、vConsole、内存泄漏、性能监控、页面优化、问题排查
2022-08-17 17:53:30
1834
1
原创 canvas模拟实现高德地图的部分功能
星图(星星+星空)的拖拽、双指缩放、星星的反缩放、星星的动效及动效优化基本概念：画布、视窗(物理上的手机屏幕)、笔触原点(图片的左上角)画布的大小等于视窗的大小，但我们所有的操作都在手机屏幕上进行，即我们可以感知到的操作点都是视窗上的坐标点；但笔触所有的坐标点对应的都是画布的原点，所以需要将两者区别对待拖拽绘制过程：drawImage()、translate向左拖拽1px—>笔触原点坐标(-1,0)----->清空整个画布----->绘制并渲染----->视觉效果向左移
2022-01-09 13:07:45
1359
原创 防抖和节流-------这篇文章让你不再混淆！
防抖： 字面意思防止抖动假设场景：你的用户得了老年帕金森，手疯狂的抖动，现在他掏出手机要给别人汇款一百万，点一次汇款按钮就丢失一百万，那么聪明机智作为程序猿的你应该怎样合理避免用户的损失呢？答：设置一个合理的时间间隔（假设0.1s），在用户第一次点击上的时候获取到这个事件先不发送汇款的请求，假设用户在0.05s内时又点击了第二次，0.1s点第三次、0.15s点第四次并且手指离开了屏幕。(中间这个阶段可能是他的手指贴上了屏幕，但是在疯狂抖动，还没有离开屏幕)那么为了避免用户损失，第1、2、3次都不能算。当用
2021-10-27 21:02:04
155
原创 swiper 点击滑动功能属性
作为前端切图仔来说，swiper我们肯定都不陌生。但我们常用的都是它的滑动功能，我的设计稿如图设计希望实现的是既可以滑动切换，也可以点击切换。直接搜索没找到现成的答案，查阅文档后得知swiper为了防止触摸时误触跳转链接，所以把点击事件默认给禁止了。解决方案：你可以通过这个属性slideToClickedSlide: true,实现多个slide同时展示时的点击居中...
2021-09-10 11:53:38
1081
原创 Vue热重载失效
问题vue的项目启动后修改元素页面不更新，打开控制台显示如下，很明显它是知晓了页面中有元素进行更改了的，但是只提示需要重新加载页面没有刷新，这是为啥呢？原因Webpack版本问题，webpack4.0后需要手动配置开启热更新，默认没有开启解决方法1、局部安装依赖npm install --save-dev webpack-dev-server2、修改vue.config.js配置文件，开启热更新devServer: { disableHostCheck: true,//webpa
2021-07-13 17:39:07
2525
原创 clip-path:解决设置border-image后border-radius不生效问题
想使用css实现一个带圆角的渐变边框代码及结果如图：虽然设置了border-radius:10px但结果仍是直角，查阅文档后W3C给出的解释：A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such
2021-06-16 14:54:29
7894
13
原创 Vue对象新增属性无法监听到问题
解决方法：在新增属性的通知Vue对新增属性进行监听1、Vue.set(someObject,prop,value)2、this.someObject = Object.assign({},someObject,value)原理：把一个新的完整对象赋值给data中的某个属性，Vue会遍历这个对象内的所有属性，并通过Object.defineProperty,将这些property全部转化为getter/setter从而实现对属性的监听。直接通过this.someObject.prop无法监听到的原因：对
2021-04-25 19:14:50
3511
原创 计算机的记忆卡----------内存(RAM)
试想一下这个场景：你通宵肝的游戏或者写的文档忘了保存，突然断电了～再次打开空空如也，你会不会成为下面表情里的熊猫????自我提问为什么我们点击保存后下次打开时内容都在，不点击保存时内容都丢失了呢？（这个问题看起来好像是句废话，没点保存计算机当然不会保存啦，但他真的没有保存嘛？如果它真的没有保存的话我们不应该写一个字丢一个字嘛？）我们写的内容都是怎么保存在计算机里的呢？它又是存在哪个位置的呢？…正文之前通过ALU我们了解到了计算机内部到底是如何进行计算的，但如果不能存储的话计算机就永远无法完成复杂的
2021-03-10 17:52:49
347
原创 计算机的数学大脑--------ALU（算术逻辑单元）
算术逻辑单元===》顾名思义分为算术单元和逻辑单元算术单元负责计算机里的所有数字操作首先研究两个一位数相加可能的情况：inputAinputBsum000011101110对于计算机来说1=>true,0=>false;所以他的所有情况刚好符合逻辑电路中的异或门（XOR），但第四种情况下却不完全正确，因为它产生了进位，而且目前表格并没有进位的展示，所以我们先对表格进行一个完善。如下：inputAinputBca
2021-02-25 21:04:22
11028
原创 计算机基础（补坑日记）
这是一台我们天天都会用到的电脑，作为一名计算机专业的学生&码农小白，天天只顾着coding。有一天闲着蛋疼，突然问了问自己：它叫计算机，那它内部到底是怎么进行计算的？既然是用来计算的，它跟买菜大妈手里的计算器和爷爷手中的算盘有啥区别？为啥它要用二进制来计算？为啥半导体的产生（主要元素是硅，沙子的主要成分SiO2，沙子跟电脑有关系嘛？）对计算机的发展有那么大关系？…突然发现自己的计算机最基础知识的知识少的可怜，所以决定把自己在学校没好好学习的坑填一填。（虽然对现在手头的工作没啥直接的帮助，但.
2021-02-25 16:14:19
116
原创 git版本回退常用命令
回退版本：git reset --hard HEAD^ //回退到上一个版本，head指当前版本 ‘^’上一个git reset --hard 1094a //回退到指定commit id(1094a)版本，可通过git log查看提交日志配合使用：git log --pretty=online //查看提交日志，从而查到commit_idgit reflog //查看命令历史tips：git revert commit_id //前进一个版本此版本的内容为指定的
2021-02-02 19:04:31
1096
原创 css动画animation大杂烩
css动画//简写总和（常用）animation: myfirst 5s linear 2s infinite alternate;说明：myfirst(播放的@keyframes名称) 5s(动画播放时间) linear(速度曲线、从头到尾都相同) 2s(延迟2s播放) infinite(无限重复播放) alternate(动画在下一周期需要反向播放)//规定是否应该轮流反向播放动画Animation-direction:alternate; //奇数次正常播放（1、3、5…）偶
2020-11-25 11:29:19
313
原创 复制、粘贴就现在！！！
场景：小伙伴们是否遇到过这样的场景：快乐的coding过程中突然遇到了问题，费了九牛二虎之力终于从茫茫搜索结果中找到了你想要的一段代码，然而当我刚想ctr+c、v继续coding时，它却这样这样回绝我????这时的你是不是已经默默登录，或者乖乖的付费啦？听咱老李的，这就去跟旅长对线！观前提醒：本文篇幅较长，主要是记录整个问题的解决过程，如果只想看结果的话可以直接跳转至文末对线记录：Round one最初的想法：在粘贴的时候页面会弹出登录框，那么此页面一定是监听了我们的键盘事件，所以
2020-09-02 20:59:51
220
原创 VScode 代码注释
MAC：单行注释/取消注释： command+/多行注释/取消注释：1.选中要注释代码块+command+/2.option+shift+a3.JsDOc注释/**+tab如下图所示常用于给方法写注释，写在方法上时会自动带上此方法的参数，而且会车自动带上‘*’tips：快捷键VScode左下角设置可查（妈妈再也不用担心我记不住快捷键啦）...
2020-08-26 15:53:32
13971
原创 搞懂Vue父子组件
首先明确一下根基：A.vue文件被B.vue导入并且注册使用了，则：B是父组件，A是子组件。父子组件之间数据传递只能自上往下传递，即通过Prop：父—>子（B---->A）看代码：一般组件都放在项目src的components文件夹下...
2020-08-24 16:20:13
1908
原创 git踩坑记录：该git分支有未commit的代码
#情况说明：git代码提交上去进行项目发布的时候总是显示：该git分支有未commit的代码。然鹅：git status 却显示：nothing to commit, working tree clean一下让我摸不到了头脑原因分析排查结果：原来是我粗心大意上传代码时忘记忽略dist文件夹了，之后发现了这个问题，赶紧在gitignore手动添加了/dist，但是此文件已经被git版本管理跟踪了，即使再往.gitignore里添加此文件/目录的忽略规则仍然毫无作用。（估计这种低级错误也只有像我这样的
2020-08-11 20:43:29
800
原创 html块级元素和行内元素
块级元素独占一行可以通过display:inline 设置为内联元素，前后没有换行符常见有：div、canvas、p、ul、li、h1-h6行内元素不换行（无法直接设置其宽高），可以通过line-height设置行内元素的高度，通过display:block将其变为块级元素常见有: br、button、em、input、img、i、label、span、strong、selectvertical-align: middle; //用来指定行内元素（inline）或表格单元格（table-cell
2020-07-16 21:19:07
190
原创 css中的常用关键属性
牢记Html\Css\js才是前端的三大基石。多重视基础然后才去研究上层建筑（Vue、React、webpack）//css弹性布局display:flex; //父级元素设置flex可以调节子元素的位置*align-items:flex-start | flex-end | center | baseline（项目的第一行文字的基线对齐） | stretch（默认：如果项目未设置高度或设为auto，将占满整个容器的高度） //项目在交叉轴的对齐方式*justify-content:fl
2020-07-15 16:00:16
275
原创 element-ui table组件编辑后数据更新视图不更新
记录今天遇到的一个小bug使用el-table实现表格的增删改在这里我的表格数据源绑定的是rolesList，选中的当前行是role；我们将所需的信息打印出来可以看出我当前的数据已经更改，但我的视图信息并没有更改，查找解决方案后尝试了给表头增加一个row-key=“id”，确保每一行的id是唯一的，仍然不行。(这个建议大家先进行尝试)最终解决方案：发现是由于我的数据结构的问题，我是用的是数组，我通过this.role改变的只是数组指向的那个数据，但数组指向的地址并没有发生更改，也就是说数组本身
2020-06-01 21:20:19
7633
6
原创 element-ui tree组件在不弹框的情况下实现编辑、删除、添加功能
<template> <div class="container"> <div class="block"> <p>使用 scoped slot</p> <el-tree :data="data" node-key="id" default-expand-all @node-click="handleNodeClick" :expand-on-click-n
2020-05-25 21:22:21
700
原创 js获取日期后设置日期格式
getTime(val){if(val&valinstanceofDate){d=val;}else{d=newDate();};varyear=d.getFullYear();varmouth=(d.getMonth()+1)<10?('0'+(...
2020-04-01 18:50:51
155
原创 探究css画三角形问题
面试中被问到用css画个三角形，内心肯定美滋滋，最简单的方法：div { width: 0; height: 0; border: 40px solid; border-color: red deepskyblue yellow yellowgreen;}或者说我们还可以完善点div { width: 0; height: 0; ...
2019-09-12 23:55:22
123
原创 js---树的创建，查找，添加，查看树的最大最小高度以及判断是否为平衡二叉树
//数据结构------二叉树var displayTree = (tree) => console.log(JSON.stringify(tree, null, 2));function Node(value) { this.value = value; this.left = null; this.right = null;}function Binary...
2019-06-04 18:06:07
258
原创 w3c---js高级脚本排列组合去重算法挑战
题目链接：https://www.w3cschool.cn/codecamp/no-repeats-please.html解题思路：1.找出所有排列的可能集合（这种方法是我的第一想法比较笨，网上应该还有其他解法）2.减去集合中有连续重复的其中主要的就是找出所有可能的集合，这是我的大致思路代码：function permAlone(str){ if(str.length===1) re...
2019-05-24 20:33:26
284
原创 w3c收银系统算法挑战
原题链接：https://www.w3cschool.cn/codecamp/exact-change.htmlfunction checkCashRegister(price, cash, cid) {var change=[];// Here is your change, ma'am.var sum=cash-price;//将字符转换为数字for(var i=0;i<c...
2019-05-21 18:25:21
229
原创 w3c-----集合交集算法挑战
function sym(args) { //排序 for(var i=0;i<arguments.length;i++){ arguments[i].sort(function(a,b){ return a-b; }) } //排完序后去重 for(var i=0;i<arguments.length;i++){ for(var j=0;j<argu...
2019-05-17 17:33:11
153
原创 js---MD5仅需3行代码实现最简单的密码加密
代码如下：//引入自带的cryptovar crypto = require('crypto');var md5 = crypto.createHash('md5');//123456就是我们前台要传过来的密码为了看起来方便我直接写死 可以直接替换成req.body.passwordvar password = md5.update("123456").digest('base64...
2019-04-09 21:21:40
776
原创 vue-router之beforeRouteEnter实现注册成功判定，并给出相应提示
小白爬坑指南：下午想用vue框架写个注册登录，结果在注册成功后跳转到登录页面给出提示卡了一下~~给大家分享一下我的心路历程免得大家在这浪费时间。1.beforeRouteEnter的使用：代码如下 beforeRouteEnter(to, from, next) { console.log(to); console.log(from)...
2019-04-09 17:23:12
3942
原创 vue中transition标签实现轮播图及ScreenToGif动图生成器
页面中想插入一个轮播图，本来想直接找一个现成，结果发现大佬们的代码都特别复杂，而且大部分都是直接用的better-scroll,放到我的页面上效果都不是很好，所以没有办法，本菜鸡就直接写了一个小白也能看懂可以直接调用的轮播图啦~首先说一下实现的功能：图片的无缝轮播，鼠标移入停止，移出继续以及底部的导航条效果：好啦废话不多说直接上代码啦：<template> <div i...
2019-04-07 20:36:59
1310
原创 js面试问题小白总结
js构造函数：同普通函数的区别：1.命名规范，一般函数采用驼峰的写法，构造函数一般首字母大写2.使用New来生成实例对象3.this指向，构造函数中的this指向我们即将要生成的实例化对象构造函数的缺点：所有的实例对象都可以继承构造函数中的属性和方法。但是，同一个对象实例之间无法共享属性解决思路：通过原型链prototype来实现，他相当于一个公共容器Es6的class类...
2019-04-07 17:33:32
184
原创 nodejs读写json数据
1.首先准备好要读取的json数据文件如图:2.创建一个js文件，如图话不多说，直接上代码吧//引入文件模块const fs = require('fs');//定义json文件路径const path="./db.json";//开始读取文件的信息fs.readFile(path,function(err,data){ if(err){ console.log(err)...
2019-03-26 20:40:44
4126
3
原创 js闭包
首先我说一下对闭包的理解：简单的来说他就是函数内部和函数外部连接的一座桥梁使函数外部能够访问到函数内部的值。因为js特有的‘链式作用域’结构(chain scope)，函数内部可以访问函数外部的值，子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。所以我们想让外部看到我们内部的值就需要通道闭包啦！简单举个例子：function f1()...
2019-03-13 11:36:42
76
原创 sublime Text3 Package Control安装包
今天使用sublime Text3 安装Package Control官网翻不翻都死活上不去，一查才发现就是上不去，所以我找了一个：链接: https://pan.baidu.com/s/1TIMNXi6SzKTCKOh3jomRsw 提取码: aigw 大家可以直接去拿，怎么安装相信大佬们都比我会，我的放到Installed Packages文件夹下后sublime提示需要修改一下文件的名...
2019-03-06 18:22:37
670
转载 sublime text3 快速编写 HTML/CSS代码
转自：http://www.cnblogs.com/EnSnail/p/6294897.htmlEmmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示： &n...
2019-03-06 08:51:01
10598
原创 数组去重算法挑战
收获：1.arguments 可以获得我们接受的所有参数2.使用set去重先实例化一个set对象，然后在向这个对象添加新元素时会自动判断是否是否已经含有这个元素了，没有在存入，有了直接跳过3.Array.from()将其他类型的转化为数组；function unite(arr1, arr2, arr3) { var list=new Set(); for(var i=0;i<...
2019-03-05 16:33:14
166
原创 字符串查询替换算法挑战
主要就是解决要替换的和替换后的首字母大小写是否一致的问题：可以利用string.charCodeAt()查看他的字符ascll码a~z:97-122A~Z:65~90他们之间相差32清楚了他们的ascll码就可以利用toUpperCase和toLowerCase进行转化了function myReplace(str, before, after) { var list=str.s...
2019-03-05 11:28:23
438
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人