- 博客(74)
- 收藏
- 关注
原创 深度解读Promise.prototype.finally
由一个问题引发的血案:手写源码实现Promise.prototype.finally。我们知道,对于promise来讲,当状态敲定,无论状态兑现或拒绝时都需要调用的函数,可以使用Promise.prototype.finally的回调来实现。那么如何手写实现Promise.prototype.finally呢?问题恐怕并不很简单,本文主要做finally的细节和实现做一些详细的解读。
2023-08-22 18:11:35 741
原创 深度解读thenable
在学习promise时,我们经常会遇到thenable一词。关于thenable,目前的资料解读不够通俗易懂,又或者脉络不够清晰,本文主要对thenable进行详细剖析,以便各位参考。笔者希望你能够仅凭这一篇文章,便能深度掌握该知识点。
2023-08-22 11:29:59 346
原创 当面试官让你手写深拷贝,是在考察什么
在面试中,偶尔会遇到手写深拷贝的问题,这是一道经典的手写题,主要考察了些什么呢?本文试图一层层的剖析,让你豁然开朗。
2023-04-02 17:56:18 855 1
原创 当面试官让你手写flat,是在考察什么
在面试者中,偶尔会遇到手写flat实现的面试题,如果基础不牢,或者没有准备,就容易挂。那么,这道典型的手写题,主要考察了些什么呢?本文一层层地剖析,让你豁然开朗。
2023-04-01 19:26:27 974
原创 当面试官让你手写防抖、节流时,是在考察什么
即达停止触发后再执行一次的效果。而对于非最后一次的触发,定时器都会被清除掉。其六,如果只触发一次,那么同样不是立即执行,而是在剩余时间之后执行一次。
2023-04-01 16:47:33 777 2
原创 前端响应式设计漫谈
当前,响应式开发已经深入前端开发领域,几乎成为C端界面开发的标配。前端开发者不得不更多考虑界面的响应式特性,以使界面具有更良好的设备适配特性、更一致的用户体验。
2023-03-19 10:36:17 435
原创 前端如何丢掉你的饭碗?
对于后端而言,我们常有“删库跑路”的说法,这说明后端的操作对于信息系统而言通常影响很大,可以轻易使信息系统宕机、崩溃,直接导致项目失败。作为前端程序员,我们似乎自己也认为前端相比于后端,代码的安全风险更低。一种常见的看法是,我们可以这样开玩笑,但作为一名前端开发者,良好的安全意识仍然是必需的,事实上一些问题不仅仅作用于显示层面。更现实一些的层面是,你如何确保你的代码运行稳定,不会给公司、客户带来损失,进而丢掉自己的饭碗?这不是危言耸听,如果意识缺乏,前端是有可能引发重大问题,丢掉自己的饭碗的。
2023-03-17 21:38:11 4434
原创 彻底搞懂UTC时间
我们可能经常听说UTC时间这一名词,但不知道它代表了什么意思,什么时候该用,前后端通信时使用UTC时间意味着什么。为什么要使用UTC时间对于前端同学,即便经常使用moment进行各种时间转换,也可能并不清楚UTC时间是什么,因为如果不涉及到跨国家和地区,实际上的确用不到UTC时间。UTC时间的英文全称:Universal Time Coordinated,中文名称:协调世界时。我们可以通俗的理解为,这个时间是全世界通用的,即全世界都公用的一个时间。这样,就很容易理解了,UTC时间实际上反映了
2022-01-22 15:50:55 30102
原创 TypeScript精髓解读:接口
本文的价值在于,基于官方文档,作一种更为通俗和易于理解的解读,使得读者能够用最小的时间和精力成本,把握TypeScript接口的精髓。第一章什么是接口我们知道在TypeScript里,需要对各种值进行类型检查。为了实现对类型的检查,我们引入了接口。也就是说,接口实际上是一种约定,它约定了一种类型。用官方文档的说法,即接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。第二章不用接口可以做到吗我们很自然的想到,接口可以实现对类型约束和检查,那我们直接约束变量...
2021-08-30 20:00:47 312
原创 TypeScript精髓解读:基础类型
本文的价值在于,基于官方文档,作一种更为通俗和易于理解的解读,使得读者能够用最小的时间和精力成本,把握TypeScript基础类型的精髓。假设作为开发者的你,已经下了很多决心来学习TypeScript,可是你并没有恒心学下去,并且你感觉抓不住重点,不太喜欢查阅散乱的文档。譬如,一般而言,学习都会从基础类型开始,每当你查看官方文档的时候,你都没有耐心读下去。那么你可以试试看看这篇文章——作者的总结。第一章你知道TypeScript分为哪些基础类型吗我们可以把TypeScript的基础类型分为两类.
2021-08-28 19:10:59 313 2
原创 vscode中eslint和prettier格式化规则冲突的简要解决方案
情景再现在使用vscode时,一般会使用prettier作为默认格式化程序。有可能出现一种情况,即:使用prettier格式化代码后,并不符合项目eslint的规则。这时违背eslint规则的代码下方会出现红色标波浪线。假使,我们使用eslint来格式化代码,问题是:eslint的格式化功能较弱,比如针对jsx、html的格式化就远不如prettier,代码会显得很丑陋。这样,出现两难情况,使用prettier或者eslint任何一种都不行。那么,是否可以使prettier与eslint
2021-02-07 00:04:25 3079
原创 谈谈前端页面式流程实现的坑及开发建议
在某些业务流程中,需要一步步的引导用户进行每一步操作。这时,假设只是静态页面,那么非常简单。但在某些情况下,用户的每一步操作都设计到许多交互,这时情况就变得相当复杂。开发者面临的一个问题是:如何简化页面式流程的逻辑?之所以说简化,是因为这时,需要考虑的问题非常多,且很难考虑周全,维护性也将是巨大的挑战,这些问题包括:跨页面传递数据的实现方案是什么?刷新页面时是否保留数据?浏览器前进/后退行为,开发者无法控制,如何防止前进/后退产生的bug?从url进入是否允许访问?何时清除掉多余数据
2021-02-04 16:07:13 365
原创 React妙用useRef解决卸载时难以获取最新state问题
适用场景假设我们有这样的需求:从后端接口拉取数据之后,如果报错码是500001,保则存当前页面数据,并跳转页面,否则不保存数据并且不跳转。state能解决问题吗显然,我们需要在组件中存储一个变量,用于标志在组件卸载时是否需要保存数据。最为常规的是,我们可以使用useState来定义一个变量。const [isRemain,setIsRemain] = useState(false);当报错500001时,我们可以将其设置为true,然后跳转:setIsRemain(true);repl
2021-02-04 14:33:58 2022 5
原创 设备像素与CSS像素关系的通俗解说及应用
设备像素与CSS像素,作为前端开发者,可能会对这两个概念感到困惑。css已经比较麻烦了,我们为什么还要用这两个概念来加重负担呢?他们是否有足够的应用场景?问题引出让我们先看两个经常发生在我们周围的案例:当我们把window10中的缩放与布局设置为超过100%时,电脑中所有图标、文字、界面都将比100%时变得更粗,原因是什么?另一个案例是:当我们对网站做移动端适配时,通常会采用750设计稿,即UI设计师的设计稿中页面宽度为750px,我们写css时却要按照375px来写。这就产生一个问题:为
2020-08-22 13:54:33 538
原创 CSS开发技巧(六):固定间距等比两栏布局的实现
业务场景试想,我们需要这样一种两栏布局:两栏高度固定,中间的间距固定为20px,左栏的宽度固定为父元素宽度的100%减去20px再乘以40%;右栏的宽度固定为父元素宽度的100%减去20px再乘以60%。我们是否真的需要这种布局呢?答案是肯定的。就UI设计图而言,往往只针对某种分辨率做了设计,当前端还原成设计稿时,不仅需要考虑设计图所示分辨率,还需要其他分辨率的缩放情况。当 UI设计图采用以上设计思路时,就需要前端用CSS来实现该效果。难点分析:多次运算calc不能实现我们可以用width:
2020-08-08 12:47:17 1188
原创 JavaScript使用H5 FileReader和Image对象获取本地图片的分辨率
业务场景试想这样的应用场景:当我们上传本地图片时,需要校验图片的分辨率,只有水平分辨率不大于1920、垂直分辨率不大于1080的图片才允许上传。后端处理方案显然,我们是可以将分辨率校验交给后端的,这样的问题在于,后端校验需要前端先发起ajax请求,并且后端校验也需要一定的处理时间,就整体体验而言,用户等待时间较长,不利于用户体验。因此还是推荐前端校验,直接给出结果。难点所在对于type='file'的input框,在其change事件中,我们可以直接拿到file对象,包含了name、siz
2020-05-15 17:27:45 5579 1
原创 vue图片懒加载插件vue-lazyload监听加载失败事件的解决方案
对于vue项目而言,图片懒加载是一个常见的图片加载方案,可以优化用户体验,而vue-lazyload则是一个广泛使用的插件。 对于某些业务场景,我们需要监听图片加载失败事件,而后进行相应的处理,然而无论是官方文档还是网络上的解决方案都不直观甚至有错误,开发者不经过一番探索,很难知道如何处理,甚至怀疑该插件是否能监听加载失败事件。笔者经过一番探索,所幸的是,发现该问题终究是能够解决的,现将相关解决方案分享如下。业务场景试想这样的场景:在img标签上,使用v-lazy绑定的图片的地址。图片的地址可能
2020-05-15 09:47:38 4665
原创 axios封装技巧合集:让你的axios更好用的“七种武器”
axios如何封装才好用前端项目中现已广泛使用axios来进行ajax请求的处理,一个很重要的问题是:如何对axios部分进行设计,才能使得接口调用简洁,并且能够应对各种复杂的情况。就笔者参与维护的不少项目而言,axios的封装似乎过于复杂,并且没有发挥出axios的强大功能。好用性虽则每个开发者有不同的见解,然则逻辑的清晰与否、调用是否复杂、是否易于维护等则是比较容易有一致看法的。本...
2020-04-07 22:14:12 779
原创 webpack4.x下性能优化:利用dll(动态链接库)优化打包速度、缩小打包文件体积
你会webpack性能优化吗即便我们已经学会了webpack的基本配置,这并不代表我们使用webpack搭建的项目没有优化的空间,事实上,优化webpack项目是一门很深的学问。另一方面是,我们不必因为感到webpack本身很难,就不再对webpack项目考虑优化问题,而将之束之高阁,任何人都可以对webpack项目的一些常见方面进行优化,这似乎是比较简单和容易的。现在,本文将要讨论是一个比较...
2020-03-29 18:13:35 2323 2
原创 vue项目妙用scss mixin实现样式全编程式风格
对于vue项目的样式部分,有多种风格,这将取决于框架搭建人员的设计思路。本人在vue项目中以使用sass(scss)为主,经探索,现研究出一种封装方案,可以快速的进行样式开发。这种方案的优点是:极大节省样式代码的行数,简洁。原先需要4-5行的代码仅需一行即可,即便是极端情况下也不会增加代码行数。样式代码被分成了几类,清晰易读。可扩展性强,要增加样式只需给mixin增加参数。可维护性强,很...
2020-03-27 22:16:18 4410
原创 CSS开发技巧(五):妙用padding实现元素的高度和宽度保持比例
在前端开发中,我们可能需要实现一定的适配,其中常见的一个需求是:元素保持高宽比,等比例进行缩放。思路分析现在,我们来分析这一需求:由于需要缩放,宽度和高度都不能写成固定值。要保持高宽比,元素的高度和宽度中有一个属性需要根据另一个属性计算得到,那么先确定高度还是宽度呢?显然,应该先确定宽度。我们的前端开发中一般对于页面高度不会有过多的要求,相比而言宽度显得更为“珍贵”,因此应该先确定...
2020-02-29 14:17:57 1301
原创 微信浏览器中的全屏异常、应用切换异常问题探究
现象在微信浏览器中,有两种情况容易引发异常:1、微信浏览器中某一个元素处于全屏时,这时微信出现弹窗;2、微信浏览器某一个元素处于全屏时,切换到其他应用,微信后台运行 一段时间再切回来;这时我们的页面将处于一个异常状态,既非全屏也非退出全屏状态,页面的退出全屏操作将失效,无法使网页恢复到初始状态,除非刷新微信浏览器,严重影响用户体验。难点探究这两种情况都有一个共同的特点:1、异...
2020-01-06 22:08:11 924
原创 JS实现元素的全屏、退出全屏功能
在实际开发中,我们很可能需要实现某一元素的全屏和退出全屏功能,如canvas。所幸的是,js提供了相关api用来处理这一问题,只需简单的调用requestFullScreen、exitFullScreen即可。但这两个api一般而言需要考虑其兼容性问题,那么就需要额外封装一下。笔者参考相关资料,结合自身实践,最终整理出以下封装函数,理念虽然没有特别之处,但这种封装的写法却属于一种微原创。以下经过...
2019-12-11 09:46:18 862
原创 Vue集成tinymce富文本编辑器并实现本地化指南(2019.11.21最新)
tinymce是一款综合口碑特别好、功能异常强大的富文本编辑器,在某些网站,甚至享有“宇宙最强富文本编辑器”的称号。那么,在Vue项目中如何集成呢?本人参考了众多网络资料进行配置,竟然没有一篇文章能够完全吻合,并且各个教程显得极其繁琐。 本人不认为配置tinymce需要如此复杂,并认为很多教程的一些步骤是完全冗余的,因此重新参考官方教程,反复实践,终究得以攻克。现将配置的细节、一些极其关键的要...
2019-11-21 22:20:16 2207
原创 原生JS中获取位置的方案总结
clientY: 鼠标当前位置 相对于 浏览器可视区域顶部 的位置;pageY: 鼠标当前位置 相对于 文档顶部的位置;screenY: 鼠标当前位置 相对于 屏幕顶部的位置;疑点1:clientY和pageY的区别?当文档高度和浏览器可视区域高度一致时,两者的取值是相同的。文档高度和浏览器可视区域高度不一致时,页面将出现滚动条,这时:(1)若滚动条尚未滚动,则浏览器可视区域...
2019-10-28 14:33:33 247
原创 material UI中withStyles和makeStyles的区别
在material UI中,withStyles和makeStyles是经常使用的两个用于封装样式的函数。对于刚使用material UI的开发者而言,可能不太清楚这两者的区别。 本文简要探究这两者之间的功能和使用上的差异。差异一:内部是否可以使用props的差异withStyles内部不可以使用props。也就是说你的样式不能与你的props有关联。如果有关联,withStyles...
2019-10-27 22:38:18 4918
原创 material UI中子组件样式修改的几种方案研究
material UI是一个流行的与React配套的前端UI框架,对于部分开发者而言,可能会不太清楚其中样式修改的方案和技巧,为此而焦头烂额,本文主要就自己的一些开发技巧进行总结,以期对各位开发者有所帮助。需要说明的是,本文的案例都是使用hooks方式,读者可自行针对class方式进行类推和实践。一、子组件根元素:withStyles+className实现修改<div classN...
2019-10-27 22:15:42 1618
原创 解决material UI中弹窗(dialog、popover等)内容被遮挡问题
在material ui中有几种弹出层,比如:dialog、popover等,这些弹出层都会遇到的一个公共问题是:假如弹出层中的内容变化了,弹出层的位置并不会重新定位。这样,假如一开始弹出层定位在浏览器底部,当弹出层的内容高度增加,可能导致弹出层的一部分内容显示在浏览器视口之外。常见思路我们可能会设想通过设置anchor等来解决该问题,但anchor决定的是弹出层的初始位置,至少本人的探...
2019-10-15 11:31:52 1705
原创 Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能
业务场景在使用Element UI的Table组件时,常常面对这样的业务需求:表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能。并且,表格下方实时统计已勾选数据的项数、重量、金额等。“弯路”分析我们可能会走“弯路”,使用过于复杂的逻辑去实现。常见的弯路是:在Vue的data里面存储已勾选数据的数组,而后基于table的s...
2019-10-13 14:03:35 5712 2
原创 ElementUI表单验证攻略:解决表单项启用和禁用验证的切换,以及动态表单验证的综合性问题
试想一种比较复杂的业务场景:表格(el-table)的每一行数据的第一列是勾选框,最后一列是输入框。当某一行的勾选框勾上时,启用该行的输入框,并开启该行输入框的表单验证;取消该行的勾选框,则禁用该行的输入框,并禁用该行输入框的表单验证。思路分析动态表单验证这里显然是一个数据遍历产生的动态表单验证问题,并且与el-table相结合。动态表单验证唯一的难点在于表单项的prop属性的设置问题...
2019-10-13 14:03:16 10979 5
原创 Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转
问题引入试想这样一个业务场景:在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功,则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息。难点所在需要注意的是,这里并没有单独的接口用于判断用户是否通过校验,而是若用户通过校验,接口就直接返回了用户需要的详情信息,未通过校验则不会返回详情信息并报错。常见方案问题分析(一)用户点击按钮后直接...
2019-10-13 14:03:09 14720 2
原创 axios的使用小技巧:如何绕过字符串拼接,直接传递对象
Vue.js官方推荐使用axios作为发送http请求的工具,在使用axios中,有些小技巧是不容易发现的。当我们不知道这些技巧时,我们可能会使用其他“奇技淫巧”,比如,我们很容易会忽略axios默认支持get请求传递对象的事实,然后采用手动拼接、第三方库、或手动编写函数的方式将对象转换为查询参数,拼接成最终的url地址。 事实上,axios是支持直接传递对象的,根本无需做费神的相关拼接工作,...
2019-10-13 14:02:51 5297
原创 Angular 7开发环境配置
目录前言搭建项目创建路由模块导入设置路由前言 angular是目前主流的前端三大框架之一,它的上手稍有些难度,需要理解的概念很多。本文主要用通俗易懂的语言叙述angular开发环境的基本配置,对一些不易理解的概念进行略去,对一些比较重要的概念会用通俗的语言进行讲解。 在开始使用angular之前,你可能需要一点点typescript的基础,即便没有,也不是太大的问题,本文并不涉...
2019-10-13 14:02:38 4197
原创 element UI排坑记(一):判断tabs组件是否切换
一、问题描述在element UI的tabs组件中,假设需要在tab切换时执行某个函数,有什么方案?二、问题举例有两个tab,tab1和tab2,两个tab都有一个el-select组件,分别是el-select1和el-select2。el-select1和el-select2绑定了同一个字段,但是两者的下拉选项不相同。在切换tab时将导致以下问题:1. 显示tab1中内容时,a的值是...
2019-10-13 14:02:28 13137 1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人