
web前端
文章平均质量分 83
一袋米要扛几楼_
最怕你一生碌碌无为,还安慰自己平凡可贵
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
大厂软技能最佳实践--金字塔原理篇
每次看见别人在讲台上滔滔不绝、口若悬河,你是否会憧憬有一天变成自己?每次看见别人跟leader汇报时逻辑缜密、结构清晰,你是否憧憬有一天变成自己?每次看见别人battle的时候有理有据、旁征博引,你是否憧憬有一天变成自己?每次看见别人述职的时候亮点突出、化腐朽为神奇,你是否憧憬有一天变成自己?是的,你一点都不憧憬,你只想做条咸鱼,那你走吧,别好奇我的文章。。。什么是金字塔原理?定义它是思考和表达的一种模式,任何事情都可以提取出一个中心论点,然后拆分为三到七个分论点,每个分论点下面再有三..原创 2021-02-26 14:28:53 · 1202 阅读 · 2 评论 -
开发任务很重时,领导交给你一项架构任务怎么办?
你是一名普通的前端开发,马不停蹄的写着业务代码,勤勤恳恳的工作着。leader看你表现不错,有心栽培你,交给你一项重要的架构任务,但是你已经朝九晚九了,现在该怎么办呢?常见解决方式如果加班完不成,那就加更多的班直到完成,绝不能辜负leader的信任兄弟我怕你有命做,没命拿成绩啊加班只可以用于解决紧急任务,但加班不是银弹!如果我们为了这个架构任务把未来一个月的下班时间从9点变为12点,那就一定会因为加其他的任务从12点变成凌晨2点!一旦遇到线上bug或加急改动,完全没时间休息了。对身体的伤害就不.原创 2021-02-23 18:05:41 · 491 阅读 · 6 评论 -
前端内卷加速破局之道
什么是内卷?罗振宇有这样一个比喻,江湖中有一本葵花宝典(比如vue3源码),大家都想得到它,因为得到之后,可以天下无敌!但如果有一天,葵花宝典被公开了(vue3源码教程),人人都有机会练,这是好事还是坏事呢?这会成为一个灾难,因为一个人拥有时,练不练是一个人的事。大家都拥有,练不练就不由自己决定。比如你有一个仇人,你不练,你的仇家就会练成后来杀你,所以逼得你也得练。最终江湖上所有人都会练葵花宝典,人人都天下无敌,也就没有天下无敌了。但是欲练神功,必先自宫(消耗时间精力就是消耗生命),这是一个通输的结局,..原创 2021-02-15 14:01:40 · 2553 阅读 · 14 评论 -
大厂前端撕逼方法论,从此不再怕battle!!!
老板要做个收款的功能,搞快点(甲方一句话需求)这个需求后天必须要上(产品倒排时间)这个体验不好快改下(UI、交互频繁调整不算工时算bug)时间不够接口还没写完,你先联调一部分(后台框你先联调,联调delay都怪你)表格数据怎么出不来(测试bug先找前端麻烦)…前端:他们都是爸爸,我只是个背锅侠,我太难了,呜呜呜~~~注意:以下方法论不适用于偷工减料,仅用于受到多方PUA时反制PUA,切记!!!前端怎么battle甲方?甲方是爸爸深挖甲方诉求,搞清楚真正的需求和隐藏需求,防止频繁返.原创 2021-02-08 10:06:58 · 998 阅读 · 0 评论 -
vue3源码分析--真的有必要掌握框架的细枝末节吗?
古人云:工欲善其事必先利其器,磨刀不误砍柴工。但是砍柴的人需要知道怎么制作刀吗?注意:本文先分析要不要学源码,然后分析要不要掌握源码的每一个细枝末节(深究技术)!!!为什么要学源码为了面试被迫学习->毕竟面试可是要造火箭的为了装逼->装逼才是人生的究极快乐遇到问题网上找不到解决方案->只能硬着头皮啃源码想了解优秀的代码长什么样->猎奇心理打磨技术永远不会错->技术是安身立命之本…为什么不要深究源码为了面试被迫学习源码大部分面试官也只是跟风网上的面.原创 2021-02-07 10:23:39 · 1074 阅读 · 6 评论 -
代码重构,最佳实践,你真的会代码重构吗?
WHAT:什么是重构?Martin Fowler:重构是一种对软件内部结构的改善,目的是在不改变软件的可见行为的情况下,使其更易理解,修改成本更低。大型重构对象:对系统、模块、代码结构、类与类之间的关系等的重构方法:有分层垂直拆分、模块化水平拆分、解耦、抽象UI组件、抽象业务组件、抽象区块方法论:编程范式、设计原则、设计模式影响:代码改动多,影响面广,难度较大,耗时较长,引入BUG风险高小型重构对象:对类、函数、变量等代码级别的重构方法:规范命名(见名知意)、规范注释、函数原创 2021-02-04 00:01:34 · 1496 阅读 · 3 评论 -
2020年 30K的前端架构面试题总结(持续更新)
30K的前端面试题总结vue部分vue父子组件通信vue组件的data为什么建议写成函数返回对象而不是直接写对象?input的input事件会自带event参数,如何同时绑定其他参数keep-alive有哪些参数?LRU算法原理?refvue为什么不兼容ie8简述Vue的响应式原理js实现简单的双向绑定v-modal如何实现computed 会重新求值吗v-if和v-for写在同一标签上,谁的优先级高?为什么?怎么优化?用户自定义watch有哪些参数vue2通过下标修改数组项或数组length无法触发响应式原创 2020-06-02 00:39:14 · 16982 阅读 · 7 评论 -
webpack学习总结
devtool配置sourceMapinline 不生成单独的sourceMap文件,而是直接打包进js文件里module 映射第三方和loader的代码cheap 只映射到出错行,不精确到列;只映射业务代码eval 速度最快,但不全面development: 建议cheap-module-eval-source-mapproduction: 默认不加最好,需要...原创 2020-04-26 23:33:20 · 603 阅读 · 0 评论 -
js 图解变量环境、词法环境、执行上下文,作用域链查找过程
看到这个标题的时候心里应该是这样的js代码运行过程编译是把代码拿过来创建执行上下文,并创建变量环境、词法环境、可执行代码,将执行上下文压入执行栈。执行是在当前执行上下文环境下执行可执行代码。变量环境:通过var声明或function(){}声明的变量存在这里词法环境:通过let const with() try-catch创建的变量存在这里可执行代码:变量声明提前后,剩下的...原创 2020-04-17 18:02:35 · 4064 阅读 · 7 评论 -
国内知名前端大佬收集(排名不分先后)
前不久司徒正美断开连接了,很多朋友在问:“司徒正美是谁?”。于是我抽时间整理了下比较知名的国内前端大佬。文章目录尤雨溪(尤小右)玉伯(玉伯也叫黑侠/王保平)阮一峰司徒正美(钟钦成)朴灵(JacksonTian\田永强)winter(程劭非)廖雪峰张鑫旭勾三股四月影(吴亮)贺师俊周爱民徐涛徐飞(民工精髓)大漠一丝CSS魔法小芋头君林建锋(sofish)颜海镜尤雨溪(尤小右)vue项目作者...原创 2020-04-14 19:09:13 · 28325 阅读 · 17 评论 -
js实现事件总线EventBus
手写EventBusclass EventBus { constructor() { this._events = [];//存储自定义事件 } /** * 注册事件和处理函数 * @param event * @param fn */ on(event, fn) { if (Array.isArray(event)) { f...原创 2020-04-14 10:57:11 · 8771 阅读 · 1 评论 -
sessionStorage\localStorage总结
获取localStorage最大容量sessionStorage\localStorage在谷歌容量为5M左右(function () { if (!window.localStorage) { console.log('当前浏览器不支持localStorage!') } var test = '0123456789'; var add = function (nu...原创 2020-04-08 17:29:57 · 599 阅读 · 0 评论 -
vue源码学习 深入patch diff双端对比算法
什么时候调用patch在beforeMount和mounted之间,会执行options.render函数生成新的VNode树。然后调用vm._update(新VNode)更新,然后进入到patch阶段。// src/core/instance/lifecycle.jsexport function mountComponent ( vm: Component, el: ?Eleme...原创 2020-04-03 13:52:21 · 1276 阅读 · 0 评论 -
vue源码学习总结 深入解析nextTick
nextTick实现机制优先级:setImmediate() > MessageChannel > Promise.resolve().then() > setTimeout(fn,0)执行过程当前tick =>当前tick第一次调用queueNextTick 的时候将回调放入callbacks中,且将timerFunc推入到宏/微任务栈中,设置pending锁=&...原创 2020-04-02 22:16:19 · 1080 阅读 · 1 评论 -
js 宏任务与微任务总结
宏任务macrotask有哪些script setTimeout setInterval setImmediate requestAnimationFrame I/O操作 UI渲染微任务microtask有哪些process.nextTick MutationObserver Promise.then执行优先级主线程script>微任务process.nextTick>pr...原创 2020-04-02 21:54:50 · 1536 阅读 · 0 评论 -
vue源码学习总结 深入解析template编译成render函数过程
简述编译流程总的来说,在beforeMount之前执行编译过程,第一步通过html-parser将template解析成ast抽象语法树,第二步通过optimize优化ast并标记静态节点和静态根节点,第三步通过generate将ast抽象语法树编译成render字符串并将静态部分放到staticRenderFns中,最后通过new Function(render)生成render函数。在bef...原创 2020-04-01 17:12:32 · 3507 阅读 · 3 评论 -
vue源码学习总结 深入响应式原理
深入响应式原理图请反复观看原理图,画这个图的人请收下我的膝盖。。。从initState切入,发现有3种watcherVue.prototype._init= function (options?: Object) { callHook(vm, 'beforeCreate') initInjections(vm) // resolve injections before data/...原创 2020-03-31 18:03:48 · 2227 阅读 · 0 评论 -
vue源码学习总结 lifecycle深度解析
钩子函数详细描述钩子函数说明beforeCreatethis.$options初始化完成,生命周期钩子函数、事件函数、渲染函数等已挂载到Vue.prototype上createdinject、data、method、computed、prop、provide可以访问了,但真实dom还没有生成,this.$el还不可用beforeMountrender函数首次...原创 2020-03-27 18:13:22 · 1103 阅读 · 0 评论 -
vue源码学习总结 prop data method computed 的命名冲突处理策略
vue 组件属性命名冲突处理策略当 prop data method computed 的key值冲突, 获取值优先级策略如下:computed>data>method computed>method>prop prop>data在源码src/instance/state.js 的 initState中,方法的执行顺序为 initProps>ini...原创 2020-03-26 16:59:50 · 3661 阅读 · 0 评论 -
vue源码学习总结 this.$data this._data this.$options.data this.xxx之间的联系;data重置
假设有如下代码:let option={ name:'demo', el:'#app', template:'<div>{{name}}</div>' data(){ return { name:'demo page.' } }};let vm=new Vue(option);this.$options.data ...原创 2020-03-26 15:35:10 · 1186 阅读 · 0 评论 -
vue源码学习总结 options合并策略
vue options合并流程格式化数据格式化props为小驼峰命名的对象格式化inject为{key : { from: val}}形式对象格式化directives为{ bind: defFn, update: defFn }形式对象依次合并 parent, child.extends(单个继承组件), child.mixins(数组), child.options,取值越靠...原创 2020-03-25 18:01:29 · 657 阅读 · 3 评论 -
web性能优化原理与方案
深入理解http请求的过程是前端性能优化的核心从请求过程中可以发现一些优化点dns是否可以通过缓存减少dns查询时间?dns缓存可以减少dns解析时间网络请求的过程走最近的网络环境?cdn以空间换时间,减少请求时间相同的静态资源是否可以缓存?下次不再请求,减少请求时间,减轻服务端压力能否减少请求http请求大小?静态文件压缩, gzip减少http请求css\js\img合并服...原创 2019-08-27 22:14:31 · 815 阅读 · 0 评论