- 博客(59)
- 收藏
- 关注
RSS订阅原创 你们知道JavaScript的优雅写法及骚操作
1、判断为空小白写法优雅写法:问题：我们编写js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂.2、多条件判断小白写法优雅写法:3、if else小白写法优雅写法:4、'骚’操作更多前端学习内容文章干货请关...
2020-04-30 20:43:09
239
原创 饿了么P7级前端工程师进入大厂的面试经验
** 面试准备**面试其实我是属于一边面试，一边准备的过程，但是无论如何，一定要做到基础扎实、比较好的自我介绍，以及描述自己的职业故事。1、基础知识的准备这一块，其实很重要，很多问题，必须轻松的理解，就和呼吸一样自然。因为这一块的掌握程度，就决定了一个前端工程师，能不能达到高级的程度。抛砖引玉，比如面向对象、原型链、闭包、es6、html5、css3，它们是前端的基础，需要烂熟于心。比如...
2020-04-30 20:32:01
686
原创 前端程序员面试的坑，简历写上这一条信息会被虐死！
** · 名词解释 ·**· 面试意图 ·· 总结 ·内容部分知识举例说明了一些常见的技能列表，实际上会根据面试者的简历情况设置问题。记忆性内容作为底线要求，如果不能达标，意味着基础不牢，在日后的工作中会在很多基本的问题上搞不清。编码环节主要做搜索性考察，因为这是工作的常态形式。使用搜索引擎的能力决定了程序员的日常水平。理解性考察对应的是知识点的理解和应用，是否能够把知识点运用到开...
2020-04-30 20:21:33
899
1
原创 这次来分享前端的九条bug吧
分享bug的目的开发过程中bug常相伴, 不能修复或者无法复现就忽略这些问题, 所以计划每当我遇到9个有价值有思考的bug就会统一分享出来, 以此来扩展性的思考工作本身, 不断的提高自己的意识, 毕竟能力的提高遇到的bug一定不同, 而且如果遇到bug越来越少只能说明自己的工作任务与学习任务在’原地踏步,且不饱和’, 既然如此就靠bug来见证自己的成长吧.1: element-ui: el-c...
2020-04-30 20:03:56
973
1
原创 移动端开发必会出现的问题和解决方案
对于一个开发了多个H5的前端工程师，在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下，并在后面给出坑产生的原理，和现阶段常规的填坑方案。由此来做一个阶段性的总结。问题下面列举了我遇到的一些常规问题，如有遇到其他问题请在评论区补充，之后我也会实践后加以补充，感谢！（经常更新该文）移动端 H5 相关问题汇总：1px 问题响应式布局iOS 滑动不流畅iOS 上...
2020-04-30 19:38:00
1717
1
原创 React 函数式组件性能优化指南
在此小编只介绍函数式组件特有的性能优化方式，类组件和函数式组件中有些不介绍，比如 key 的使用。另外本文不详细的介绍 API 的使用，后面也许会写，其实想用好 hooks 还是比较难的.有过 React 函数式组件的实践，并且对 hooks 有过实践，对 useState、useCallback、useMemo API 至少看过文档，如果你有过对类组件的性能优化经历，那么这篇文章会让你有种熟悉...
2020-04-29 20:46:25
187
原创 针对新手学习react容易迷惑的点的完整描述
网上各种言论说 React 上手比 Vue 难，可能难就难不能深刻理解 JSX，或者对 ES6 的一些特性理解得不够深刻，导致觉得有些点难以理解，然后说 React 比较难上手，还反人类啥的，所以我打算写两篇文章来讲新手学习 React 的时候容易迷惑的点写出来.当然,大家可以去看看我的前面的文章,写得是ES6的教程,对ES6还不是特别了解的可以去看一看.更多前端学习内容文章干货请关注我的知乎...
2020-04-29 19:46:30
217
原创 高级前端程序员和初级前端程序员的区别
简单的来说,初级程序员和高级程序员的差别是:初级多在写代码，高级多在设计代码；初级多在解决一个问题，高级多在解决一类问题；初级多在考虑技术问题，高级还要参与业务上的需求；初级工程师只管接需求，导致自己忙不过来，高级工程师会砍需求， 用自己得经验告诉产品这个需求不需要，告诉设计师这个交互没必要；初级工程师可能做完一个项目就完了，高级工程师可能会封装几个组件，整理一个脚手架出来。还有很...
2020-04-29 19:14:23
680
原创 谈谈React 16 的 Diff 策略
我相信在看这篇文章的读者一般都已经了解过 React 16 以前的 Diff 算法了，这个算法也算是 React 跨时代或者说最有影响力的一点了，使 React 在保持了可维护性的基础上性能大大的提高，但 Diff 过程不仅不是免费的，而且对性能影响很大，有时候更新页面的时候往往 Diff 所花的时间 js 运行时间比 Rendering 和 Painting 花费更多的时间，所以我一直传达的观念...
2020-04-29 16:45:21
279
原创 前端大佬谈 React Fiber 架构
2016 年都已经透露出来的概念，这都 0202 年了，今天开始写 Fiber 的文章。不过现在好的是关于 Fiber 的资料已经很丰富了，在写文章的时候参考资料比较多，比较容易深刻的理解。React 作为我最喜欢的框架，没有之一，我愿意花很多时间来好好的学习他，我发现对于学习一门框架会有四种感受，刚开始没使用过，可能有一种很神奇的感觉；然后接触了，遇到了不熟悉的语法，感觉这是什么垃圾东西，这...
2020-04-29 15:58:15
220
原创 每个前端工程师都应该了解的图片知识
前言随着web的发展，网站资源的流量也变得越来越大。据统计，60% 的网站流量均来自网站图片，可见对图片合理优化可以大幅影响网站流量，减小带宽消耗和服务器压力。有时候你花大力气去配置 webpack 使打包体积减少，不如好好优化几张图片，这篇文章就是让你明白如何选择正确的图片，并且让你明白这么多图片格式，在什么场景下使用什么格式，如果想看答案，那么直接滑到文末看图即可。基本概念在进入正题之...
2020-04-29 15:10:59
150
原创 一个缺失已久的特性 — module模块
在ES6之前，Javascript还不支持原生的模块化。如果要实现模块化，我们要借助一些框架，比如：requireJS或者seaJS等；什么？没用过也没听过这些框架？没关系，它们不是我们今天要讲的重点。今天的主角是：ES6自带的模块化。模块化的初衷也许你要问了，好端端的，为什么要模块化？现在的web系统越来越庞大、复杂，需要团队分工，多人协作，大型系统的javascript文件经常存在复杂...
2020-04-28 21:08:00
184
原创 终于，JavaScript也有了类（class）的概念
对于class类这个概念,我相信学过编程的人应该对他见多不怪了,因为在其他的编程语言中很早就实现了,而JavaScript语言并没有实现,一直以来,开发人员都是使用function和原型prototype来模拟类class实现面向对象的编程.接下来的学习，前端君默认大家都了解传统的模拟类的写法，如果你已经忘记了，ES6系列的第九节有介绍JavaScript的面向对象，点击可以查看。现在，ES6...
2020-04-28 20:50:02
550
原创 教你如何使用ES6的Promise对象
Promise对象，ES6新增的一个全新特性，这个是 ES6中非常重要的一个对象Promise的设计初衷首先，我们先一起了解一下，为什么要设计出这么一个玩意儿，用它是为了解决什么问题？带着这个问题，我们来回想一下日常开发中，经常需要用到ajax请求数据，拿到数据后，再进行一些处理。可有一次，你需要用ajax进行多次请求，而且，每次请求都依赖上一次请求返回的数据来作为参数，然后继续发出请求，...
2020-04-28 20:22:34
158
原创 ES6新增的Map和WeakMap 又是什么玩意？非常详细的解释
上一篇文章讲了set和weakSet,这节咱就讲Map和weakMap是什么?这两篇文章并没有什么联系,主要知识用法类似而已.嘿嘿,是不是感觉舒服多了.什么是Map介绍什么是Map，就不得不说起Object对象，我们都知道Object对象是键值对的集合： //Object对象 {"name":"前端君","gender":1}E...
2020-04-28 19:07:57
396
原创 ES6新增的 Set 和 WeakSet 是什么玩意?在此揭晓
现在的章节内容会更加的紧密,如果大家看不懂可以先去看以前的文章,当然看了的忘了,也可以去看一下,这样学习后面的内容才会更加容易.什么是Set结构Set是ES6给开发者带来的一种新的数据结构，你可以理解为值的集合。我们平时见到的数组Array也是一种数据结构，但是Set跟其他数据结构不同的地方就在于：它的值不会有重复项。基本用法我们从最基本的学起，Set的用法： ...
2020-04-28 16:13:55
233
原创 一种特殊的生成器函数-Generator函数
本节的内容，是建立在iterator遍历器知识的基础上。所以希望还没有看上一节的内容的话,最好还是看一看,当然你如果熟悉iterator就没有那个必要了.既然你都看到这里来了，就咱们就接着往下讲…声明Generator函数我们要学习的这个新函数叫做：Generator函数，又称生成器函数，是ES6的一个重要的新特性。我们来看看这个函数张什么模样： //声明一个...
2020-04-28 13:47:27
122
原创 ES6的 Iterator 遍历器到底是什么？
这节课要讲的是ES6中的Iterator.for…of为啥不遍历Object对象第十三节我们讲了简单又实用的for…of，我们可以使用它来遍历数组，字符串，Set和Map结构，但是有没有发现，我们并没有说它可以遍历Object对象，为什么不试试用它来遍历Object对象呢？我们试试看：//定义一个的Object对象let obj = {“name”:“前端君”};//咱们来for…of...
2020-04-27 18:36:04
142
原创 易学又实用的新特性:for...of
今天带来的知识点既简单又使用,是不是感觉非常的棒啊,OK,不多说了,咱们开始往下看.for…of 是什么for…of 一种用于遍历数据结构的方法。它可遍历的对象包括数组，对象，字符串，set和map结构等具有iterator 接口的数据结构。（上面这句话如果有看不懂的地方，自动忽略即可，后续会有章节介绍。）下面就以大家熟悉的数组为例来介绍for…of。遍历数组早就不是什么新鲜事，我们有...
2020-04-27 18:21:12
91
原创 新的知识点来了-ES6 Proxy代理 和 去银行存款有什么关系？
ES给开发者提供了一个新特性:Proxy，就是代理的意思。也就是我们这一节要介绍的知识点。以前，ATM还没有那么流行的时候（暴露年纪），我们去银行存款或者取款的时候，需要在柜台前排队，等柜台工作人员帮我们办理业务，这也是一种代理，我们自己无法修改我们银行账户上的数据，需要代理给柜员，帮我们办理存钱或者取现业务，而Proxy也是这样的一种机制。Proxy的实现我们先来看看Proxy的实现：...
2020-04-27 17:14:28
130
原创 JavaScript中一种全新的数据类型-symbol
连续连载了几篇《ES6对xxx的扩展》，本节咱们换换口味，介绍一种全新的数据类型：Symbol，中文意思为：标志，记号。音标：[ˈsɪmbəl]。数据类型在介绍Symbol之前，我们简单介绍一下JavaScript的数据类型：JavaScript有6中数据类型，分别是：String 字符串类型Number 数字类型Object 对象类型B...
2020-04-27 16:58:18
173
原创 箭头函数的this指向问题-一看就懂
OK,对于箭头函数的this用一句话概括：箭头函数中的this指向的是定义时的this，而不是执行时的this。如果上面这句话听的是懂非懂或者完全不懂的，没关系，下面会有案例讲解。举个栗子来看看this的一个使用案例： //定义一个对象 var obj = { x:1...
2020-04-27 16:43:57
588
原创 ES6中对函数的扩展
ES6一路扩展，字符串、数组、数值、对象无一“幸免”，ES6说要雨露均沾，函数也不能落下，今天，就来讲解ES6对函数的扩展。参数的默认值在开发中，给函数的参数指定默认值，是很普遍很常见的一个需求，我们先来回顾一下传统的实现方式，对比着看更好理解： function person(n,a){ var ...
2020-04-27 16:28:45
158
原创 ES6中对象的扩展
ES6不仅为字符串、数值和数组带来了扩展，也为对象带来了很多新特性。这一节，我们来一起学习一下对象的扩展。对象的传统表示法我们回顾一下，对象的传统表示法： let person = { "name":"张三", "say":funct...
2020-04-27 16:10:24
268
原创 ES6中对数组的扩展
hello,大家好,我又来了.前面讲了字符串和数值的扩展，今天要讲的是：数组的扩展。不知道大家能否跟得上这个节奏，你们在阅读中对讲解有存在疑惑，记得留言提出来，要真正地理解，否则白白浪费阅读时间就得不偿失了。 写过javascript代码的同学都知道数组是一个很常用的数据结构，能给我们带来很多方便。如今，ES6对数组进行进一步的扩展，为我们带来更多的特性，开发者都很期待。 第...
2020-04-27 15:43:17
109
原创 ES6中对数组的扩展
hello,大家好,我又来了. 前面讲了字符串和数值的扩展，今天要讲的是：数组的扩展。不知道大家能否跟得上这个节奏，你们在阅读中对讲解有存在疑惑，记得留言提出来，要真正地理解，否则白白浪费阅读时间就得不偿失了。写过javascript代码的同学都知道数组是一个很常用的数据结构，能给我们带来很多方便。如...
2020-04-27 15:27:55
146
原创 ES6中对数值的扩展
上一节和大家学习了字符串的扩展，这一节轮到了数值，我们一起来学习数值的扩展。 剧透一下，这一节并不会很烧脑，都是介绍类的知识讲解，理解性的东西不多，初学者们也可以愉快地看完。传统的写法 在介绍数值的扩展之前我们来看看旧的规范和使用方式，有对比才能看出不同之处。 在ES5中，我们存在几个全局函数 isNaN函数，isFinite函数，parseInt函数，parseFl...
2020-04-27 15:08:18
203
原创 ES6让字符串String增加了哪些好玩的特性呢?
确实因为现在天气变热了,所以一天天的这么写我也很累.所以如果阅读的时候有什么错误还请大家指出来,不好意思.学习永无止境.OK,今天继续讲解ES6系列知识学过上一节的解构赋值就知道，ES6确实给我们带来不少方便，但是ES6的方便之处远不止这些，今天又带来一个很实用的东西：字符串的扩展。字符串的扩展简答说，ES6对字符串新增了一些函数和操作规范，使得开发者对字符串的操作更加方便，以往需要借助其...
2020-04-27 14:32:41
196
原创 一个令人兴奋的ES6星特性-结构赋值
学完了前4节，今天我给大家带来的是一个令人兴奋的特性：解构赋值。这个章节代码片段有点偏多，不过可以放心，一点都不烧脑，还是老样子：简单易懂。什么是解构赋值 按照一贯的套路，接下来的内容是解释：什么是解构赋值？ 来看看官方的解释：ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。 这句话也不难...
2020-04-26 22:21:54
209
原创 教你如何快速让浏览器兼容es6
写在正文前，本来这一节的内容应该放在第二节更合适，因为当时就有同学问ES6的兼容性如何，如何在浏览器兼容ES6的特性，这节会介绍一个抱砖引玉的操作案例。为什么ES6会有兼容性问题？ 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布，而到了今天，我们在编程中如果使用了ES6的新特性，浏览器若没有更新版本，或者新版本中没有对ES6的特性进行兼容，那么浏览器肯定无法识别我们...
2020-04-26 21:53:16
773
原创 ES6中不得不说的关键字const
上一节讲了let关键字，它是用来声明一个变量，只在块级作用域起作用。这一节我们来学习ES6新增的另一个关键字const。const 的作用 const是constant（常量）的缩写，const和 let一样，也是用来声明变量的，但是const是专门用于声明一个常量的，顾名思义，常量的值是不可改变的。以前用var声明的变量，想怎么改就怎么改，同一个变量，后面的值可以轻松覆盖...
2020-04-26 21:09:10
129
原创 ES6中的let关键字,有什么用呢?
来吧，开始本节的学习！ES6 给开发者带来很多令人激动的特性，其中let关键字就是其中之一。那么，let关键字是什么东西？let 的用途我们回想一下，我们平时在写代码的时候，用var来声明一个变量，除此之外，好像也没用其他的关键字了，不管我们声明的是字符串类型、数组类型还是数字类型等，都用一个var 搞掂（因为JavaScript拥有动态类型），很方便。但现在，ES6告诉你，除了var，不...
2020-04-26 20:25:55
560
原创 ES6系列-什么是ES6?新手应该怎么理解
ECMAScript 是什么很多初学者都很困惑，ECMAScript是什么？它跟JavaScript有什么关系？大家注意到了吗？从题目中我们就可以看出来了，ECMAScript是JavaScript的组成部分，JavaScript没了它可是不行的。咦？为什么没了它可不行，它有什么作用居然这么重要？大家再回忆一下，平时我们写javascript代码的时候，用什么声明一个变量，没错，是用关键字...
2020-04-26 20:07:52
373
原创 css的变量教程,更强大的css
当微软宣布 Edge 浏览器将支持 CSS 变量。这个重要的 CSS 新功能，所有主要浏览器已经都支持了。本文全面介绍如何使用它，你会发现原生 CSS 从此变得异常强大。一、变量的声明声明变量的时候，变量名前面要加两根连词线（–）。body { --foo: #7F583F; --bar: #F7EFD2;}上面代码中，body选择器里面声明了两个变量：–foo和–bar。它...
2020-04-26 15:13:22
105
原创 尤雨溪在直播中讲到的Vue3.0 Beta的那些特性,快记笔记了
前言在那天风雨交加的夜晚,Vue的创作者尤雨溪尤大大在b站直播分享了Vue.js 3.0 Beta最新进展.我对直播的内容进行了一下整理.整整用了三天的空余时间赶上了1. 全新文档RFCsVue.js 3.0 Beta发布后的工作重点是保证稳定性和推进各类库集成所有的进度和文档都将在全新RFCs文档可以看到。2. 六大亮点Performance：性能更比Vue 2.0强。Tre...
2020-04-25 22:21:50
513
原创 前端基础进阶(七)-前端工程师最容易出错的问题-this关键字
我们在学习JavaScript的时候,因为对一些概念不是很清楚,但是又会通过一些简洁的方式把它给记下来,那么这样自己记下来的概念和真正的概念产生了很强的偏差.当然,还有一些以为这个是对的,还会把它发在网上,那么这个影响就大了,很多人都对于这个概念产生一个错误的理解.比如对于this指向的理解中，有这样一种说法：谁调用它，this就指向谁。在我刚开始学习this的时候，我非常相信这句话。因为在...
2020-04-25 16:04:11
590
原创 前端基础进阶(六)-大厂面试题问题:循环闭包与setTimeout
我在上一篇闭包的文章中留下了一个关于setTimeout与循环闭包的思考题.利用闭包，修改下面的代码，让循环输出的结果依次为1， 2， 3， 4， 5for (var i = 1; i <= 5; i++) { setTimeout(function timer() { console.log(i); }, i * 1000);}下面是一些朋友看了闭包以后给出了...
2020-04-25 14:49:13
220
原创 前端基础进阶(五)-让你十分钟就看懂学会闭包
初学者,在闭包上走了很多的弯路.我当初也是一样.而这次重新回过头来对基础知识进行梳理来讲清楚闭包,对我来说也是一个非常大的挑战.我会用最清楚的思路,最简洁的方式来讲解闭包.那么闭包重不重要呢?当然是非常重要的,因为闭包在开发中是无处不在的.那么你在面试中,面试官也会问闭包的问题,所以如果你不了解闭包,一是你做开发会遇到各种闭包问题无法解决,二是你面试基本过不了.可是为什么，闭包如此重要，...
2020-04-24 22:11:27
617
原创 前端基础进阶(四)-让你一分钟就看懂的作用域和作用域链
对于作用域和作用域链本身就是一个非常简单的一个概念,但是反而是这些简单的概念大家却不明白,困惑的原因是别的文章里,常常会提到词法作用域,词法分析等概念,到底是什么东西?好像和我自己觉得的不一样,但是却又不知道哪里不对.为了避免接下来更多的同学造成同样的困扰，我写了一篇名为（v8引擎是如何工作的）文章，为大家分析JS的工作原理。后续会整理进入基础进阶系列文章。大家可以随时阅读。词法环境（Lex...
2020-04-24 21:51:54
140
原创 前端基础进阶(三)-史上最详细的变量对象详解
hello,大家好!先摆一张图,大家可以看一下,是否能看懂呢OK,在JavaScript,声明变量和函数是做项目开发不可避免的,甚至大部分都是声明变量和函数,JavaScript最核心的就是函数.js编译器是如何找到这些变量的呢?我们还得对执行上下文有一个进一步的了解。在上一篇文章中已经知道，当调用一个函数时（激活），一个新的执行上下文就会被创建。一个执行上下文的生命周期可以分为两个阶段。...
2020-04-24 21:13:31
171
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人