- 博客(102)
- 收藏
- 关注
RSS订阅
原创 你应该有的人生观念
觉得有收获的，我只有一个要求，点个赞呗？1.一个人一生只要把一件事做到最好，就可以获得巨大的财富和资源在学校的时候，老师经常叫我们“木桶原理”，告诉我们不要偏科，要把自己最差的一门提上来。直到进入社会，才知道这原理在社会上并不适用。不是觉得不行，当自己在某个职业深挖之后，很难有精力去把自己的短处变成长处；在这个社会上，是否“有特长”比“总分”的优势更明显，获得的财富更多，所以进入社会之后，尽情发展自己的长处，“扬长避短”更能体现你自己的价值。古今中外，那些科学家，医学家，作家等等，是无可挑剔的
2020-05-18 13:53:18
222
原创 底层工具类，storage封装
storage封装1.先简单讲讲storage的基础cookie遗留问题：1:大小的限制：4KB 不能接受大数据2:带宽的限制：cookie必须服务器和客户端数据会进行同步，过时，会去 通知服务器清楚cookie数据3:如果不加密的传输非常不安全4:操作是非常复杂，document.cookie进行操作优点：会根据时间自动清楚数据.时效作用storage:1:存储的空间 5...
2020-01-06 14:42:12
179
原创 提升工作能力的方法
如果能这么做，那将是一个非常通透的高手，所以高手就是一眼就能看清事物的本质，所以他在工作汇报工作、请示工作这些环节没有一步多余的动作，他的每一个行为都是直指问题关键，照着练，你也能成为一个非常厉害的高手！
2024-03-02 11:43:40
125
原创 如何成为一名前端组长？
但是重心变了，以前得靠自己的一行行代码来体现价值，而需要将自己的能力转化成别人的能力，通过团队来完成最核心事情，如果还是万事靠自己，一切都亲力亲为，那样肯定是不行的。但是转换到技术管理者，真正的技术开发工作只是自己工作的一小部分，因为即使你的技术能力再优秀，也不可能完成所有的事情的，相反，自己有更多更重要的事情要去完成。从开发人员-＞技术管理者，工作内容已经不仅仅是实施开发了，帮助团队成员成长，发现团队的问题，修正团队的方向，才是技术管理者最核心要做的事情，最重要的转变是思维的转变。
2023-11-27 11:47:48
632
原创 笔记：如何搭建一套前端监控系统？(持续更新中)
promise reject错误，可通过unhandledrejection监听器捕获。网络请求错误，可通过patch fetch/XMLHttpRequest方法捕获。MutationObserver监听页面元素变化及元素内容占比，判断页面整体崩溃。Runtime Error: JS运行错误，可通过error监听器捕获。console.error方法抛出的错误，可通过patch方法捕获。load Error: 资源加载错误，可通过error监听器捕获。数据加密，对涉及用户隐私的数据做到加密防护。
2023-11-24 11:26:50
497
原创 首屏加载优化
将JavaScript代码放在页面底部，以减少对页面渲染的阻塞。另外，可以通过代码压缩、去除不必要的注释和空格等方式来减小JavaScript文件的大小。避免使用过多的CSS文件和行内样式，尽量减少CSS文件的大小。另外，可以将CSS放在页面头部，以便尽早渲染页面。要实现预加载关键资源，可以使用HTML中的link和script标签的rel属性来指定资源的加载方式。合理设置缓存策略，利用浏览器缓存来减少重复加载相同资源的次数，提高页面加载速度。可以使用JavaScript的动态脚本加载技术。
2023-11-21 16:16:39
84
原创 vue动态路由的实现步骤
1.此为我的router目录，index.js对路由添加，守卫拦截等处理。static-route.js为前端定义的静态路由，不需要动态加载的，如登陆页面，忘记密码页面，404页面等。3.由于添加完路由还会重复执行一遍路由守卫，所有必须确保不要一直死循环添加路由。2.登陆成功后将获取到的动态路由存储到vuex。
2023-05-05 14:25:12
306
原创 vue修饰符
默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。.delete (捕获“删除”和“退格”键)自动将用户的输入值转化为数值类型。自动过滤用户输入的首尾空格。2.model修饰符。
2023-03-23 23:58:26
62
原创 在 Vue 里如何优雅的清除一个定时器？
前言清除定时器，相信有相当一部分人是这么写的：export default { data() { reurn { timer: null } }, mounted() { this.timer = setInterval(() => { console.log('setInterval') }, 2000) }, beforeDestroy() { clearInterval(this.timer)
2021-07-22 16:53:22
3313
1
原创 简单理解原型和原型链
1.JS中每个函数都存在有一个原型对象属性prototype。并且所有函数的默认原型都是Object的实例2.原型链，简单理解就是原型组成的链，对象的__proto__它的是原型，而原型也是一个对象，也有__proto__属性，原型的__proto__又是原型的原型，就这样可以一直通过__proto__想上找...
2021-07-12 08:33:15
440
原创 hash和history的区别
hash 就是指 url 尾巴后的 # 号以及后面的字符，history没有底带#，外观上比hash 模式好看些hash 能兼容到IE8， history 只能兼容到 IE10；由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件（hashchange只能改变 # 后面的url片段）history存在中新增的pushState()和replaceState()方法...
2021-07-07 19:18:54
157
原创 webpack打包流程
1.初始化 npm init2.安装webpack以及webpack-cli3.改变默认设置4.输出生产环境（webpack-dev-server）5.配置html-webpack-plugin插件6.输出到/dist/
2021-07-07 18:55:30
92
原创 浏览器输入网址到加载页面的过程
1.浏览器查找域名的IP地址 => 2.在请求之前，需要浏览器与服务器建立连接 (与服务器建立连接时TCP属于安全的连接，需要三次握手，这里不在说明) => 3.浏览器给web服务器发送一个HTTP请求 => 4.服务器“处理”请求 => 5.服务器发回一个HTML响应. => 6.浏览器开始显示HTML =>7.浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。...
2021-07-07 14:47:29
265
原创 重绘与回流的理解
1、 重绘：元素样式的改变（但宽高、大小、位置等不变）2、回流：元素的大小或者位置发生改变（当页面布局和几何信息发生改变的时候），触发了重新布局导致渲染树重新计算布局和渲染如添加或删除可见的DOM元素；元素的位置发生变化；元素的尺寸发生变化、内容发生变化（如文本变化或图片被另一个不同尺寸的图片所代替）；页面一开始渲染的时候（无法避免）； 因为回流是根据视口大小来计算元素的位置和大小的，所以浏览器窗口尺寸变化也会引起回流...
2021-07-07 14:41:43
143
原创 vue mutations为什么只能同步
1.mutations 里的同步意义在于，每个mutation执行完毕之后，可以得到对应的状态，使用devtools可以跟踪状态的变化2.每一个mutation都有一个字符串类型的事件类型(type)和回调函数(handler)，也可以理解为{type:handler()},这和订阅发布有点类似。先注册事件，当触发响应类型的时候调用handker()，调用type的时候需要用到store.commit方法...
2021-07-07 14:37:49
1546
原创 promise的内部实现原理及常见问题
优点1.Promise 是一种封装和组合未来值得易于复用机制，实现关注点分离、异步流程控制、异常冒泡、串行/并行控制等2.Promise会做出正确延时或异步操作，会解决callback处理异步回调可能产生的调用过早，调用过晚、调用次数过多过少、吞掉可能出现的错误或异常问题等，只接受首次 resolve(…)或 reject(…) 决议，本身状态转变后不会再变，所有通过 then(…) 注册的回调总是依次异步调用，所有异常总会被捕获抛出then 回调异步执行1）Promise 实例化时传入的函数会立即
2021-06-16 13:52:20
243
原创 同步与异步的详细区别
简单介绍：同步（Synchronization）：任务顺序执行，在上一个任务未执行完成之前下一个任务等待执行。异步（Asynchronous ）： CUP暂时搁置当前任务，等到主线程任务执行完成，再来响应该任务。运行机制：所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。主线程之外，还存在一个“任务队列”（task queue），只要异步任务有了运行结果，就在“任务队列”中放置一个事件。一旦“执行栈”中的所有同步任务执行完毕，系统就会读取“任
2021-06-16 11:20:03
1328
原创 git设置.gitignore后不起作用的解决方法
git rm -r --cached .git add .git commit -m ‘update .gitignore’
2020-11-29 20:25:17
152
原创 eventBus实现源码
class EventBus{ constructor(){ this.event=Object.create(null); }; //注册事件 on(name,fn){ if(!this.event[name]){ //一个事件可能有多个监听者 this.event[name]=[]; }; ...
2020-11-19 14:48:53
104
原创 nexttick的实现方式
1.先判断Promise2.在判断MutationObserver3.在判断setImmediate4.最后setTimeout如果以上都不支持就只能用setTimeout来完成异步执行了延迟调用优先级如下：Promise > MutationObserver > setImmediate > setTimeout每次event loop的最后，会有一个UI render，也就是更新DOM只要让nextTick里的代码放在UI render步骤后面执行，就能访问到更新后的DO
2020-11-19 14:35:43
476
原创 es6 class实现方法
//转义前 class Parent{ constructor(name,age){ this.name = name this.age = age } //类公有方法 sayName(){ console.log(this.name) } //静态方法 static sayhi(){ console.log(this.name) } } //经过babel官网转义后 var Parent = .
2020-11-19 14:17:19
324
原创 forEach实现原理
1.forEach为es6新增的辅助迭代器，作用是对调用者的元素进行遍历并进行相关操作；2.仅能被数组或者使用document.querySelectorAll获取到的类数组进行调用；3.第一个参数为回调函数，其接收的参数依次为当前元素（必填），当前元素的索引值（可选），当前对象所属的数组对象；第二个参数可以限定回调函数内this的指向；4.在回调函数内部无法使用break来跳出循环，也不能使用return来返回外层函数 Array.prototype.forEach = function(call
2020-11-18 08:42:40
1171
原创 上漂的四年困路
真正在上海入职并坐班的日子是2015年10月份吧; 那一年，我前半年在浙江嘉兴，不夸张的说，我那时候带着不完整的基础知识，找工作，紧张而害怕；那年国庆，本来是和同学去玩的;带着几分尝试的心情，去面试； 国庆那几天，天气晴朗，但不热，是个旅游也是面试找工作的好日子；庆幸的是，运气和天气一样的好；国庆刚完，刚准备回去继续实习的时候，录取的通知书来了，激动而害怕，虽然工资
2020-11-13 17:05:46
126
原创 常见功能：vue返回顶部操作
Vue实现返回顶部功能<template> <div class="scrollTop"> <div class="backTop" @click="backTop"> <button v-show="flag_scroll"> 返回顶部 </button> </div> //数据源 <di
2020-10-27 15:20:12
802
原创 心理学小技巧(程序员们)
1、「欲擒故纵」是最好的吸引法则。想让男生对你着迷，就答应他的合理邀请，但在关键时间停下；女生则相反，满足她的所有愿望外，再增加一个惊喜。2、一个人越喜欢你，越容易看到你就忍不住傻笑。没有真正的高冷直男，只不过他的温柔只属于自己喜欢的人。3、这条「亲亲技巧」，男生瞪大眼睛看仔细啦！想和确定关系不久的女朋友嘴唇接触，如何留下较美好的回忆呢？很简单，帮女友缓冲紧张感，让她感觉到你的温柔体贴，先摸头杀，然后开始亲额头、眼睛、鼻子、脸颊，最后成功啵啵！她一定会难以忘怀~...
2020-10-15 16:04:22
177
1
原创 不喜欢说话是情商低吗？
首先，单凭不说话，就是情商低，这显然是错误的；说话能力是情商的一个标签，但不是标杆；今天我来谈谈自己的看法： 一个人高情商是性格，修养，谙熟人性的综合体现，很难通过简单的外部语言优化来提升情商。现在我仍然坚持自己的想法。 我不否认情商高就是说话让人舒服，但这样很可能把情商推到一个相当肤浅的层面，而那些试图通过外部语言优化来提高情商或以此获得人际关系的朋友，你们可能走入了情商的误区——情商并非外部呈现的舒适，也绝不仅仅是用来取悦别
2020-10-15 15:28:56
810
2
原创 你值得拥有的好习惯
1、没事练练卷腹、臀桥。腰腹力量很重要，尤其是有对象后。2、别在睡前刷抖音3、不定期裸睡。4、在门内侧贴一个小挂钩，回家后门禁卡和钥匙顺手挂上面，出门时就不容易忘带了。5、办一张卡，无论工资多少，每月都拿20%存进去。（存不了，好难）这存的不仅是钱，更是未来面对意外的底气和安全感。6、刷到好文章，双击屏幕，不仅能快速收藏，还能锻炼手指力量。7、每月进行一次断舍离，超过3个月以上没用的旧物、app，统统舍弃掉。这样房间、手机都会干净很多。8、不管多忙，每天至少读10页书。读书是成本最低，收益最
2020-10-13 16:29:19
386
原创 小小心理学
1、朋友圈里天天酒吧蹦迪的女生不要追，朋友圈里不是晒臀就是露胸的女生不要追，朋友圈里天天吐槽这个评价那个的女生不要追。她们都是经验丰富的老渔夫，小鱼儿你快跑 ！2、聊天时，发现对方正在输入，然后啥也没发过来，说明ta有什么想说的话憋回去了。而这句憋回去的话，一定是那种不好意思开口或是对方感觉欠妥的话。等几分钟后，ta发过来了，此时这句话当然已不是对方最初想发的那句话。这句话显然已经委婉了许多，发出来没多大心理负担，所以ta发过来了。3、慢热的人并不是内向，只是害怕热得太快受到伤害。当她们开始热起
2020-10-13 13:47:27
251
1
原创 说说微信扫码登录背后的实现原理？
1）网页端与服务器的配合逻辑：接下来就是对于这个服务的详细实现。首先用户打开网站的登录页面的时候，向浏览器的服务器发送获取登录二维码的请求。服务器收到请求后，随机生成一个uuid，将这个id作为key值存入redis服务器，同时设置一个过期时间，再过期后，用户登录二维码需要进行刷新重新获取。同时，将这个key值和本公司的验证字符串合在一起，通过二维码生成接口，生成一个二维码的图片（二维码生成，网上有很多现成的接口和源码，这里不再介绍）。然后，将二维码图片和uuid一起返回给用户浏览器。浏览器拿到二.
2020-10-13 09:53:16
1283
原创 彻底消除if else,让你的代码看起来更优雅
场景一： 根据status显示对应名称const statusStr = { '1': '待付款', '2': '待发货', '3': '已发货', '4': '交易完成', '5': '交易关闭', 'default': '', }const getStatus = (status) =>{ return statusStr[status] || statusStr['default'] }优化方案
2020-10-13 09:33:52
194
原创 commit提交规范
类型（type）feat:: 类型为 feat 的提交表示在代码库中新增了一个功能（这和语义化版本中的 MINOR 相对应）。fix:：类型为 fix 的 提交表示在代码库中修复了一个 bug （这和语义化版本中的 PATCH 相对应）。docs:: 只是更改文档。style:: 不影响代码含义的变化（空白、格式化、缺少分号等）。refactor:: 代码重构，既不修复错误也不添加功能。perf:: 改进性能的代码更改。test:: 添加确实测试或更正现有的测试。build:: 影响构建系
2020-09-29 09:43:02
931
原创 给自己的忠告(love)
1、渣男喜欢把女生宠成女儿，因为他们只需要忍受一阵子；好男人喜欢和女生讲道理，因为他们想好好陪着对方一直走下去。讽刺的是，女生却把前者当“男神”，爱得要死要活；把后者当“直男”，连微信都不想回。2、一个合格的前任，就该像死了一样，永远消失在对方的世界中。3、远离那些谈恋爱久了就想分手的人。真正的新鲜感不是去体验不同的人，而是和相同的人体验不同的人生。4、女人是听觉动物，男人是视觉动物。男生经常说“我爱你”、“我想你了”、“你真美”，对女生的威力，就和女生穿着黑丝侧躺在床上，挑逗地看着你一样。5、如果
2020-09-25 10:01:02
286
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人