- 博客(41)
- 收藏
- 关注
RSS订阅原创 前端晋升答辩-性能优化篇范式
本文力争为你参加晋升答辩时，提供一个论述性能优化相关工作的范式。简单点儿来说，就是按照这个范式文来准备、阐述，就可以博得晋升评委的认可与喜爱。痴迷写页面UI的前端千篇一律，懂得量化收益的前端万里挑一。现在已经不是刀耕火种的前端原始时代了，能够高保真实现页面UI是每一个前端的基本技能，“没有功劳还有苦劳”这句话也不再适用于前端晋升了。你辛苦的工作可能会看在直属leader的...
2022-08-02 07:30:46
1504
原创 react-router-middleware-plus开源啦 | 基于react-router v6的零成本式路由权限解决方案
一、你的苦恼~~你还在为react-router的路由权限控制而烦恼吗？你还在翻遍了社区react路由权限相关文章发现都是V4、V5版本的而烦恼吗？你还在为自行适配react-router v6版本的权限步骤繁杂，多重鉴权逻辑嵌套而烦恼吗？他来了！他来了！他带着礼物走来了！react-router-middleware-plus专为解决你的烦恼而生！二、react-rou...
2022-06-09 07:30:28
706
原创 数组旋转，来来来，走个K步~
前言在前端算法面试中，数组是经常被问到的、使用到的。今天我们来看一道经典的前端基础面试题：【数组旋转K步】。首先来看下这个题目，假定存在数组 arr = [1, 2, 3, 4, 5, 6, 7]，旋转 k = 3步，即数组末尾的元素依次进行挪动到数组的前面，即结果为 [5, 6, 7, 1, 2, 3, 4]。题目其实不太难，我们借助这个题目来了解一下算法复杂度（时间复...
2022-04-19 11:10:13
247
原创 不想eject，还咋修改create-react-app的配置？
一、先抛问题许多刚开始接触create-react-app框架的同学，不免都会有个疑问：如何在不执行eject操作的同时，修改create-react-app的配置。今天胡哥就来带大家一起来看看这个问题~二、为啥不建议执行eject1. 执行eject产生了什么变化？create-react-app框架本身将webpack、babel的相关配置封装在了react-scripts中， 执行yarn eject后，会将webpack、babel等配置暴露在config目录下，同时scripts目录下会有
2021-04-12 18:40:10
201
原创 【原创】不想eject，还咋修改create-react-app的配置？
一、先抛问题许多刚开始接触create-react-app框架的同学，不免都会有个疑问：如何在不执行eject操作的同时，修改create-react-app的配置。今天胡哥就来带大家一起...
2021-04-12 18:32:54
350
原创 面试官在“逗”你系列：到底应该怎么爬楼梯？！
直奔主题算法题是在面试过程中考察候选人逻辑思维能力、手写代码能力的一种方式，因为有一句古话说的好：“说一千道一万，不如写段代码看一看”。今天我们就来个单刀直入，直奔主题，从一个真实面试题到底怎么爬楼梯来聊一聊算法中的动态规划 。面试真题小明家有一楼梯共有10级台阶，每次可以爬1级或2级，问小明爬到第10级台阶，一共有多少种走法？为什么是“小明”呢？这是个奇怪的问题~真题分析很多同学在第一次遇到这个爬楼梯的问题可能会比较懵,不知道该如何来解决。我们首先需要做的就是寻找这个问题的关键点：每次
2021-02-10 11:31:21
212
1
原创 喜大普奔，微信终于支持外网打开小程序啦！
前言千呼万唤始出来，微信小程序终于支持以URL Scheme的形式从外部唤起了。long long ago~ 我们只能在微信内的网页中使用微信开发标签-小程序跳转按钮 <wx-open-launch-weapp>打开小程序，只有这样一种单一的场景。而在实际的业务中，我们希望在给用户发送的营销短信、邮件或其他渠道如APP打开小程序，以快速获取用户流量，完成引流、导购等目的。他来啦，他来啦，微信小程序悄咪咪的上线了新功能：支持URL Scheme打开小程序了。新品上线URL Schem
2021-02-02 17:47:26
1347
原创 【震惊】padding-top的百分比值参考对象竟是父级元素的宽度
引言书写页面样式与布局是前端工程师Coding 中必不可少的一项工作，在定义页面元素的样式时，padding 属性也是经常被使用到的。padding 属性用于设置元素的内边距，其值可以是length、inherit，当然也可以是百分比。今天为什么会聊到padding-top设置百分比时的参考对象这个话题呢，这还要从一道不那么正经的面试题说起~一道不那么正经的css布局面试题在对面，一本正经的面试官和蔼可亲的说道：我们来道简单的面试题，写写代码吧。你一脸微笑的说道：好哒。题目须知：页面中有一个元
2020-12-17 02:49:17
919
1
原创 前端开发神器Charles从入门到卸载-文末福利等你领取
前言本文将带大家学习使用前端开发神器-charles，从基本的下载安装到常见配置使用，为大家一一讲解。一、花式夸奖Charles截取 Http 和 Https 网络封包。支持重发网络请求...
2020-06-28 07:00:00
260
原创 前端开发神器Charles从入门到卸载
前言本文将带大家学习使用前端开发神器-charles，从基本的下载安装到常见配置使用，为大家一一讲解。一、花式夸奖Charles截取 Http 和 Https 网络封包。支持重发网络请求，方便后端调试。支持修改网络请求参数。支持网络请求的截获并动态修改。支持模拟慢速网络。好，骑上我心爱的小摩托，准备上路...二、下载与安装官网下载传送门本文所使用的的版本为 mac V4.5.6版本，不同版本间的具体化差异，大家可留言交流。Charles破解工具可通过关注公众号「胡哥有话
2020-06-28 06:52:02
2520
原创 《剑指Offer》- 连续子数组的最大和或最小和
前言本文是《剑指Offer》系列（JavaScript版）的第一篇，题目是“连续子数组的最大和或最小和”。话不多说，开始“打怪”修炼...一、理解题目以“连续子数组的最大和”为例，相当于我们在数组中，计算连续的子数组的和，找寻最大值。如在数组[3, -2, 1, 2, 4, -6, 5]中连续子数组的最大和为：3 + (-2) + 1 + 2 + 4 = 8输入：[3, -2, 1, 2, 4, -6, 5]输出：8一定要准确的理解题意，如不是特别明确，建议与面试官再次沟通确认，避免需求与
2020-05-15 09:57:34
862
原创 面试官在“逗”你系列：数组去重你会几种呀？
前言数组去重是一个老生常谈的话题，也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现，为各位小伙伴提供多种可以反手“调戏”面试官的解决方案。话不多说，上去就来一梭子...数组去重核心原理价值100W的核心原理上来就给你了...，记得留言点赞鸭！一般我们都会创建临时变量tmp，存储不重复的元素（以数组元素存储或对象的键来存储）；遍历待去重数组arr，依次判断tmp中是否包含该元素；若tmp中不存在该元素，则放入；否则跳过不处理。基本上无论什么样的实现，其核心皆
2020-05-15 09:51:06
690
原创 面试官在“逗”你系列：数组去重你会几种呀？
前言数组去重是一个老生常谈的话题，也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现，为各位小伙伴提供多种可以反手“调戏”面试官的解决方案。话不多说，上去就来一梭子...数组去重核心原理价值100W的核心原理上来就给你了...，记得留言点赞鸭！一般我们都会创建临时变量tmp，存储不重复的元素（以数组元素存储或对象的键来存储）；遍历待去重数组arr，依次判断tmp中是否包含该元素；若tmp中不存在该元素，则放入；否则跳过不处理。基本上无论什么样的实现，其核心皆
2020-05-15 07:08:51
407
原创 《剑指Offer》- 连续子数组的最大和或最小和
前言本文是《剑指Offer》系列（JavaScript版）的第一篇，题目是“连续子数组的最大和或最小和”。话不多说，开始“打怪”修炼...一、理解题目以“连续子数组的最大和”为例，相当于我们在数组中，计算连续的子数组的和，找寻最大值。如在数组[3, -2, 1, 2, 4, -6, 5]中连续子数组的最大和为：3 + (-2) + 1 + 2 + 4 = 8输入：[3, -2, 1,...
2020-04-29 07:32:54
401
原创 浅析API和SDK
前言最近有小伙伴咨询胡哥关于API和SDK的概念以及区别，今天给大家来阐述下我的理解，手动微笑.gif。API1. 定义API（Application Programming Interface， 应用程序编程接口）是一些预先定义的函数，或指软件系统不同组成部分衔接的约定。目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。以...
2020-04-28 12:56:38
733
原创 挑战全网最幽默的Vuex系列教程：第六讲 Vuex的管理员Module（实战篇）
写在前面这一讲是 Vuex 基础篇的最后一讲，也是最为复杂的一讲。如果按照官方来的话，对于新手可能有点难以接受，所以想了下，决定干脆多花点时间，用一个简单的例子来讲解，顺便也复习一下之前的知识点。首先还是得先了解下 Module 的背景。我们知道，Vuex 使用的是单一状态树，应用的所有状态会集中到一个对象中。如果项目比较大，那么相应的状态数据肯定就会更多，这样的话，store 对象就会变得相...
2020-04-28 09:13:47
772
原创 挑战全网最幽默的Vuex系列教程：第六讲 Vuex的管理员Module（实战篇）
写在前面这一讲是 Vuex 基础篇的最后一讲，也是最为复杂的一讲。如果按照官方来的话，对于新手可能有点难以接受，所以想了下，决定干脆多花点时间，用一个简单的例子来讲解，顺便也复习一下之前的知识点。首先还是得先了解下 Module 的背景。我们知道，Vuex 使用的是单一状态树，应用的所有状态会集中到一个对象中。如果项目比较大，那么相应的状态数据肯定就会更多，这样的话，store 对象就会变得相...
2020-04-28 07:37:09
212
原创 挑战全网最幽默的Vuex系列教程：第五讲 Vuex的小帮手
先说两句前面已经讲完了 Vuex 下的 State、Getter、Mutation 及 Action 这四驾马车，不知道大家是否已经理解。当然，要想真正熟练掌握的话，还是需要不断的练习和动手实践才行。其实只要把这四驾马车完全熟练驾驭了，那么应对一些中小型的项目，基本上就已经没啥问题了，后面的 Module 这架终极马车，其实是为了搞定那些稍微大型复杂一点的项目，避免 store 里面的数据太多...
2020-04-27 09:21:12
696
原创 挑战全网最幽默的Vuex系列教程：第四讲 Vuex旗下的Action
写在前面通过上一讲「Vuex 旗下的 Mutation」，我们知道了如何去修改 State 的数据，而且只能通过 Mutation 去提交修改，另外还了解到了 Mutation 必须是同步函数，那么如果需求当中必须要用到异步函数怎么办？好办，那就轮到 Action 上场了。简单介绍Action 类似于 mutation，不同在于：1、Action 提交的是 mutation，而不是直接...
2020-04-26 10:59:03
718
原创 挑战全网最幽默的Vuex系列教程：第三讲 Vuex旗下的Mutation
写在前面上一讲「Vuex 旗下的 State 和 Getter」，告诉了我们怎么去使用仓库 store 中的状态数据。当然，光会用肯定还不够，大部分的应用场景还得对这些状态进行操控，那么具体如何操控呢，这就是这一讲要说的重点。只有 mutation 能动 State更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：...
2020-04-25 17:12:16
688
原创 挑战全网最幽默的Vuex系列教程：第二讲 Vuex旗下的State和Getter
先说两句上一讲 「Vuex 到底是个什么鬼」，已经完美诠释了 Vuex 的牛逼技能之所在（纯属自嗨）。如果把 Vuex 比喻成农药里面的刘备，那就相当于你现在已经知道了刘备他是一个会打枪的力量型英雄，而且他打的枪还是双排量的，认识到这一点后，那么接下来就是要了解他到底是如何打枪的，是左手打，还是右手打，还是双手一起端着枪打？同样，我们已经知道了 Vuex 就如同一个全局的管理员一样，帮着我们统...
2020-04-19 22:30:30
148
原创 挑战全网最幽默的Vuex系列教程：第一讲 Vuex到底是什么鬼
先说两句官方已经有教程了，为什么还要写这个教程呢？说实话，还真不是我闲着蛋疼，官方的教程真的是太官方了，对于刚入门 Vuex 的童鞋来说，想必看官方的教程，很多地方就如同看圣经一样，比如「欧玛尼玛尼牙」，所有的字都认识，就是不知道说些什么玩意，不信，你可以戳进去看看。当然，对于大神级别一看就懂的，那就不用说了，肯定是看官方的更权威。还有，如果对 Flux、Redux、The Elm Archi...
2020-04-17 09:21:29
813
1
原创 面试官在“逗”你系列：不借助第三变量交换两个变量值的方案你有几种？
引言在我们学习编程之初，就学习过变量的赋值操作，同时也学习了将一个变量的值赋值给另外一个变量。对于交换两个变量的值，很多童鞋都有解决方案。然鹅，对于面试官提出的不借助第三变量来交换两个变量的值，你能想到几种解决方案呢？如果你只知道一种方案，请你认真看下去...如果你知道两种方案，那么你可以来了解更多方案了...一、最简单的实现-最初的记忆让我们由浅入深，来了解交换变量值的最简单、最初...
2020-04-15 00:49:43
128
原创 前端面试题解密：经典算法之冒泡算法（ES6版）及优化
前言随着前端的飞速发展，前端业务开发给前端工程师提出了更高的要求，因而算法题也越来越高频次的出现在前端面试中。有很多的小伙伴找胡哥苦诉，在前端实际开发中（除了涉及游戏开发方面），算法使用有很多吗？大厂的面试是故意要自我标榜下吗？其实不然，考核算法还是相当有必要的，来来来，让胡哥给你拯救世界的理由，哦，不，是考核算法的理由。为啥要考算法？算法是通用技能，包含了诸多逻辑和相关的技术点，优秀的算...
2020-04-13 07:38:26
829
原创 前端经典面试题解密：JS的new关键字都干了什么？
前言new关键字在实例化获取对象时都做了什么？是一道经常出现在前端面试时的问题。如果只是简单的了解new关键字是实例化构造函数获取对象，是万万不能够的。更深入的层级发生了什么呢？同时面试官想从这道题里面考察什么呢？下面胡哥为各位小伙伴一一来解密。一、new关键字new关键字的作用：通过new关键字实例化构造函数，获取对象。说一千道一万，不如来段代码看一看// 定义构造函数function...
2020-04-08 08:46:09
240
原创 前端经典面试题解密-add(1)(2)(3)(4) == 10到底是个啥？
前言前端的小伙伴在面试的时候，几乎都会遇到一道这样的面试题： add(1)(2)(3)(4)输出结果为10。在第一次看到这道面试题的时候，很多小伙伴感到了迷茫！借用王宝强在《人在囧途》中的表演：啥啥啥，这写的都是啥？下面胡哥为各位小伙伴带来这道题的揭秘。一、核心点-基础函数的变种-函数柯里化我们从0开始，一点点儿的观察。add(1)(2)(3)(4)输出的值怎么成为10，很简单，大家都明白是...
2020-04-03 10:00:24
1467
原创 JavaScript模块化-CommonJS、AMD、CMD、UMD、ES6
前言：模块化开发需求在JS早期，使用script标签引入JS，会造成以下问题：加载的时候阻塞网页渲染，引入JS越多，阻塞时间越长。容易污染全局变量。js文件存在依赖关系，加载必须有顺序。项目较大时，依赖会错综复杂。引入的JS文件过多，不美观，且不易于管理。一、CommonJS规范CommonJS Modules/1.0规范，服务器端规范。Node.js推广使用。该规范的核心是...
2020-04-01 22:47:59
849
原创 关于面试题：[1, 2, 3].map(parseInt)问题的剖析
一、前言最近有小伙伴在公号中咨询了胡哥这道面试题，窃以为是比较有意思的一道面试题，于此分享给各位小伙伴。先把答案给了各位，和你理解的一样吗？！[1, 2, 3].map(parseInt) // [1, NaN, NaN]如果你答案你都明白，请出门左转：React源码/原理了解一下。二、剖析这道面试题，本身并不复杂。不能正确回答问题的小伙伴，大多数集中于对parseInt这个函数的不了...
2020-01-04 14:49:24
1219
原创 浅析API和SDK
前言最近有小伙伴咨询胡哥关于API和SDK的概念以及区别，今天给大家来阐述下我的理解，手动微笑.gif。API1. 定义API（Application Programming Interface， 应用程序编程接口）是一些预先定义的函数，或指软件系统不同组成部分衔接的约定。目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。以...
2019-12-14 20:31:38
357
原创 胡哥一分钟课堂第0002期 - CDN（内容分发网路）
前言CDN的中文全名是内容分发网络，其功能为将内容“发布”到离用户最近的服务器上，有效的避免网络拥塞（越远的距离越容易遇到拥塞）。CDN能力1. 静态加速能力通过本地化缓存加速能力给用户提供一个就近访问的高性能访问架构，消除由用户地域差异而导致的用户体验不一致，提供不同地区用户的相对一致的高性能访问体验。2. 卸载源站能力CDN将资源缓存在它的服务器上，访问是在用户和CDN之间进行的，...
2019-09-29 16:40:11
936
原创 基于@vue/cli 3.x的从0到1搭建Vue项目的实践
定场诗守法朝朝忧闷，强梁夜夜欢歌，损人利己骑马骡，正直公平挨饿。修桥补路瞎眼，杀人放火的儿多，我到西天问我佛，佛说：我也没辙！概述Vue官方的脚手架工具Vue Cli有了一次较大的更新，相比于2.x版本，新版本3.x中对项目的搭建，相关包、插件的安装都有了新大的不同。本文即立足于此，选择@vue/cli 3.x版本的脚手架工具，动手实践从0到1搭建Vue项目，包含了项目的初始...
2019-09-25 15:31:51
921
原创 基于@vue/cli 3.x的从0到1搭建Vue项目的实践
定场诗守法朝朝忧闷，强梁夜夜欢歌，损人利己骑马骡，正直公平挨饿。修桥补路瞎眼，杀人放火的儿多，我到西天问我佛，佛说：我也没辙！概述Vue官方的脚手架工具Vue Cli有了一次较大的更新，相比于2.x版本，新版本3.x中对项目的搭建，相关包、插件的安装都有了新大的不同。本文即立足于此，选择@vue/cli 3.x版本的脚手架工具，动手实践从0到1搭建Vue项目，包含了项目的初始...
2019-09-25 15:22:24
194
原创 胡哥一分钟课堂第0001期 - Hybrid App（混合开发APP）
前言Hybrid APP 即混合开发APP，今天胡哥和大家一起认识Hybrid App。目前APP的开发方式有三种：原生APP、Web App、Hybrid APP（混合开发APP）一、原生APP即IOS（Objective-C等）、Andriod（Java语言）使用原生语言开发的应用。优点：具备了调用设备的各种能力（如摄像头、短信、GPS、蓝牙、文件）以及优秀的性能体验。缺点...
2019-09-22 14:00:19
425
原创 前端性能优化之白屏时间
定场诗曲木为直终必弯，养狼当犬看家难；墨染鸬鹚黑不久，粉刷乌鸦白不天。蜜饯黄莲终需苦，强摘瓜果不能甜；好事总得善人做，哪有凡人做神仙。前言该篇文章会为您分享在前端性能优化中非常重要的一环-白屏时间，将从白屏时间的概念、重要性以及白屏的过程一一进行阐述，同时提供性能优化的策略与实践。一、概念白屏时间：即用户点击一个链接或打开浏览器输入URL地址后，从屏幕空白到显示第一个画面的时间...
2019-09-17 19:03:36
2481
原创 重读《学习JavaScript数据结构与算法-第三版》- 第6章 链表（一）
定场诗 伤情最是晚凉天，憔悴厮人不堪言；邀酒摧肠三杯醉.寻香惊梦五更寒。钗头凤斜卿有泪，荼蘼花了我无缘；小楼寂寞新雨月.也难如钩也难圆。 前言 本章为重读《学习JavaScript数据结构与算法》的系列文章，该章节主要讲述数据结构-链表，以及实现链表的过程和原理。 链表 链表，为什么要有这种数据结构呢？当然，事出必有因！ 数组-最常用、最方便的数据结构，...
2019-08-25 23:39:46
982
原创 重读《学习JavaScript数据结构与算法-第三版》- 第5章 队列
定场诗 马瘦毛长蹄子肥，儿子偷爹不算贼，瞎大爷娶个瞎大奶奶，老两口过了多半辈，谁也没看见谁！ 前言 本章为重读《学习JavaScript数据结构与算法-第三版》的系列文章，主要讲述队列数据结构、双端队列数据结构以及队列相关应用。 队列 队列是遵循先进先出（FIFO）原则的一组有序的项。队列在尾部添加元素，并从顶部移除元素。最新添加的元素必须排在队列的末尾。现实中常...
2019-08-20 16:13:48
486
原创 重读《学习JavaScript数据结构与算法-第三版》- 第4章 栈
定场诗 金山竹影几千秋，云索高飞水自流；万里长江飘玉带，一轮银月滚金球。远自湖北三千里，近到江南十六州；美景一时观不透，天缘有分画中游。 前言 本章是重读《学习JavaScript数据结构与算法-第三版》的系列文章，本章为各位小伙伴分享数据结构-栈的故事，请让胡哥带你走进栈的世界 栈 何为栈？栈是一种遵从后进先出（LIFO）原则的有序集合。 新添...
2019-08-19 09:40:51
353
原创 重读《学习JavaScript数据结构与算法-第三版》- 第3章 数组（二）
定场诗 守法朝朝忧闷，强梁夜夜欢歌；损人利己骑马骡，正值公平挨饿；修桥补路瞎眼，杀人放火儿多；我到西天问我佛，佛说：我也没辙！ 前言 读《学习JavaScript数据结构与算法》- 第3章 数组，本小节将继续为各位小伙伴分享数组的相关知识：ES6数组的新功能。 一、ES6数组新功能 ES5和ES6数组新方法 for...of 迭代...
2019-08-16 15:30:17
308
原创 Node.js爬虫实战 - 爬你喜欢的
前言 今天没有什么前言，就是想分享些关于爬虫的技术，任性。来吧，各位客官，里边请... 开篇第一问：爬虫是什么嘞？ 首先咱们说哈，爬虫不是“虫子”，姑凉们不要害怕。 ## 开篇第二问：**```爬虫```**能做什么嘞？来来来，谈谈需求**产品MM：**1. 爱豆的新电影上架了，整体电影评价如何呢？2. 暗恋的妹子最近又失恋了，如何在她发微博的时候第一...
2019-08-15 16:33:41
930
原创 重读《学习JavaScript数据结构与算法-第三版》- 第3章 数组（一）
定场诗 大将生来胆气豪，腰横秋水雁翎刀。风吹鼍鼓山河动，电闪旌旗日月高。天上麒麟原有种，穴中蝼蚁岂能逃。太平待诏归来日，朕与先生解战袍。 此处应该有掌声... 前言 读《学习JavaScript数据结构与算法》- 第3章 数组，本节将为各位小伙伴分享数组的相关知识：概念、创建方式、常见方法以及ES6数组的新功能。 数组 数组是最简单的内存数据结构...
2019-08-14 16:08:20
1043
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人