能力说明:
掌握企业中如何利用常见工具,进行前端开发软件的版本控制与项目构建和协同。开发方面,熟练掌握Vue.js、React、AngularJS和响应式框架Bootstrap,具备开发高级交互网页的能力,具备基于移动设备的Web前端开发,以及Node.js服务器端开发技能。
暂时未有相关云产品技术能力~
公众号:【资料分享大师】 B站:【小猪课堂】
目前市面上有不少在线制作简历的网站,不得不说,有些做得很好,提供的简历模板非常的漂亮!但是,相信有很多小伙伴不会去使用它们,毕竟贫穷会限制我们! 当然,有些小伙伴可能会去下载各种各样的简历模板,比如一些word格式的模板,但是这些模板还是存在一个问题,就是样式太难调了,扩展性不高。 因为,我作为众多小伙伴中的一员,就想充分发挥自己程序员的能力,于是便有了这款免费的开源简历制作神器!
前言 响应式布局已经被提出很多年了,因为我们的电子设备多种多样,比如手机、平板、电脑等等,这些设备的屏幕大小都是不一样的。如果我们的网页在每个设备上显示一样的话,那么用户体验无疑是很差的,所以为了解决这个问题,我们通常有两种方案:响应式布局和编写多套网页代码。编写多套网页代码工作量很大,所以很多公司都直接采用响应式布局,响应式布局的原理就是根据设备屏幕的不同大小加载不同的css,我们经常采取的方案就是媒体查询。 不过今天我给大家介绍一个更为简单的方法实现响应式:利用clamp()函数!
前言 如果你没有可以的去刷过题或者学习算法,那么我相信很多人的心理过程都是这样一个变化:数组求和?这太简单了!...不对,不能用循环,不能用内置函数?那我咋办啊! 很多小伙伴刚开始以为这道题很简单,但是仔细一看却摸不着头脑。其实这道题说难不难,说简单也不简单,主要是看你对算法的灵敏度如何了。
前言 有些小伙伴可能看到这道题目就已经蒙圈了!甚至可能看不懂这道题目在干什么。其实这是一道比较考察基础的面试题,当你明白原理之后,你可能会感觉这道题也就那么回事,但是如果你没有思绪,那你可能觉得这道题很难。 今天我们就来彻底看看这到底在做什么妖!
前言 这个问题考察的是大家对 CSS 基础知识的掌握程度。粘连布局是众多 CSS 中布局方式中的一种,比如常见的还有单列布局、三栏布局等等,今天我们主要将的是粘连布局。因为在我们平常的页面布局中,粘连布局使用的地方还是挺多的,有些小伙伴明明都在项目中用过这种布局方式了,但是却不知它叫粘连布局,如果面试的时候没有回答上来就很亏。 所以今天我们就讲一讲 CSS 众多布局中的一种:粘连布局。
前言 常见的网页布局有很多种,比如单列布局、等高布局、三栏布局等等。其中三栏布局在很多网站都有用到,这也是一种比较经典的网页布局方式,当然,想要实现网页三栏布局的方式有非常之多,我们今天就主要学习一些哪些方式可以实现三栏布局,这样小伙伴们遇到三栏布局需求的时候就可以根据需求自行选择合适的布局方式了。
前言 每一个项目都避免不了使用各种各样的图标,如果我们使用了 UI 组件库,比如说 ELement 等,那么组件库有一些封装好的图标供我们使用。但是项目是多变的和复杂的,组件库提供的图标很多时候不能满足需求,这个时候就需要我们自己引入想要的图标了。 今天介绍的便是如何将 iconfont 阿里图标库的图标引入到我们的 Vue3 项目中来!
前言 Vue3 相较于 Vue2 而言,新增了很多新特性。其中 Teleport 内置组件就是 Vue3 新增的新特性之一,我们通常把它称为传送门,也可以把它比作哆啦 A 梦的口袋,那么这个新特性到底是干什么用的呢?感觉很神奇一般,接下来就让我们一起来学习这个新的内置组件吧!
前言 使用 Vue 的小伙伴相信你一定使用过插槽,如果你没有用过,那说明你的项目可能不是特别复杂。插槽(slot)可以说在一个 Vue 项目里面处处都有它的身影,比如我们使用一些 UI 组件库的时候,我们通常可以使用插槽来自定义我们的内容。 Vue3 已经推出很久了,也有越来越多的项目开始转向 Vue3 了,那么如果你对 Vue3 中的插槽还不熟悉,那么很有必要跟着本篇文章学习一下了!
前言 使用过 Vue 的小伙伴,不管时 Vue2 还是 Vue3,我相信你都用过 Vue 中的监听器。监听器的作用就和它的名字一样:用来监听某个东西是否发生变化!我们很多需求都会用到监听器 watch,但是 Vue2 和 Vue3 中的监听器的用法有些许不一样,这就让一些从 Vue2 转 Vue3 的小伙伴不太适应,所以,我们今天就来好好学一学 Vue3 中的监听器如何使用!
前言 虽然在 Vue 中不提倡我们直接操作 DOM,毕竟 Vue 的理念是以数据驱动视图。但是在实际情况中,我们有很多需求都是需要直接操作 DOM 节点的,这个时候 Vue 提供了一种方式让我们可以获取 DOM 节点:ref 属性。ref 属性是 Vue2 和 Vue3 中都有的,但是使用方式却不大一样,这也导致了很多从 Vue2 转到 Vue3 的小伙伴感到有些困惑。 今天我们就来揭开 Vue3 中 ref 的神秘面纱!
前言 Vue提供了各种各样的指令供我们使用,比如v-model、v-bind等等,可以说指令是Vue的重要功能点之一。除了Vue内置的一些指令外,Vue还允许我们自己定义指令,相信学过Vue的小伙伴应该都或多或少知道自定义指令,自定义指令在有些场景下非常的好用,它可以为我们省去超过工作量。 但是Vue3和Vue2中的自定义指令有一些区别,今天我们就重点学习一下Vue3中自定义指令如何使用?
前言 JavaScript 中的数组操作方法有好几十种,有的很简单,有的稍显复杂。而今天我们单独拿出来讲的便是 reduce 方法,为什么单独把 reduce 拿出来说呢?因为它算是 JS 数组方法里面较为复杂的一个了,而且很多面试官非常喜欢让面试者手动实现 reduce,所以我们有必要好好学一学这个数组方法,本篇文章主要是以学习 reduce 为主,后续会推出手写 reduce 的文章。
前言 作为一名前端开发人员,我们每天都会与数组打交道。JS 也提供了很多操作数组的原生 API 供我们调用。在这些方法里面,有的方法会改变原数组,有些不会改变原数组。别看这一点小小的区别,往往会造成巨大的影响,特别是在算法层面,有可能会造成算法复杂度的飙升。 今天我们就来好好理一理哪些数组方法操作会改变原数组,哪些数组方法不会改变原数组。
前言 这既是一道常见的面试题,也是实际工作中常见的一个需求。这虽然不是一道算法题,但是它是一道发散性思维的题目,想要实现这个功能有很多种方法,这就要看你能够想出几种方法了,本篇文章只列出常见的几种,就相当于抛砖引玉了。
前言 不知道你有没有遇到这样的需求:锚点定位?进入页面某个元素需要出现在可视区?......这一类的需求归根结底就是处理元素与可视区域的关系。我接触了很多前端小伙伴,实现的方式有各种各样的,比如使用 scrollTop、监听滚动等等,这也是很多小伙伴第一个想到的。 今天我们介绍一种更简单的方式:scrollIntoView。
前言 这是一道考察基础数据结构与算法的题目,如果没有学过数据结构,可能刚开始还有点摸不着头脑,但是如果你学过数据结构,那么看到这道题我相信你就有很清晰的思路。今天我们就来剖析剖析这道题。
前言 将数组旋转K步这算是一道非常经典的面试题了,题目不算太难,我相信绝大多数小伙伴都有实现思路。针对算法题,我们不仅仅实现它就好了,我们更重要的是学会思路,更要有时间复杂度和空间复杂度的概念,今天这篇文章再讲解题目的同时,还希望大家能够有自己的见解。
前言 就目前而言,前端框架基本上被 Vue 和 React 瓜分得差不多了。如果你去面试一个前端岗位,那么或多或少都会问你一些关于 Vue 和 React 框架的知识,无论是原理还是使用,我们都有必要去了解一番。 数据响应式可以说是这些框架的一大特色与核心,这里我们就拿 Vue 来说。在 Vue2.x 时代,实现数据响应式主要是使用 Object.defineProperty()这个 API 来实现的,而到了 Vue3.x 时代,数据响应式主要是使用 Proxy()来实现的。 如果你还不了解 Proxy,那么你很有必要跟着本篇文章学习一下!
前言 作为前端开发人员,我们最常用的一些数据结构就是 Object、Array 之类的,毕竟它们使用起来非常的方便。往往有些刚入门的同学都会忽视 Set 和 Map 这两种数据结构的存在,因为能用 set 和 map 实现的,基本上也可以使用对象或数组实现,而且还更简单。 但是,存在必然合理,当你真正了解 Map 和 Set 之后,你就会发现它们原来时如此美好!
前言 我们在使用 Electron 编写桌面应用时,打开新窗口可以说是一个非常常见的场景了。很多刚接触 Electron 的小伙伴面对这样一个问题可能都会显得比较棘手,比如打开新窗口如何知道渲染哪一个页面?打开的新窗口如何与其它窗口产生联系,比如父子窗口?...等等一系列问题。 今天我们就将 Electron 打开新窗口的常见做法分享给大家,而且是基于最新的 TS 封装。
前言 this 指向问题一直是一个老生常谈的问题了!我们对它可以说是又爱又恨,因为 this 指向常常没有按照我们的想法去指向谁,导致程序无缘出现许多 bug。所以我们常常直接强制改变程序中的 this 指向,我们常用的方法有 bind、apply 和 call,bind 与其它两个稍许不同,所以我们本篇文章专门讲解 call 和 apply 方法,并且手动模拟实现它们。
前言 我们都是 JavaScript 是一个单线程语言,单线程有它的好处也有它的坏处。在我们熟知的如 Java、C++等语言中,都提供了一个叫做 Sleep 的内置函数。这个函数的作用就和它的名字一样:睡眠。 假设我们有这样一个场景:我们需要在项目运行起来后的十分钟之后去执行一段代码,这段代码可以是符合你业务场景的任何代码,比如查看内存占用多少等等。 在 Java 这类语言中,可以直接使用 Sleep 这个内置函数实现这个需求,Sleep 函数会让出或者停下当前线程,让其它程序先执行,到底指定时间后在继续执行。 然而我们的 JavaScript 没有提供 sleep 内置函数,大致就是因为单线
前言 类型的判断可以说在我们前端开发过程中无处不在,特别是在 Typescript 还未推出之前,我们在 JS 里面做类型判断显得就更加重要了。 判断数据类型的方式有特别多,比如大家常用的 typeof、instanceof、Object.prototype.tostring.call()等等,那么每一种判断数据类的方法大家知道其中的原理吗?比如说 instanceof 的原理,今天我们就聊一聊 instanceof 是如何判断数据类型的。
前言 我们常说 JavaScript 是一门弱类型语言,相对于Java 这类的强类型语言来说,JavaScript 这种脚本语言的语法规则就松散的多。松散的模式对我们来说有好处也有坏处,好处便是我们写代码的时候不用考虑那么多,普通小白随便学学之后也能快速上手。但是坏处也是显而易见的,这种松散的代码会导致很多不可预测的错误,代码规范也是很大的一个问题。 所以为了让我们编写的代码变得严谨一点,ECAMScript5 提出了"严格模式",处于严格模式下运行的 JavaScript 代码会遵循更加苛刻的条件。
前言 Electron主要是用来搭建桌面应用程序的,虽然有许多人不喜欢它,但是也不能撼动目前它的王者地位!使用Electron可以让我们前端开发者快速搭建出桌面应用程序,我们所熟知的VS code就是使用Electron开发的。 由于Electron更新迭代非常快,加上Vue3已经发布很长一段时间了,所以我们很有必要将我们的项目升级一下,所以这里就利用electron+Vue3搭建一个万精油的项目框架!
前言 原型和原型链基本上是基础前端面试必问的问题之一,虽然这是一个非常基础的知识点,但是往往工作了好几年的前端程序员都理不清楚。或许你大概知道在Javascript中有原型的概念,也知道有原型链的存在,但是如果面试官让你说出来,你可能会把自己都说蒙圈! 总体原因:对原型和原型链理解得不够透彻!
前言 this关键词可以说在JavaScript有着举足轻重的地位了!我们对它简直是又爱又恨,它在给我们带来简便快乐的同时,还给我们带来了痛苦,因为它的多变性,让我们开发人员经常不知道this到底指向的哪里,当然这有一部分是太菜的原因,另外一部分原因是this指向还是比较复杂的。 为了完全控制this指向,也就是我们常说的this指向的显示绑定,我们可以使用bind方法来显示绑定this。
前言 EventBus是事件总线的意思,可不是什么事件车。 事件总线模式在工作中经常使用,在面试中也很容易问到。甚至在很多面试中会让你手写一个EventBus,那么EventBus到底是个什么东西,今天我们就来学一学!
前言 "函数柯里化"可能是很多小伙伴经常听到的一个概念,这也是在面试中很常考的。柯里化是我们英译过来的,它实际被称作"currying"。很多小伙伴可能对“函数柯里化”总是云里雾里的,但是事实上在项目中,其实很多地方都有“函数柯里化”的存在,只是我们没有发现而已,今天我们就来彻底学会它!
前言 在程序员的世界里怎么可能没有对象,没有对象我们new一个不就完事儿了吗?在Java这样的面向对象的语言里面,new的操作可以说是随处可见。在我们前端程序员的世界里,可能很多小伙伴还没有感受到new的魅力,但是随着TS、ES6等等应用广泛,new的操作也逐渐被应用起来了! 我们都说new一个对象,顾名思义new操作就是创建一个新对象,那么它是如何创建的?创建的对象有什么特点?创建的过程是什么?今天就来理一理!
前言 axios 是目前最优秀的 HTTP 请求库之一,虽然 axios 已经封装的非常好了,我们可以直接拿过来用。但是在实际的项目中,我们可能还需要对 axios 在封装一下,以便我们更好的管理项目和各个借口。 但是,目前网上有特别多的针对于 axios 在项目中的封装。不得不说,很多大佬封装得非常全面,方方面面都考虑到了。但是我们的每个真的都需要那些封装吗?显然不是的,网上的很多封装其实都显得有点过度封装了! 本篇文章实现最简单 Axios 封装,让小伙伴们扩展起来容易一些。
前言 session、cookie、token 这几个概念在面试中可以说是经常出现的,因为通过这个概念基本上可以了解到你对网络请求或者权限管理这一块是否有过了解和实际的应用。很多小伙伴可能喜欢死记硬背,以此来应付面试! 但是这几个东西不光面试中经常问到,它们在我们的实际项目中也是应用广泛的。所以我们有必要了解它们,并且学会如何使用它们。 今天就来理一理这三者之间的关系!
前言 目前前端大环境下,很多人越来越不注重学习 CSS 了,觉得太简单!但是事实并非如此,CSS 的复杂程度其实一点不亚于 JavaScript,只是你没深入了解才会觉得简单。 不知道你有没有遇到过这样的布局问题:我明明设置了 z-index,怎么没起作用?我设置了元素定位,最终效果怎么和我想象得不一样? 如果你遇到了上面得问题,说明你对 CSS 了解得还不够深入。上面问题的出现,都与 CSS 层叠上下文相关,所以今天我们决定彻底将 CSS 层叠上下文搞明白!
前言 JavaScript 异步编程可以说是一大核心知识。我们都知道 JavaScript 是一个单线程语言,单线程机制有什么好处和坏处非常的明显,这里就不多说。异步编程思想的出现,让 JS 这个单线程语言又增添了一丝色彩。 异步 JS 带来了非常多的好处,但是如果你没有真正的掌握,那可能就会遇到一些奇奇怪怪的问题,比如我们今天要说的异步遍历的问题。
前言 这是一道很基础的面试题,经常用来考应届生或者实习生。但是看似如此简单的一道题,却让不少人在这上面翻了车。有些小伙伴可能觉得这无非就是考察如何判断数据类型,大家或者多少都知道一些,但是为什么会翻车呢? 原因很简单:说得不全,有些概念模棱两可! 今天就来总结一下如何判断数据类型,取得最优解!
前言 这是一道比较经典的面试题,主要考察的是面试者原生 JS 的基础怎么样,以及对 JS 的一些理解。很多小伙伴可能大概会想到事件捕获和冒泡等,确实没有题。但是很多小伙伴都是模模糊糊,理解得不够透彻,今天我们就来梳理一下。
前言 不知道你有没有遇到过这样的问题:如何实现图片懒加载?如何判断元素进入了可视区?如何判断元素不在可视区内?等等...... 这些问题我相信绝大多数的前端小伙伴都遇到过,而且在项目中的遇到的频率还不低!我们就拿图片懒加载这种场景举例:当图片进入可视区后才进行加载。常见的做法就是通过监听 scroll 滚动事件,然后通过 getBoundingClientRect()实时获取元素的相对位置,从而判断元素是否出现在可视区内。 上面的方法需要频繁触发 scroll 事件,很容易造成卡顿或者页面性能问题。 处理这种问题,我们可以使用另一种方式:IntersectionObserve 方法。
前言 说起类数组,可能很多小伙伴脑袋都是一团浆糊。什么是类数组?它是数组吗?不是数组为什么要和数组扯上关系?...等等好多问题。其实类数组非常的简单,甚至在项目开发中我们可能遇到过,只是我们没有仔细去思考罢了。既然类数组带有数组两个字,那么它肯定和数组是有关系的,我们是可以将数组转为真正的数组的。 今天就来总结一些将类数组转为数组的方法!
前言 我们都知道浏览器是可以打开很多标签页的,如果每个标签页代表的是单独的一个网站,那么这些标签页之间肯定是不能通信的,如果能通信那估计我们都得凉凉。但是在很多情况下,浏览器中的很多标签页都属于某一个网站,而且这些标签页之间会使用一些相同的数据,这个时候我们就需要让这些标签页的数据都保持同步。 比如很多博客网站,点击文章列表通常是打开一个新的标签页进入文章详情页,那么如果我们在文章详情页点赞、评论等操作,而文章列表页也使用了这些数据,这个时候我们需要保持两边的数据一致,衍生出来就是详情页改了数据,需要让列表页知道。 总结来看:在某些情况下,实现多标签页之间通信是必要的!
前言 在实际项目开发中,判断两个对象是否相等可能是比较常见的需求了,有些小伙伴会使用第三方库实现,有些小伙伴会自己手动实现。不管怎么实现,只能能满足项目需求,那就是好样的。但是可能有些小伙伴如果对 JS 还不够熟悉,他可能就会有疑问:判断相等不是用==比较就可以了吗?答案肯定是错误的,面试官要是听了你这个回答,估计会当场吐血! 今天就来学一学如何比较两个对象是否相等? 学习目标:实现判断两个对象是否相等,即所有键值对相等。
前言 今天这篇文章的主题是Vuex,所以看这篇文章之前最好是要有一定Vue基础的,没有学过Vue的话我建议先去看看Vue.js。不过我相信,对于前端小伙伴来说,Vue框架或多或少都会接触到。好了,话不多说,接下来进入正题: 注意:Vue-cli的版本不同可能生成的项目目录和方法也不同,无需在意这些。
前言 组件化是 Vue 框架的重要思想之一,在前端框架还未出现的时候,通常一个网站页面就是一个文件,如果一个页面有什么数据需要大家使用,直接声明一个全局变量就好了。但是 Vue 框架出现后,将一个页面组件化了,意味着一个页面被分割为了很多个文件,那么组件之间数据的共享就成了一大问题,当然 Vue 为实现组件间的数据共享提供了很多种方法,今天我们就梳理一下到底有哪些方法? 因为项目中常用的就那么几种,所有经常有很多小伙伴在面试的时候说不全,所以还是建议好好理一理。
前言 做前端开发的小伙伴一定离不开“请求”两个字,这是我们与后端交互的最重要的途径!在前几年面试的时候,面试官很喜欢问的一个问题就是让面试者手撕代码实现 Ajax,我相信很多小伙伴一定遇到过。直至今日,又出现了许多关于请求的新名词,今天就来理一理这些新名词的区别。 这些名词的共同点:都用于发送网络请求。
前言 childNodes 和 children 算是一个细节问题,在当下框架火热的环境中,几乎很少有人会去直接操作 DOM 节点了。但是如果你比较深入的去学习框架之后,会发现它们的底层原理还是逃脱不了 DOM 的操作,所以说,学习这些关于 DOM 的细节问题还是很重要的,面试官也常常会以这些细节来判断一个人的知识是否掌握到位!
前言 这是一道非常常问的面试题,一般如果面试官准备问Vue相关的问题,那么往往都会拿Vue的生命周期作为开头。很多小伙伴可能觉得这道题非常简单,所以往往就不去准备,结果导致每次回答得都不够全面,而面试官就会觉得你这个人态度不端正。 所以,我们还是好好学一学基础的东西吧!至少态度端正!
前言 offsetHeight、scrollHeight、clientHeight这三个属性我们经常在开发中遇到,如果小伙伴们没有经常使用的话,很容易把这些属性搞混,比如说什么窗口高度、元素高度、内容高度等等。当然,现在的前端框架很多时候帮我们封装了这些属性,但是我们也不能太过依赖框架,底层的原理我们还是需要了解的,今天就来理一理这三个属性分别代表什么?
前言 自己也在前端这一行业有些年头了,从最初的啥也不懂,到现在的啥也不会。这期间收藏了无数的学习网站、开源项目等等,其实现在回过头来看,学习前端最重要的不是学的广泛,而是要学的精!今天就给大家推荐几个在GitHub上星星数都不低的开源项目。
前言 深拷贝问题是一道老生常谈的前端面试题了。为什么要实现深拷贝大家也一定明白,作为一个程序员,值类型和引用的类型的区别大部分人应该都是知道的。面试官问这道题的道理也很简单,就是考虑你的基础知识是否牢固。很多小伙伴可能只知道个概念,或者大概知道有哪些方法,总是云里雾里的感觉。今天我们就好好理一理如何实现深拷贝!
前言 如今Vue占据了国内前端市场的大壁江山,在前端求职过程中,Vue的相关面试题也是越来越多。之所以Vue如此火热,很大部分原因就是它的渐进式、组件化、指令式等思想,让普通开发人员非常好上手。 指令是一个Vue项目用的最多的东西之一了,今天我们就来讲解Vue指令中的一个分支:自定义指令。