前端
文章平均质量分 69
安萌萌萌萌萌
国企程序媛一枚~
展开
-
前端面试中JS高频手写代码(二)
上一篇主要介绍了sqrt函数、new函数、节流、防抖、深拷贝、双向绑定、类的继承、柯里化函数、洋葱模型 koa、koa2的Js实现,下面实现部分js底层函数。1. call函数//思路:将要改变this指向的方法挂到目标this上执行并返回//callFunction.prototype.myCall=function(obj){ //1、是否传入this指向的对象,没有默认绑定window obj = obj || window; //2、将this赋值给目标对象的一个自定义方法 ob.原创 2021-08-06 17:32:49 · 207 阅读 · 0 评论 -
前端面试中JS高频手写代码(一)
作为一个前端程序媛,在秋招的浪潮中越挫越勇,从最初一到手撕代码环节就紧张到后来的游刃有余,再到引导面试官往自己的长处发问,最后通过总结和整理面经来不断提高自己的知识储备。前端的手撕代码环节,除了掌握Leetcode和牛客的简单、中等类型的算法题外,还需要掌握一些函数的底层原理,还要学以致用、举一反三,迅速实现这些函数,比如常见的new函数、sqrt函数、双向绑定、节流防抖、柯里化函数、洋葱模型等。1. 实现sqrt函数思路:二分法其中Number.EPSILON实际上是 JavaScrip.原创 2021-08-06 17:14:31 · 413 阅读 · 0 评论 -
JavaScript中常见的看代码写结果例题(二)
上一篇博客总结了几种典型的事件循环机制和原型链问题的例题,这篇文章来看下变量提升、箭头函数和闭包例题。三、变量提升现阶段的开发,需要大家掌握一些ES6新特性,其中块级变量let、块级常量const和var一样,都是用来声明变量,解决变量提升问题。let和const特点:i. 没有变量的提升(Js是弱语言,使用var变量再后声明,在执行中会对变量预解析,而let不会)ii. 同一个作用不能重复定义同一个名称(var会覆盖、let会报错)iii. 有严格的作用域(var属于函作用域(在该函数中.原创 2021-08-06 14:17:25 · 322 阅读 · 0 评论 -
JavaScript中常见的看代码写结果例题(一)
同学们都知道,在前端面试中不管你的技术栈是vue还是react,各大公司对于JavaScript语言还是有一定要求的,此外在面试手撕代码环节,通常会考你一些JS基础或源码,尤其是看代码写结果最容易踩坑,通常出题的范围离不开以下几个方面:事件循环机制问题原型链问题变量提升问题箭头函数问题闭包打印…一、事件循环机制问题要了解事件循环机制,首先要知道Javascript是一门单线程语言,以及语句的执行顺序,还有什么是同步任务、什么是异步任务。这些内容在上一篇博客JavaScript中的事件原创 2021-08-05 16:03:43 · 758 阅读 · 0 评论 -
ES6中的promise的使用
一、提出promsie的目的?为解决回调地狱的问题(主要是异步嵌套的可读性可信任问题)那什么是回调地狱?什么是回调函数?回调地狱: 通俗来说就是将函数作为参数,层层嵌套。回调函数:一个函数作为参数需要依赖另一个函数执行调用。嵌套到底有什么问题?来看下面的代码,这就是一个函数嵌套,我们经常这样写,代码的缩进有种金字塔的视觉,容易成读代码的有点不方便之外就是看起来不那么美观,再来看一个面试中常见的顺序执行问题,打印的结果是什么?(自己执行下试试)再来看一个简洁的回调:这部分代码主要完成了原创 2020-09-04 11:08:23 · 170 阅读 · 0 评论 -
JS中数据类型的强制转换
1、数据类型转换成boolean()所有非0数字都为true空字符串=》false非空字符串=》truenull和undefined=》false2、转换成number()布尔值true=》1,false=》0字符串:纯数字=>对应数字;非纯数字=》0特殊数据类型:null=》0,undefined=》NaN【注】 parseInt()兼容Number()取整; parseFloat()取浮点数3、无穷的表示1/0:infinity-1/0:-infinity4、原创 2020-08-21 09:07:48 · 289 阅读 · 1 评论 -
重绘、重排和display、visible、opacity
什么是重绘当渲染树上更新一些只影响外观、颜色、透明度而不影响布局的属性时,就叫重绘。eg:background-color什么是重排(回流)页面渲染时,当页面中元素的位置,大小或结构、定位发生改变,或者对HTML结构增删查改时,浏览器会对所有的dom进行重新排序,这就是DOM回流,严重影响浏览器性能。重绘、重排的几种情况重排的几种情况: 1、盒子模型相关属性 2、定位属性及浮动 3、改变节点内部文字结构 ①. width , height , padding , margin , disp原创 2020-08-18 14:06:43 · 1184 阅读 · 0 评论 -
js中的立即执行函数
1、什么是立即执行函数?声明一个函数,并马上调用这个匿名函数就叫做立即执行函数;也可以说立即执行函数是一种语法,让你的函数在定义以后立即执行;2、立即执行函数的形式(function (){ //code})()3、立即执行函数的优点不必为函数命名,避免了污染全局变量立即执行函数内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量封装变量案例:如上图所示,alert输出总是3,这是因为i是贯穿整个作用域的,而不是给每一个li分配一个i,点击事件使异步,用户原创 2020-08-18 11:26:01 · 167 阅读 · 0 评论 -
JavaScript中的事件循环机制 及 案例说明
javascript是一门单线程语言,所以javascript是按语句的执行顺序执行的。虽然js是单线程,但是我们可以将任务分成两类1.同步任务:需要执行的任务在主线程上排队,一次执行2.异步任务:没有立马执行但是需要被执行的任务,放在 任务队列里面关于任务队列同步任务在主线程上完成,形成一个执行栈,主线程之外存在一个任务队列该任务队列包括宏任务队列、微任务队列,只要有异步任务,就会放到该任务队列里执行栈中的同步任务全部执行完,系统会读取任务队列里的任务,放到执行栈中执行关于宏任务、微任原创 2020-08-18 10:38:47 · 145 阅读 · 0 评论 -
浏览器页面之间进行通信的四种方式
1、localStorage一个窗口更新localStorage,另一个窗口监听window对象的”storage”事件,来实现通信。注:两个页面要同源(URL的协议、域名和端口相同)2、cookie+setInterval()page1将要传递的信息存储在cookie中,page2使用setInterval每隔一定时间读取cookie信息,即可随时获取要传递的信息。3、postMessagehtml5引入了一个跨文档通信的API,这个API为window对象新增了一个window.postM原创 2020-08-17 15:44:21 · 5687 阅读 · 0 评论 -
ES6 (ECMAsccript规范)新特性(相比ES5)
变量let、常量const、箭头函数、生成器、扩展运算符、解构赋值、模板字符串、promise类、set、map、for…i1、let、const(和var一样,都是声明变量)let和const特点:i. 没有变量的提升(Js是弱语言,使用var变量再后声明,在执行中会对变量预解析,而let不会)ii. 同一个作用不能重复定义同一个名称(var会覆盖、let会报错)iii. 有严格的作用域(var属于函作用域(在该函数中都可以调用、起作用)、let是块级作用域(只在{}之间起作用)) cons原创 2020-08-17 15:28:59 · 400 阅读 · 0 评论 -
HTTP状态码301和302的区别&重定向使用场景
301 redirect: 301 代表永久性转移(Permanently Moved)302 redirect: 302 代表暂时性转移(Temporarily Moved )二者本质都是重定向那么什么是重定向?就是地址A跳转到地址B。(Redirect)就是通过各种方法将各种网络请求重新定个方向转到其它位置(如:网页重定向、域名的重定向、路由选择的变化也是对数据报文经由路径的一种重定向)。总体来说,301和302都是**重定向**:即浏览器拿到该状态码后会重新跳转到一个新的url,这个新的ur原创 2020-08-17 14:49:28 · 670 阅读 · 0 评论 -
CSS3 媒体查询+rem移动端布局
弹性盒子和媒体查询什么是媒体查询?媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或是纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组。 媒体查询中可用于检测的媒体特性有width、height和color。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。媒体查询语法语法一: @media mediatetype and | not |only (media feature){原创 2020-06-02 23:04:31 · 352 阅读 · 0 评论 -
CSS3 弹性盒子+圣杯布局案例
弹性盒子布局.弹性盒子是 CSS3 的一种新的布局模式。 弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素用恰当的行为的布局方式。引入弹性盒子布局模式的目的是提供一种更加有效的方式来对一个容器中的元素进行排列、对其和分配空白空间。弹性盒子由弹性容器和弹性子元素组成,弹性容器通过设置display属性的值为flex将其定义为弹性容器。弹性容器内包含一个或多个弹性子元素。语法display:flex| inline-flexflex:将对象作为弹性伸缩盒显示-----原创 2020-06-02 22:53:28 · 919 阅读 · 0 评论 -
CSS3新增样式2D+3D效果-立方体旋转
CSS3新增样式2D+3D变形下面是通过旋转和平移实现的3D立方体旋转CSS3新增2D变形属性2D变形:transform主要包括以下几种:none、旋转rotate、扭曲skew、缩放scale、移动translate、矩阵变形matrix旋转和平移属性transform:rotate(30deg);//旋转角度transform:translate(100px,200px);//顺着X、Y轴平移的像素transform:translateX(100px);//顺着X轴平移的像素原创 2020-05-30 22:00:05 · 300 阅读 · 0 评论 -
JS插件-放大镜效果
放大镜插件先上效果图(同淘宝宝贝放大部分)总体可细分为三个div,右边大box,左上中box,左下小box鼠标移至small-lbox,相应的选项增加边框,middle-box也会改变主要代码先从small-box开始,有鼠标移入、移出事件,移入事件跟随着middle-box中img的改变、相应的small-box加边框(所有的small-box先去除边框) var osmallbox = $("small-box"); osmallimgs = osmallbox.get原创 2020-05-18 23:02:27 · 429 阅读 · 0 评论 -
JS实现超简单的画笔功能
画笔功能上线~~~(暂时只有画笔)超简单,几行代码搞定!![在这里插入图片描述](https://img-blog.csdnimg.cn/20200506220341626.jpg =450x200?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV...原创 2020-05-06 22:07:26 · 1907 阅读 · 0 评论 -
JS实现3D旋转图片
想将图片3D旋转展示出来,如下图所示要想3D展示,需要在样式中设置 transform-style属性为preserve-3d,根据图片的数量计算旋转度数,给每一张图片设置上旋转角度,使图片展开围成一个圈for (var i = 0; i < aImg.length; i++) { aImg[i].style.transform = "rotateY(" + i * 40 ...原创 2020-05-05 20:27:57 · 2853 阅读 · 0 评论 -
JS实现数码时钟
JS时钟来啦~ - 几行代码实现在页面上显示时间,制作一个简介漂亮的页面时钟。首先div里加载图片,默认显示数字0,<div id="d1"> <img src="./imgs/img/0.jpg" alt=""> <img src="./imgs/img/0.jpg" alt=""> <h1>时...原创 2020-05-05 19:28:22 · 1338 阅读 · 0 评论 -
JS轻松实现打砖块小游戏!一看就懂!
最近在苦学JS,突然发现自己对小游戏开发还蛮感兴趣的,继上一篇Flappybird现在又来打砖块啦~~~Flappybird链接敲完代码回头看其实也不难,但还是花了我一上午时间(是我太菜了!!!),话不多说,先上图看看效果吧~这是游戏界面,大框架三部分,打砖块部分(最重要!!!)、游戏信息部分(不重要)、按钮部分(不重要)游戏过程界面,开始后小球运动,左右键可以控制挡板移动,小球击打到砖...原创 2020-05-04 17:37:06 · 554 阅读 · 0 评论 -
用JS实现简单的Flappybird
最近在学js,敲了个简单的Flappybird,看下结果还不错,上几张图(有需要素材代码的最后有链接)总共做了六个工作:小鸟飞,柱子动、暂停按钮、继续按钮、得分、发奖牌下面简单介绍一下这几部分如何实现小鸟首先小鸟素材(翅膀上、翅膀下):给定小鸟初始位置,设定计时器,默认不点击屏幕,小鸟一直下降(翅膀下);点击屏幕小鸟向上飞,切换图片。 var img = new...原创 2020-05-03 17:39:04 · 775 阅读 · 0 评论