![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 66
前端阳光
公众号《前端阳光》抓不住爱情的我 总是眼睁睁看她溜走 世界上幸福的人到处有 为何不能算我一个
展开
-
手写async await核心原理,再也不怕面试官问我async await原理
async await 语法是 ES7出现的,是基于ES6的 promise和generator实现的。原创 2022-08-27 13:28:35 · 629 阅读 · 0 评论 -
纯css就能实现可点击切换的轮播图,feel起来很丝滑
轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了。所以不如自己手写一个,而今天我要分享的一种写法也是我最近才发现的,发现写起来真的是很丝滑,只纯css就实现了呢!可以先看看预览效果for 属性规定 label 与哪个表单元素绑定,label的for属性要与绑定表单元素(input)的ID对应。绑定完成后可以通过点击label触发表单元素的默认属性。通俗的讲就是你绑定完了点lebel就相当于点击表单元素(inpu原创 2022-06-15 17:45:43 · 5189 阅读 · 0 评论 -
手写Vuex核心原理,再也不怕面试官问我Vuex原理
手写Vuex核心原理文章目录手写Vuex核心原理一、核心原理二、基本准备工作三、剖析Vuex本质四、分析Vue.use五、完善install方法六、实现Vuex的state七、实现getter八、实现mutation九、实现actions一、核心原理Vuex本质是一个对象Vuex对象有两个属性,一个是install方法,一个是Store这个类install方法的作用是将store这个实例挂载到所有的组件上,注意是同一个store实例。Store这个类拥有commit,dispatch这些方法,原创 2020-08-01 13:06:02 · 4769 阅读 · 6 评论 -
三面面试官:运行 npm run xxx 的时候发生了什么?
面试官:npm run xxx的时候,发生了什么?讲的越详细越好。 我(嘿嘿,稳了,这次我要30k): 嘻嘻!...原创 2022-03-25 14:49:42 · 1428 阅读 · 1 评论 -
关于 HTML5 LocalStorage 的 5 个不为人知的事实
作者:Todd Anglin译者:前端阳光来源:http://htmlui.com/blog/2011-08-23-5-obscure-facts-about-html5-localstorage.htmlLocalStorage 是HTML5中一个方便使用的 API,它为 Web 开发人员 提供了一个易于使用的5MB的存储空间。使用 LocalStorage API 真的再简单不过了。不信看下://Save a value to localStoragelocalStorage.setI..原创 2022-03-17 11:04:55 · 3789 阅读 · 0 评论 -
UI妹子说我用CSS实现毛玻璃效果的样子很帅
前言UI小姐姐问我,能不能做出透明加模糊的背景,而我当然是二话不说就说可以。因为我觉得没有什么是css实现不了的。更何况我要在她面前展现得我很厉害的样子。开发起来果不其然,在我打开蓝湖后,发现属性都给我提供好了于是我立即将这份代码ctr c,然后ctr v,一番丰功伟绩立马就完成了,效果也是杠杠滴。然后兴高采烈地交付给UI小姐姐查看了。小姐姐也说可以。出于职业素养,我马上拿起我在pdd上9.9买的iphone13手机(当时也就邀请了我老家整个镇子的人来帮我砍一刀吧)查看效果,哇塞真机效原创 2022-03-07 17:14:02 · 1334 阅读 · 2 评论 -
拜托,css这样实现多行文本“展开收起” 超酷的好吧
前言2022.02.14的午后,我站在你家门口,再次遇见了你,他又来牵起你的手无法言语,我是什么,这样傻傻的我怎么守护你这次我静静哭了选择放弃,我好想好想把记忆折叠起可惜,记忆不能像之前那个需求一样自由展开与折叠前段时间接到一个需求,关于文字展开和收起的,走了很多路,踩了很多坑。在这个夜深人静,想你想到泪流的时候,决定记录分享一下。需求如下所述:未满两行时超过两行,少于7行时未展开展开超过7行时未展开展开就如上面所述,我倒是第一次做这种需求,于是就网上原创 2022-02-16 20:02:36 · 4020 阅读 · 4 评论 -
使用flex 布局 的盒子 使用 swiper轮播插件,flex布局会失效的解决方法
如上图代码所示:本来reward-list是一个弹性布局容器,子元素reward是弹性布局的。但嵌入swiper之后,reward的直接子元素就不再是reward。。我们看下实际上的html结构:可以看到从rewad-list到reward中间多了三层。解决方法:将reward-swiper的width设置为100%。然后将reward的margin设置为auto即可。...原创 2021-07-14 15:58:34 · 3359 阅读 · 0 评论 -
【深入探究Node】(4)“内存控制” 有十五问
文章目录1. V8是用什么给对象分配内存的呢?2. V8为何要限制堆的大小?3. 原来如此,那你知道垃圾回收机制的策略是什么吗?4. 为什么要分代呢?5. 哦,那你谈谈是怎么分代的?6. 那 新生代是怎么回收的?7. 很好奇,一个新生代它是怎么晋升成老生代的。8. 为什么要设置25%这个这么低的值呢?9. 新生代的对象晋升后就成老生代了,那老生代为什么不能用Scavenge回收?10. 那老生代的对象该怎么处理?11. 那为什么还要标记整理?12. 咦!既然标记整理是基于标记清除上演变而来的,也就是它包括了原创 2021-07-05 20:08:55 · 169 阅读 · 1 评论 -
如何用纯 CSS 创作一只愤怒小鸟中的绿猪
如何用纯 CSS 创作一只愤怒小鸟中的绿猪实现步骤定义 dom,容器中包含 3 个元素,分别代表耳朵、眼睛、鼻子:<div class="pig"> <span class="ears"></span> <span class="eyes"></span> <span class="nose"></span></div>居中显示:body { margin: 0;原创 2021-04-17 07:49:35 · 157 阅读 · 0 评论 -
“模块机制” 有十三问——读《深入浅出Node》第二章有感
我尝试用一种自问自答的方式记下笔记,就像面试一样,我自个儿觉得有意思极了,希望你也喜欢第一问: CommonJS规范是干嘛的CommonJS规范为JavaScript制定了一个美好的愿景——希望JavaScript能够在任何地方运行。CommonJS规范的提出,主要是为了弥补当前JavaScript没有标准的缺陷,以达到像Python、Ruby和Java具备开发大型应用的基础能力,而不是停留在小脚本程序的阶段第二问: 那你知道CommonJs模块包含什么吗?CommonJS对模块的定义十...原创 2021-03-31 21:25:14 · 158 阅读 · 0 评论 -
“初学Node.js” 有四问——读《深入浅出Node》第一章有感
1、为什么叫Node?它自身非常简单,通过通信协议来组织很多Node,非常容易通过扩展来达成构建大型网络应用的目的。每一个Node进程都构成这个网络应用中的一个节点,这是它名字所含意义的真谛。2、你能说说Node的特点吗?作为后端JavaScript的运行平台,Node保留了前端浏览器JavaScript中那些熟悉的接口,没有改写语言本身的任何特性,依旧基于作用域和原型链,区别在于它将前端中广泛运用的思想迁移到了服务器端。下面我们可以看看node相较于其他语言的一些特点:1. 异步I/O关于异步.原创 2021-03-30 20:45:59 · 212 阅读 · 0 评论 -
一道js笔试题, 刷新了我对map方法函数的认知,你做对了吗?
文章目录背景猜想1猜想2对map方法的深入思考你百度一下,会发现也基本上很多人都是这样手写的:那真正的map方法应该死怎样实现的呢?为什么 key in Array 可以判断 当前项是否为 empty呢?最后参考文章背景昨天在看一道笔试题的时候本以为很简单,但是结果不是我想象的那样,直接上笔试题。const array = new Array(5).map((item) => { return item = { name: '1' }});console.log(array)原创 2021-01-25 17:35:40 · 411 阅读 · 0 评论 -
推荐使用并手写实现redux-actions原理
文章目录一、前言二、介绍2.1 创建action2.2 reducer2.3 触发action三、 认识与手写createAction()3.1 用法3.2 原理实现四、认识handleActions五、认识与手写实现handleAction5.1 用法5.2 原理实现六、handleActions原理实现最后参考文章一、前言为什么介绍redux-actions呢?第一次见到主要是接手公司原有的项目,发现有之前的大佬在处理redux的时候引入了它。发现也确实 使得 在对redux的处理上方便了许多,原创 2020-12-17 20:45:43 · 340 阅读 · 0 评论 -
前端进阶之认识与手写compose方法
文章目录前言:为什么要学习这个方法compose简介compose的实现最容易理解的实现方式手写javascript中reduce方法redux中compose的实现参考文章最后前言:为什么要学习这个方法遇到这个方法主要是最近在阅读redux,koa 原理 等多次遇到这个方法,为了更好地理解框架原理,于是深入学习了一下compose的实现。然后也发现这属于函数式编程的东西,发现函数式编程是进击前端进阶的必经之路,因为像其中的纯函数的概念在redux的reducer中也展示得淋漓尽致,而保留函数计算结原创 2020-12-11 10:43:36 · 537 阅读 · 0 评论 -
手写ReactHook核心原理,再也不怕面试官问我ReactHook原理
React Hook原理手写useStateuseState的使用useState可以在函数组件中,添加state Hook。调用useState会返回一个state变量,以及更新state变量的方法。useState的参数是state变量的初始值,初始值仅在初次渲染时有效。更新state变量的方法,并不会像this.setState一样,合并state。而是替换state变量。下面是一个简单的例子, 会在页面上渲染count的值,点击setCount的按钮会更新count的值。functio原创 2020-10-19 08:10:05 · 503 阅读 · 1 评论 -
前端文章精选目录
文章目录:看文章不迷路redux源码解读Redux 源码解析系列(一) – Redux的实现思想Redux源码解析系列 (二)-- 牛鼻的createStoreRedux源码解析系列 (三)-- 神秘的中间件初体验Redux源码解析系列 (四)-- 揭秘applyMiddleware工作原理手写核心原理系列手写Vuex核心原理,再也不怕面试官问我Vuex原理手写webpack核心原理,再也不怕面试官问我webpack原理手写Vue-router核心原理,再也不怕面试官问我Vue-rout原创 2020-10-18 15:35:31 · 397 阅读 · 0 评论 -
手写generator核心原理,再也不怕面试官问我generator原理
手写核心generator原理文章目录手写核心generator原理1.generator的使用Generator 函数神奇之一:g()并不执行g函数Generator 函数神奇之二:分段执行提问:如果再写一行gen.next();呢?提问:如果g函数没有return语句呢?提问:如果g函数的return语句后面依然有yield呢?提问:如果g函数没有yield和return语句呢?提问:如果只有return语句呢?提问:下面代码会有什么结果?继续提问:如果第二个yield o++;改成yield;会怎样原创 2020-08-10 17:10:05 · 1101 阅读 · 0 评论 -
手写Vue-router核心原理,再也不怕面试官问我Vue-router原理
手写vue-router核心原理文章目录手写vue-router核心原理一、核心原理1.什么是前端路由?2.如何实现前端路由?hash 实现history 实现二、原生js实现前端路由1.基于 hash 实现2.基于 history 实现三、基于Vue实现VueRouter四、剖析VueRouter本质五、分析Vue.use六、完善install方法七、完善VueRouter类八、完善$route九、完善router-view组件十、完善router-link组件一、核心原理1.什么是前端路由?在原创 2020-07-28 22:41:45 · 479 阅读 · 0 评论 -
手写webpack核心原理,再也不怕面试官问我webpack原理
手写webpack核心原理文章目录手写webpack核心原理一、核心打包原理1.1 打包的主要流程如下1.2 具体细节二、基本准备工作三、获取模块内容四、分析模块五、收集依赖六、ES6转成ES5(AST)七、递归获取所有依赖八、处理两个关键字一、核心打包原理1.1 打包的主要流程如下需要读到入口文件里面的内容。分析入口文件,递归的去读取模块所依赖的文件内容,生成AST语法树。根据AST语法树,生成浏览器能够运行的代码1.2 具体细节获取主模块内容分析模块安装@babel/pars原创 2020-07-25 17:23:34 · 623 阅读 · 0 评论 -
百度前端面试题:for in 和 for of的区别详解以及为for in的输出顺序
for in 和 for of 相对于大家肯定都不陌生,都是用来遍历属性的没错。那么先看下面的一个例子:例1const obj = { a: 1, b: 2, c: 3 } for (let i in obj) { console.log(i) // a // b // c } for (let i of obj) { console.log(.原创 2020-07-20 16:14:24 · 1642 阅读 · 0 评论 -
字节提前批前端面试题:将这段async/await代码翻译成Promise
如图,这道题,我轻而易举地说出了答案是3,2。原理的话我知道是封装成Promise,但要我翻译成Promise我还是很懵逼啊。 不得不学下怎么翻译。不得不说,感谢这道题,让我进一步地深入了解async/await,感谢面试官async/await 的基础使用及原理简介async/await是es7推出的一套关于异步的终极解决方案,为什么要说他是终极解决方案呢?因为他实在是太好用了,而且写起来还非常的简单。一:async/await基础语法// 定义一个异步函数(假设他是一个异步函数)getJS.原创 2020-07-18 20:23:35 · 405 阅读 · 1 评论 -
字节前端提前批面试题:触发了几次回流几次重绘
一道字节面试题刷新了我的认知,又学到了新知识,开心。刚开始我说了答案是各3次,因为获取一次offsetWidth一次,然后改变样式一次。但是后来发现之所以offsetWidth会触发重排是因为刷新渲染队列。而在这道题中,之前的渲染队列为空,所以不会触发重排。所以两次。后面发现又错了,是因为有渲染队列,所以因该是一次。不懂渲染队列没关系,往下看,就懂了。当然要分为古董浏览器和现代浏览器。现代浏览器(也就是说有渲染队列的)应当是一次,古董的应当是2次一.什么是重绘与重排浏览器下载完页面中的所有组件.原创 2020-07-18 13:38:42 · 568 阅读 · 0 评论 -
读李老课程引发的思考之JS执行机制-|超级 · 奥义|
文章目录1.变量提升阶段,代码位置会改变吗?2.编译阶段和变量提升存在什么关系呢?3.什么是执行上下文4.环境对象是怎么创建的5.执行阶段是执行的呢?6.什么是函数调用7.什么是 JavaScript 的调用栈8.为什么ES6之前要设计成不支持块级作用域呢?9.变量提升所带来什么问题10.ES6 是如何解决变量提升带来的缺陷11.JavaScript 是如何支持块级作用域的12.这道题输出什么13.什么是做用域链14.我们来测试一道题15.JavaScript 中的 this 是什么1.变量提升阶段,代.原创 2020-07-14 13:26:19 · 185 阅读 · 0 评论 -
读李老课程引发的思考之JS从栈、堆、预解析来解释闭包原理-|真 · 奥义|
文章目录1.下面三段代码会执行结果什么不同2.为什么第一段会栈溢出3.为什么第二段会正常4.为什么第三段会卡住页面5.为什么使⽤栈结构来管理函数调⽤?6.栈如何管理函数调⽤?7.既然有了栈,为什么还要堆?8.什么是惰性解析9.惰性解析的过程是怎样的呢10.闭包有哪三个特性11.那闭包给惰性解析带来什么问题呢12.怎么处理闭包带来的问题13. 当调⽤foo函数时,foo函数内部的变量a会分别分配到栈上?还是堆上?14.真的要把内部函数return 出去才算闭包吗?1.下面三段代码会执行结果什么不同fun.原创 2020-07-13 15:47:51 · 283 阅读 · 0 评论 -
前端校招美团面试 第一篇
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n0UJb49H-1593429409229)(https://static01.imgkr.com/temp/d39c0ea47bfe42a59d670a6eb6d910fe.png)]1. js异步加载的方式方案一、$(document).ready()需要引入jquery兼容所有浏览器$(document).ready(function() { alert("加载完成!");});方案二、<sc原创 2020-06-29 19:17:56 · 332 阅读 · 0 评论 -
前端校招滴滴面试 第一篇
1.用Promise实现延迟3秒后输出 delay(3000).then(f,e)A: function delay(timer) { return new Promise(function(resolve, reject) { setTimeout(function() { resolve(); }, timer) }) }2.图片懒加载原理 (lazy image)A.原创 2020-06-27 12:12:23 · 546 阅读 · 0 评论 -
前端校招字节跳动面试 第四篇
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U2amD6uz-1592816699821)(https://static01.imgkr.com/temp/bb66ea60e387465fa021e1f78e2b5e60.png)]面试官上来就问了一些比较简单的问题(除了自我介绍和项目经历)1、块级元素和行内元素分别有哪些?很简单,但是不容易答好,就跟问API一样,不过既然问了,还是要记一下:用分类法记住好块级元素[外链图片转存失败,源站可能有防盗链机制,建议将图原创 2020-06-22 17:05:24 · 456 阅读 · 0 评论 -
web安全之XSS攻击原理及防范
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nHwrCkXL-1592795850369)(https://static01.imgkr.com/temp/e31bf9555c2e44eeb535ca5ad63dda63.png)]一:什么是XSS攻击?XSS 即(Cross Site Scripting)中文名称为:跨站脚本攻击。XSS的重点不在于跨站点,而在于脚本的执行。那么XSS的原理是:恶意攻击者在web页面中会插入一些恶意的script代码。当用户浏览该页面原创 2020-06-22 11:17:59 · 2717 阅读 · 0 评论 -
WEB安全之-CSRF(跨站请求伪造)
WEB安全之-CSRF(跨站请求伪造)WEB安全中经常谈到的两个东西:XSS和CSRF。这两个概念在前端面试中也经常被问到,只要涉及到WEB安全的东西就必须提到他们哥俩,从我以往的面试经历中我多次死在这两个东西上,知道这两个东西但让我仔细描述下就瞎几把乱扯,结果可想而知。这几天也查阅了相关书籍,终于把这两个东西搞明白了,为此决定写篇文章来记录他们俩以备今后复习,这篇先介绍CSRF。CSRF是什么鬼CSRF(Cross Site Request Forgery) 跨站请求伪造。也被称为One Cl.原创 2020-06-21 19:53:33 · 551 阅读 · 0 评论 -
字节面试题:圣杯布局,有几种办法
圣杯布局是经典的css布局,左右两栏的宽度固定不变,中间那一栏是自适应,下面将用felx、float、position三种方法进行圣杯布局 效果图:left和right是定宽,middle是自适应的body代码:<body> <header></header> <div class="box"> <div class="left"></div> <div class="right"></di原创 2020-06-21 13:12:00 · 226 阅读 · 0 评论 -
flex设置成1和auto有什么区别
首先明确一点是, flex 是 flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况:flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值,则 flex 的默认值是 0 1 auto。同理,如下是等同的:.item {flex: 2333 3222 234px;}.item { flex-grow: 2333; flex-shrink: 3222; flex-basis: 234px;}当 flex 取值为 n原创 2020-06-21 08:23:45 · 1310 阅读 · 0 评论 -
前端校招字节跳动面试 第三篇
1. promise以及then方法相关。参考一步一步实现自己的Promise2. 使用构造函数创建对象相关。(1). 使用new创建时JS都做了哪些事情。(2). 如何自己实现new这个过程,包括创建空对象,如何将函数执行环境设置到该对象上,如何给它添加应该继承的方法,这里不能用 new Object或者对象字面量创建一个对象再将原型链连接上,因为new是需要自己实现的。function newFunc(father, ...rest) { var result = {}; resul.原创 2020-06-20 22:54:38 · 280 阅读 · 0 评论 -
es6中生成器Generator的使用场景
由于Generator可以暂停函数执行,返回任意表达式的值,这使得 Generator有多种应用场景,这篇文章简单整理一些Generator的使用场景。1、异步操作的同步化表达Generator函数的暂停执行的效果,意味着可以把异步操作写在yield表达式里面,等到调用next方法时再往后执行。这实际上等同于不需要写回调函数了,因为异步操作的后续操作可以放在yield表达式下面,反正要等到调用next方法时再执行。所以,Generator函数的一个重要实际意义就是用来处理异步操作,改写回调函数。fun原创 2020-06-20 21:46:05 · 3217 阅读 · 0 评论 -
http1.0 http1.1 http2.0特性及区别
[外链图片转存中…(img-Uh3yZdl2-1592646135460)]http1.0特性无状态:服务器不跟踪不记录请求过的状态无连接:浏览器每次请求都需要建立tcp连接无状态对于无状态的特性可以借助cookie/session机制来做身份认证和状态记录无连接无连接导致的性能缺陷有两种:无法复用连接每次发送请求,都需要进行一次tcp连接(即3次握手4次挥手),使得网络的利用率非常低队头阻塞http1.0规定在前一个请求响应到达之后下一个请求才能发送,如果前一个阻塞,后面原创 2020-06-20 17:43:17 · 297 阅读 · 0 评论 -
前端校招字节跳动面试 第二篇
字节跳动二面1.stick—footer的解决策略stick footer就是让footer元素固定在底部,1当内容不足满屏时,footer紧贴最底部。2,满屏需要下拉时,footer就在内容的底部通常用于提示的页面,下面有个x的按钮,这个按钮就是footer,它是用于关闭这个弹窗的,内容少时处在底部,多时下拉才显示。保证你都看完了。使用方法就是在所有的内容页设置height:100%;写文字的部分最小的高度min-height:100%;footer处在内容页之外<div class=.原创 2020-06-20 11:33:35 · 461 阅读 · 0 评论 -
详解浏览器工作原理
前言本文主要介绍如下内容:浏览器的高层结构浏览器的渲染原理浏览器如何加载Javascript脚本Javascript引擎如何工作引入在浏览器中输入URL并回车后都发生了什么?让我们从大家最熟悉的这个面试问题引入,先不往下看文章,你能脱口而出的说出答案嘛?如果可以恭喜你,你可以跳过这一小节。如果不可以那就还是看一下吧~URL解析:从URL中抽取出域名字段DNS域名解析:查找浏览器缓存:浏览器会缓存2-30分钟访问过网站的DNS信息,如未找到 检查系统缓存:检查hosts文件,它保原创 2020-06-20 10:38:40 · 400 阅读 · 0 评论 -
字节面试题:flex用法,应用场景
flex 的核心的概念就是 容器 和 轴。容器包括外层的 父容器 和内层的 子容器,轴包括 主轴 和 交叉轴,可以说 flex 布局的全部特性都构建在这两个概念上。flex 布局涉及到 12 个 CSS 属性(不含 display: flex),其中父容器、子容器各 6 个。不过常用的属性只有 4 个,父容器、子容器各 2 个设置了Flex布局后,子元素的float,clear,还有verticle-align属性都不起作用属性说明:父容器:justify-content :属性用于定义如何沿着..原创 2020-06-19 21:46:02 · 574 阅读 · 0 评论 -
(立下flag)每日10道前端面试题-22 关于 字节一面
这是某位不愿意透露姓名的大佬遇到的题。1.讲一下排序,给一个不懂快排序的人讲快排,复杂度,为什么它叫快排序?【见参考】个按照某个位置旋转的数组(连续且有序)求中位数,例如[7,8,9,1,2,3,4,5,6],复杂度,如何降到比n更低?思路:先找到最小的数,也就是还没翻转时arr[0]这个数。然后就可以算出中位数的位置了。public class findNumInRotateArr { public static double minNumberInRotateArray(int[.原创 2020-06-19 16:49:13 · 476 阅读 · 0 评论 -
学习vue源码(19)四探生命周期之初始化props
前面文章已经 把 created钩子函数触发前,beforeCreate触发后 的initInjections和initProvide讲完了,现在开始讲 initState的props部分。 // src/core/instance/init.js Vue.prototype._init = function (options?: Object) { …… vm._self = vm initLifecycle(vm) initEvents(vm) init.原创 2020-06-14 17:31:35 · 2459 阅读 · 0 评论