前端
文章平均质量分 78
奇喑
长风破浪会有时,直挂云帆济沧海!
展开
-
几种前端内联绑定事件的方式
文章目录前言问题描述问题分析扩展结语前言又是好久没写博客了,这期写一个很基础但是也是很细节的一个前端小知识:前端内联绑定事件。问题描述先来看以下这段代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="原创 2022-04-21 20:11:11 · 2182 阅读 · 2 评论 -
透析极大极小搜索算法和α-β剪枝算法(有案例和完整代码)
结合具体案例和算法代码带你彻底弄懂极大极小搜索算法和α-β剪枝算法原创 2022-02-17 19:50:42 · 7363 阅读 · 16 评论 -
多层异步之最优解
文章目录前言问题描述问题分析有序性耗时更少小节结语前言好久没写博客了,转眼间这是2022年的第一篇博客,相信作为前端开发者的大家肯定对promise一定不会陌生,那么这期我再分享一个promise相关的进阶问题。问题描述首先,我们需要进行一组异步请求,然后当每个请求回来后会对当前的结果再进行一组异步操作,当上一次异步操作的结果返回后最后再进行一次异步操作得到最终的结果。这也就是多层异步嵌套。是不是感觉有点绕,那接下来,我就用结合代码示例来进行具体问题描述。function main() {原创 2022-02-07 11:10:49 · 1532 阅读 · 0 评论 -
前端页面阻尼效果实现
文章目录前言阻尼效果实现思路尝试方案一优化思路三层双滑动窗口模型结语前言不知道大家是否知道阻尼效果,这个效果只能在移动端才能实现,因为它的本质是touch事件以及scroll事件的某些行为。相信大家应该都用过知乎吧,在知乎里两个页面之间就有一个阻尼层。(大家可以打开手机知乎体验一下)阻尼效果那么究竟阻尼效果是什么呢?简单来说,就是界面滑动到了最底部或最顶部仍可以比实际的内容多滑动一段距离然后回弹的弹性效果,并且在页面的其它地方操作时依旧是非常流畅的滚动效果。实现思路既然知道了目标效果,那接下原创 2021-12-26 16:41:07 · 1856 阅读 · 3 评论 -
双流瀑布图
文章目录前言思路flex布局flex布局进阶版绝对定位/font>结语前言随着前端的发展,相信瀑布图大家应该都不陌生,也许你不一定了解但是你一定见过。用一张蘑菇街的官网照片:这些都是经典的瀑布图布局,只不过这些他们使用的是多流瀑布图,而这篇博客我带着大家一起来看看稍微简单一点的双流瀑布图的实现,不管是多流还是双流,其底层原理都是一致的。思路我们先来看一个已经实现好的一个双流瀑布图的样例:首先,一种简单且比较直接的想法是直接使用css布局:flex布局。flex布局观察双流瀑布图,原创 2021-11-28 21:25:52 · 476 阅读 · 0 评论 -
动画组件之BigText
文章目录前言实现CSSTransition组件前言好久没更新博客了,这段时间算是给自己放了一个小假吧,这期来讲解如果用原生CSS+JS实现一个bigtext的动画特效。(看过我上期react版本的中国象棋的伙伴应该会记得那里面就有一个使用react CSSTransition组件实现的一个bigtext的动画效果,这不过这次我们使用原生CSS和JS进行实现。)中国象棋实现CSSTransition组件第一步我们首先得使用原生JS实现一个CSSTransition组件,那么应该怎么实现呢?大家不妨原创 2021-11-08 20:58:57 · 599 阅读 · 0 评论 -
中国象棋(react hooks版)
文章目录前言功能展示新增模块功能搭建项目框架配置React Router配置React Store配置i18n配置主题色React动画React ColorPicker打谱记录单元测试核心功能优化落子音效dom解耦小结结语前言它终于来了。终于来了,在第一版的基础上,历时近两个月终于完成react版本的中国象棋,这个版本使用的技术栈包括react hooks+ts+sass+antd(本来还准备使用redux,但是嫌麻烦,就没用使用)。这次主要是时间消耗是在hooks以及ts的使用上,毕竟从某种意义上来说原创 2021-09-30 22:52:37 · 1756 阅读 · 11 评论 -
前端多线程之Worker
文章目录前言Worker的使用流程简单的demodemo的使用场景结语前言首先,我们都知道前端js所在的运行环境是一个单线程环境,即同一时刻只能执行一段代码,无法实现并行处理的操作,比如异步编程。但是这并不绝对,Worker 可以使得我们创建另外一个后台线程为我们服务,相信大多数朋友可能对于Worker接口都比较陌生,大家可以先去MDN官网查看文档:Worker文档Worker的使用流程主线程创建Worker对象给Worker对象绑定message监听事件,监听新线程传递的信息给新线程的sel原创 2021-09-30 16:26:32 · 4037 阅读 · 0 评论 -
浅谈前端路由的原理
文章目录前言实现原理hashhistory如何性能优化路由与Tabs小结结语前言前端路由相信大家都不陌生,对于现在主流是SPA(单页面应用)框架,前端路由显得格外重要,比如react的react-router以及vue的vue router等等。它们出现的主要目的是为了提高性能以及用户体验。实现原理hash使用案例:1 http://10.0.0.1/2 http://10.0.0.1/#/about3 http://10.0.0.1/#/concat在HTML5之前,前端路由就是使用h原创 2021-09-13 12:02:17 · 573 阅读 · 0 评论 -
手撕Promise之静态API
文章目录前言Promise.all()API功能思路分析代码Promise.any()Promise.allSelect()Promise.race()结语前言Promise有六个常用的API,包括Promise.resolve()、Promise.reject()、Promise.all()、Promise.any()、Promise.allSelect()以及Promise.race()。前两个API很简单,这里我就过滤掉了,这篇博客主要是实现后面四个API,至于为什么会突然想到去实现这玩意,问就是原创 2021-09-04 20:54:20 · 571 阅读 · 0 评论 -
一道透解promise与宏/微任务的面试题
又到了一年一度的七夕节,如果大家没有去撒狗粮,那不妨让我可以带着你们一起去遨游消息队列与宏/微任务的世界。首先,下面这道题是今年某大厂原题的升级版,目的是为了尽可能把所涉及的知识点全部都覆盖到,从而就能够一网打尽!原创 2021-08-14 23:06:42 · 857 阅读 · 6 评论 -
2021前端面经(一)
文章目录前言面试题答案结语前言有近一个月没更新博客了,最近一段时间都在忙于面试和复习。第一次体验社招面试,感觉确实要比想象中难得多(估计和近些年越来越卷有一定的关系)。这次面试目的不全是为了跳槽,一方面可以借此了解一下今年面试的行情,另一方面也能看看自己在市场上究竟是什么“价位”。在这近一个月的社招面试中,小厂、中厂、大厂我都体验过,而之所以说比想象中要难得多,其主要原因有二,一方面由于不同公司的方向不一样所以其询问的侧重点也不太一样,而对于求职者的自己来说最大的感受就是总体上被询问的知识面很广。毫不原创 2021-08-09 16:26:35 · 599 阅读 · 0 评论 -
使用原生js实现element-ui的message组件
文章目录前言搭建效果环境创建html文件创建css文件绑定按钮事件创建messaage组件construct()setOption(options)完整的js代码小结结语前言使用vue的朋友应该或多或少都知道element-ui组件吧,这篇博客我将使用原生js实现一个“低配”版本的message组件。开始前先给出element-ui message组件的网址链接,不论是否有使用过,大家都可以参照的对比。目标message组件搭建效果环境为了演示实现效果,所以我们必须得需要一个完整的运行环境,以如原创 2021-06-07 21:34:38 · 5302 阅读 · 3 评论 -
自定义合并table行/列
文章目录前言处理思路数据预处理创建目标表格结语前言我们有如下的一组原始数据: const data = [ ['阶段', '年份', '投入费用', '投入费用', '合计'], ['构建期', 2012, 1212, 1300, 29], ['构建期', 2013, 154, 154, 29], ['运营期', 2014, 154, 154, 484] ];用原生table将其绘制出来原创 2021-05-08 23:06:11 · 1657 阅读 · 0 评论 -
forEach使用之Illegal continue/break statement
文章目录问题描述再现forEach扩展(return和异常)结语问题描述不知道大家在平时写代码的过程中是否遇到以下的报错信息SyntaxError: Illegal break statementSyntaxError: Illegal continue statement: no surrounding iteration statement以上的报错原因就是非法使用break/continue关键字,具体点说就是这两个关键字应该在循环体里面使用。乍一看,感觉没毛病很正常,哪个憨憨会把这两个关键原创 2021-05-06 23:01:19 · 1473 阅读 · 1 评论 -
浏览器工作原理之从URL到页面显示
文章目录前言从URL到HTML从HTML到DOM树从DOM树到CSSOM树从CSSOM树到布局树从布局树到渲染显示结语前言这篇博客,我使用node.js环境在代码逻辑层面描述浏览器从接收一个URL到渲染出一个网页这里面究竟都发生了什么。我们知道在浏览器中把一个URL渲染出一个网页可以简化为五个步骤:从URL到HTML从HTML到DOM树从DOM树到CSSOM树从CSSOM树到布局树从布局树到渲染显示从URL到HTML这一步我们是建立在HTTP请求的基础上,即服务器发送一个HTTP的U原创 2021-05-05 22:24:15 · 455 阅读 · 3 评论 -
一道工作中遇到的异步获取数据问题
文章目录问题描述解决问题问题升级结语问题描述先看下面一段代码:function main(n) { for (let i = 1; i <= n; i++) { request(`第${i}个请求`, getRandomTime(500, 2000)); }}function getRandomTime(min, max) { min = Math.ceil(min); max = Math.floor(max); return Ma原创 2021-04-19 20:55:52 · 289 阅读 · 1 评论 -
基于原生js且非canvas实现的中国象棋(第一版)
文章目录前言棋盘与棋子棋盘棋子棋盘与棋子的交互主要的类文件棋子类棋盘前言本人从小就非常喜欢下中国象棋,学习编程后就一直想自己做一个中国象棋的前端游戏,现在终于有“机会”了。这是第一版的中国象棋,由h5+css3+原生js所实现(非canvas)。这个版本主要实现的功能包括:棋子的鼠标交互功能,每种棋子的落子规则,将军提示和游戏结束判断,悔棋功能,各种音效等等注:由于总代码量比较大,所以完整代码我放在github上,大家可以自己去阅读,这里我只挑选核心功能的代码进行讲解。源代码地址:完整代码游戏的原创 2021-04-09 21:21:45 · 1786 阅读 · 5 评论 -
table数据转换算法
文章目录前言构造dom元素将原始数据进行排序数据重组最终代码结语前言我们有如下的一组原始数据,现在我们需要在vue里使用原生table标签将其展示。 data: [ { paraValue: [ { canshu: "参数名称" }, { moren: "默认配置" },原创 2021-03-21 21:24:06 · 452 阅读 · 2 评论 -
js两种自定义修改对象属性的方式
文章目录前言Object.defineProperty()ProxyProxy校验器结语前言先看下面一段常规的object赋值代码:const people = { name: 'Rookie', age: 18};people.age = 20;// setpeople.age;// get现在我们想要自定义实现people的set和get,那么应该如何实现呢?下面我们介绍两种实现方式:Object.defineProperty(),ProxyObject.define原创 2021-03-16 22:42:25 · 3486 阅读 · 0 评论 -
一道工作中经常遇到的数据转换算法题
文章目录问题描述解决思路课后练习习题答案小结问题描述将原数据类型转换为目标数据类型。原数据类型如下:const list1 = [ { typeId: 1, off: '111,222', on: '333,444', }, { typeId: 2, off: '111,222', on: '333,444', }, { typeId: 3,原创 2021-03-06 21:52:39 · 398 阅读 · 2 评论 -
vue底层原理之实现简易版本vue框架
文章目录前言模块叙述Observer/DepWatchDirective(Compile)入口文件流程概述结语前言vue框架实现了数据的双向绑定,即Data和Dom之间的双向通信,这两者之间的通信则需要一个Directive来连接,即:表现得更复杂一点:模块叙述下面我结合一个具体的代码案例来介绍各个模块的功能以及最终的执行流程。Observer/DepObserver的作用为对传入的data设置了 getter 和 setter即为一个可以获取和修改的观察者。Dep 存在意义就是,他通过原创 2021-01-31 18:37:31 · 380 阅读 · 0 评论 -
js一行代码创建二维数组
文章目录前言正文结语前言使用js创建二维数组的方式有很多,最经典的莫过于使用for循环创建,相信大家都会此方法。下面我使用js原生API一行代码创建二维数组。正文Talk is cheap,show you my code:const arr1 = Array(3).fill(0).map(x => Array(3).fill(0));此代码应该也很好理解,初始化一个行列都为3且数值都为0的二维数组。看完代码肯定会有人有疑问,此创建方式总感觉有些复杂,为何不用下面更简单的方式来创建:原创 2021-01-29 18:40:35 · 3034 阅读 · 0 评论 -
解决父元素的padding对子元素的input失效问题
文章目录问题描述解决方案方案一方案二更多方案结语问题描述在一个含有padding的div元素中包含一个input标签和一个icon,但是input元素显示异常。(具体表现为父元素的padding对子元素的input失效)异常效果图:案例代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Taoism</title> <s原创 2021-01-16 10:53:04 · 1058 阅读 · 0 评论 -
js高级异步编程(并发请求)
1原创 2021-01-09 21:38:53 · 2173 阅读 · 0 评论 -
CSS gird布局
文章目录简介grid布局的常用属性grid-template-columns / grid-template-rowgrid-row-gap / grid-column-gapgrid-column / grid-row现场实操结语简介Grid布局是最强大的 CSS 布局方案。它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex 布局是轴线布局,只能指定"项目"针对轴线原创 2020-12-06 17:04:35 · 729 阅读 · 0 评论 -
react的高级技术点总结(二)
文章目录RefsRefs介绍何时使用 Refs创建 Refs访问 Refs小结受控组件与非受控组件受控组件非受控组件表单案例小结结语RefsRefs介绍我们知道react里面我们做操作的dom元素都是虚拟dom并不是真正网页上的dom元素,但是有时候我们确实需要操作真实的dom元素,那么此时就需要用到Refs。Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。何时使用 Refs下面是几个适合使用 refs 的情况:管理焦点,文本选择或媒体原创 2020-11-29 16:34:06 · 550 阅读 · 0 评论 -
react的高级技术点总结(一)
文章目录children propreact组件的生命周期方法componentDidMount()componentDidUpdate()componentWillUnmount()小结结语children prop我们知道在子组件通过props来获取父组件提供的数据,通过上篇博客的内容(react之jsx语法)我们知道props可以是一些很常见的基本数据类型。如果我们想在父组件给子组件传递一个动态组件,这个组件也可以直接作为props的一部分,但是往往不推荐这种做法,因为react提供了一种语法来满原创 2020-11-29 16:05:27 · 1061 阅读 · 0 评论 -
react之jsx语法
文章目录前言指定 React 元素类型React 必须在作用域内在 JSX 类型中使用点语法用户定义的组件必须以大写字母开头JSX 中的 PropsJavaScript 表达式作为 Props字符串字面量Props 默认值为 true属性展开JSX 中的子元素字符串字面量JSX 子元素JavaScript 表达式作为子元素函数作为子元素布尔类型、Null 以及 Undefined 将会忽略结语前言使用过react框架的朋友应该知道其使用的一些语法规格(jsx)与普通的js语法有一些差异,下面我罗列出一些原创 2020-11-22 17:56:17 · 870 阅读 · 2 评论 -
react中父组件与子组件间的通信
文章目录前言父组件向子组件传递数据父组件的参数作为子组件的props子组件使用connect获取数据子组件向父组件传递数据一个简单且很形象的案例父组件解析子组件解析小结结语前言相信很多刚开始接触react的朋友都没能完全的弄明白react父子组件间是如何进行行云流水班的数据通信,这其中的底层机制又是什么,相信通过此篇文章能够立竿见影的解答大家心中的疑惑。父组件向子组件传递数据在日常使用中父组件向子组件传递数据有两种方式:父组件的参数作为子组件的props,子组件使用connect获取数据父组件的原创 2020-11-15 15:40:44 · 1316 阅读 · 0 评论 -
2020前端面试题(一)
文章目录前言题目一解决思路解决代码题目二方案一前言在实际工作中我们也应需要保持有一颗居安思危的心,虽然有关算法模块的技术着实很难有用武之地,但是这并不影响我们去见识并学习一些非算法部分的面试题,从而做到知己知彼,方可心中不虚。题目一写一个 mySetInterVal(fn, a, b),每次间隔 a,a+b,a+2b,…,a+nb 的时间,然后写一个 myClear,停止上面的 mySetInterVal解决思路本题属于一道逻辑思维的编码题,不需要使用算法技巧。由于需要循环执行进而想到使用函数原创 2020-11-07 18:22:34 · 479 阅读 · 0 评论 -
如何快速的在项目中查找目标文件
文章目录问题描述解决方案vsCode全局文件搜索vsCode全局变量搜索devtools中Elements页面的蛛丝马迹devtools中React页面的蛛丝马迹结语问题描述对于一个完整陌生的大项目源码库,如何能够快速的找到自己心中预期的目标文件甚至是目标函数?这里我使用的开发工具是vsCode,项目是一个前端项目。(万变不离其宗,其它开发工具甚至是其它类型项目也可以找到类似的查找方法)解决方案vsCode全局文件搜索默认快捷键ctrl+p即可打开如下搜索界面:通过此方法我们可以通过文件名原创 2020-11-01 21:18:48 · 2711 阅读 · 0 评论 -
js异步实例之跨域获取图片
文章目录前言问题描述解决问题获取图片异步渲染结语前言我们知道js中有关异步编程的知识有很多,比如以Promise,await/async等系列的异步语法,以及XMLHttpRequest,fetch系列的js异步请求API。这篇博客我将以一个实际的应用案例来究竟如何使用异步编程来解决问题。(这里我不对这些异步语法以及异步API的使用作讲解,如果有对其不了解的读者可自行去mdn官方文档进行查阅学习。)问题描述现在我需要使用js代码来获取网络上一跨域的图片资源,并且需要在指定的时机将其渲染到页面上。图原创 2020-10-04 20:31:14 · 6098 阅读 · 0 评论 -
一道实际工作中遇到的算法题
文章目录前言问题描述解决思路完整代码结语前言虽然在实际工作(开发岗位)中几乎很难遇到让自己手写算法的情形,因为往往我们会有两种解决方案:拥有现成的算法api函数库供我们使用以及通过百度直接cv大佬们提供的现成算法代码。但是,有句古话说得好,常在河边走哪有不湿鞋,这不,天有不测风云,我就湿鞋了。问题描述问题很简单,给定一种格式的原数据集,通过某种算法将其转变为目标格式的数据集。下面,我给出一组实例数据:原数据集:const data = [ { id: 'Jack',原创 2020-10-03 19:55:19 · 482 阅读 · 0 评论 -
js死递归却不一定栈溢出
文章目录三个案例代码现象原因原因详解三个案例代码先看下面三种js代码:function foo() { foo() }foo()function foo() { setTimeout(foo, 0)}foo()function foo() { return Promise.resolve().then(foo)}foo()这三段类似死循环的递归代码都会导致栈溢出吗?结果是否定的,只有第一段函数代码会导致栈溢出。第二段代码会正确执行,第三段代码也不会导致栈原创 2020-09-23 20:33:04 · 906 阅读 · 1 评论 -
JavaScript中1+“2“的底层原理
首先,我们知道在许多其它语言中是不支持数字与字符串的相加,其结果会报错。而我们也知道JavaScript在这种情况下会进行隐式类型转换,1+“2”会变成“1”+“2”,最终结果为“12”。接下来,我们看看其背后的底层原理究竟是什么。以下面代码为示例:a+bV8(chrome的JavaScript引擎)会提供了一个 ToPrimitve 方法,其作用是将 a 和 b 转换为原生数据类型,其转换流程如下:先检测该对象中是否存在 valueOf 方法,如果有并返回了原始类型,那么就使用该值进行强制类原创 2020-09-10 20:36:19 · 2244 阅读 · 1 评论 -
jsArray常用API之替代传统fori循环
文章目录前言正文foreacheveryfilterfindmapsomereduce小结结语前言先看看下面这段代码:(重点关注两函数的实现方式,无需细看实现逻辑)function getAreaSale1(values, areas) { const areaSale = []; areas.forEach(area => { let sum = values.reduce((acc, cur) => { if (cur.area === area) {原创 2020-09-03 20:55:34 · 1090 阅读 · 3 评论 -
一个实例带你透析CSS盒子模型
文章目录CSS盒子模型简介盒子模型与width/height之间的关系一个玩转margin的实例结语CSS盒子模型简介当对一个文档进行布局(lay out)的时候,将所有元素表示为一个个矩形的盒子(box)。每个盒子由四个部分(或称区域)组成。如图,与盒子的四个组成区域相对应,每个盒子有四个边界:内容边界 content、内边距边界 padding、边框边界 border、外边框边界 margin。这是chrome开发者工具element面板中style部分的一个盒子模型图,如果有对chrome开发原创 2020-08-29 12:07:56 · 888 阅读 · 1 评论 -
echats的常见问题及其解决方案
文章目录echarts简介问题1:禁掉echarts中legend的默认行为echarts简介ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器,底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。ECharts官网链接:https://echarts.apache.org/zh/index.html问题1:禁掉echarts中legend的默认行为...原创 2020-08-22 12:41:02 · 1199 阅读 · 0 评论 -
JavaScript 中一些概念的底层原理
文章目录JavaScript的变量提升引入块级作用域变量提升所带来的问题块级作用域的原理注:本篇博客的内容来源自极客时间李兵老师的“浏览器工作原理与实践”课程的笔记总结JavaScript的变量提升所谓的变量提升,是指在 JavaScript 代码执行过程中,JavaScript 引擎把变量的声明部分和函数的声明部分提升到代码开头的“行为”。变量被提升后,会给变量设置默认值,这个默认值就是我们熟悉的 undefined。看下面这段代码示例:showName()console.log(mynam原创 2020-08-12 21:09:07 · 978 阅读 · 0 评论