自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(32)
  • 收藏
  • 关注

原创 说说JavaScript中的事件模型

javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件、鼠标事件、自定义事件等由于DOM是一个树结构,如果在父子节点绑定事件时候,当触发子节点的时候,就存在一个顺序问题,这就涉及到了事件流的概念事件冒泡是一种从下往上的传播方式,由最具体的元素(触发节点)然后逐渐向上传播到最不具体的那个节点,也就是DOM中最高层的父节点

2022-10-28 08:00:00 248 1

原创 JavaScript中执行上下文和执行栈是什么?

引擎会执行位于执行栈栈顶的执行上下文(一般是函数执行上下文),当该函数执行结束后,对应的执行上下文就会被弹出,然后控制流程到达执行栈的下一个执行上下文。可以有任意多个函数上下文,每次调用函数创建一个新的上下文,会创建一个私有作用域,函数内部声明的任何变量都不能在当前函数作用域外部直接访问。执行栈,也叫调用栈,具有 LIFO(后进先出)结构,用于存储在代码执行期间创建的所有执行上下文。每当引擎碰到一个函数的时候,它就会创建一个函数执行上下文,然后将这个执行上下文压到执行栈中。简单的来说,执行上下文是一种对。

2022-10-27 08:00:00 233

原创 Javascript如何实现继承?

下面以一张图作为总结:通过来划分不同的继承方式,最后的寄生式组合继承方式是通过组合继承改造之后的最优继承方式,而extends的语法糖和寄生组合继承的方式基本类似。

2022-10-25 08:00:00 156

原创 谈谈this对象的理解

函数的this关键字在JavaScript中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别在绝大多数情况下,函数的调用方式决定了this的值(运行时绑定)this关键字是函数运行时自动生成的一个内部对象,只能在函数内部使用,总指向调用它的对象// 当前调用栈是:baz // 因此,当前调用位置是全局作用域 console . log("baz");bar();//

2022-10-24 07:37:03 808

原创 JavaScript原型,原型链 ? 有什么特点?

_proto__作为不同对象之间的桥梁,用来指向创建它的构造函数的原型对象的每个对象的__proto__都是指向它的构造函数的原型对象prototype的构造函是一个函数对象,是通过Function构造器产生的原型对象本身是一个普通对象,而普通对象的构造函数都是Object刚刚上面说了,所有的构造器都是函数对象,函数对象都是Function构造产生的Object的原型对象也有__proto__属性指向null,null是原型链的顶端一切对象都是继承自Object对象,Object对象直接继承根源对象。

2022-10-24 07:32:13 864

原创 (每日一题)面试官:说说你对作用域链的理解

引擎会尝试在当前作用域下去寻找该变量,如果没找到,再到它的上层作用域寻找,以此类推直到找到该变量或是已经到了全局作用域。可见上述代码中在函数内部声明的变量或函数,在函数外部是无法访问的,这说明在函数内部定义的变量或者方法只是函数作用域。任何不在函数中或是大括号中声明的变量,都是在全局作用域下,全局作用域下声明的变量可以在程序的任意位置访问。把作用域比喻成一个建筑,这份建筑代表程序中的嵌套作用域链,第一层代表当前的执行作用域,顶层代表全局作用域。时找不到,向上一层作用域找,即全局作用域,还是找不到则报错。

2022-10-21 08:00:00 126

原创 (每日一题)面试官:说说你对闭包的理解?闭包使用场景

一般函数的词法环境在函数返回后就被销毁,但是闭包会保存对创建时所在词法环境的引用,即便创建时所在的执行上下文被销毁,但创建时所在词法环境依然存在,以达到延长变量的生命周期的目的。是维护它们各自的独立性的,每次调用其中一个计数器时,通过改变这个变量的值,会改变这个闭包的词法环境,不会影响另一个闭包中的变量。中,每当创建一个函数,闭包就会在函数创建的同时被创建出来,作为函数内部与外部连接起来的一座桥梁。例如,在创建新的对象或者类时,方法通常应该关联于对象的原型,而不是定义到对象的构造器中。没有自己的局部变量。

2022-10-20 08:00:00 182

原创 (每日一题)面试官:深拷贝浅拷贝的区别?如何实现一个深拷贝?

深拷贝开辟一个新的栈,两个对象属完成相同,但是对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。浅拷贝只复制属性指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存,修改对象属性会影响原对象。引用类型数据保存在堆内存中,引用数据类型的变量是一个指向堆内存中实际对象的引用,存在栈中。但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。从上图发现,浅拷贝和深拷贝都创建出一个新的对象,但在复制对象属性的时候,行为就不一样。下面简单实现一个浅拷贝。

2022-10-19 08:00:00 113

原创 (每日一题)面试官:== 和 ===区别,分别在什么情况使用

全等操作符由 3 个等于号( === )表示,只有两个操作数在不转换的前提下相等才返回。如果一个操作数是字符串,另一个操作数是数值,则尝试将字符串转换为数值,再比较是否相等。等于操作符(==)在比较中会先进行类型转换,再确定操作数是否相等。的情况下,我们可以使用相等操作符(),其他情况建议一律使用全等操作符(===)相等操作符(==)会做类型转换,再进行值的比较,全等运算符不会做类型转换。等于操作符用两个等于号( == )表示,如果操作数相等,则会返回。比较,相等操作符(==)为。前面文章,我们提到在。

2022-10-18 08:00:00 100

原创 (每日一题)面试官:谈谈 JavaScript 中的类型转换机制

前面我们讲到,JSundefined、null、boolean、string、number、symbolobject但是我们在声明的时候只有一种数据类型,只有到运行期间才会确定当前类型let x = y?1 : a;上面代码中,x的值在编译阶段是无法获取的,只有等到程序运行时才能知道虽然变量的数据类型是不确定的,但是各种运算符对数据类型是有要求的,如果运算子的类型与预期不符合,就会触发类型转换机制强制转换(显示转换)自动转换(隐式转换)

2022-10-17 08:19:58 146

原创 (每日一题)面试官:JavaScript字符串的常用方法有哪些?

我们也可将字符串常用的操作方法归纳为增、删、改、查,需要知道字符串的特点是一旦创建了,就不可变。这里的删的意思并不是说删除原字符串的内容,而是创建字符串的一个副本,再进行操作。这三个方法都返回调用它们的字符串的一个子字符串,而且都接收一或两个参数。从字符串开头去搜索传入的字符串,并返回位置(如果没找到,则返回 -1 )这里增的意思并不是说直接增添内容,而是创建字符串的一个副本,再进行操作。这里改的意思也不是改变原字符串,而是创建字符串的一个副本,再进行操作。把字符串按照指定的分割符,拆分成数组中的每一项。

2022-10-14 16:24:29 111

原创 数组的常用方法有哪些?

传入三个参数,分别是开始位置,要删除元素的数量,要插入的任意多个元素,返回删除元素的数组,对原数组产生影响。首先会创建一个当前数组的副本,然后再把它的参数添加到副本末尾,最后返回这个新构建的数组,不会影响原始数组。传入两个参数,分别是开始位置,删除元素的数量,返回包含删除元素的数组。方法接收任意数量的参数,并将它们添加到数组末尾,返回数组的最新长度。对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组。对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组。

2022-10-13 09:54:33 103

原创 (每日一题)面试官:说说JavaScript中的数据类型?存储上的差别?

在JavaScript基本类型复杂类型两种类型的区别是:存储位置不同。

2022-10-12 22:27:08 161

原创 (每日一题)面试官:让Chrome支持小于12px 的文字方式有哪些?区别

Zoom非标属性,有兼容问题,缩放会改变了元素占据的空间大小,触发重排大部分现代浏览器支持,并且对英文、数字、中文也能够生效,缩放不会改变了元素占据的空间大小,页面布局不会发生变化对谷歌浏览器有版本要求,在27之后,就取消了该属性的支持,并且只对英文、数字生效。

2022-10-10 08:04:33 97

原创 (每日一题)面试官:CSS如何画一个三角形?原理是什么?

在前端开发的时候,我们有时候会需要用到一个三角形的形状,比如地址选择或者播放器里面播放按钮通常情况下,我们会使用图片或者svg去完成三角形效果图,但如果单纯使用css如何完成一个三角形呢?实现过程似乎也并不困难,通过边框就可完成。

2022-10-09 13:38:53 158

原创 (每日一题)面试官:如何使用css完成视差滚动效果?

视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。,让背景相对于视口固定。及时一个元素有滚动机制,背景也不会随着元素的内容而滚动。当滚动鼠标滑轮的时候,各个图层以不同的速度移动,形成视觉差的效果。作用是设置背景图像是否固定或者随着页面的其余部分滚动。我们可以把网页解刨成:背景层、内容层、悬浮层。也就是说,背景一开始就已经被固定在初始的位置。/* 视差元素的父级需要3D视角 */同样,让我们先来看一下两个概念。完成滚动视觉差就需要将。

2022-10-08 10:02:49 227

原创 (每日一题)面试官:如何实现单行/多行文本溢出的省略样式?

在日常开发展示页面,如果一段文本的数量过长,受制于元素宽度的因素,有可能不能完全显示,为了提高用户的使用体验,这个时候就需要我们把溢出的文本显示成省略号单行文本溢出多行文本溢出。

2022-10-07 16:32:54 205

原创 (每日一题)面试官:如果要做优化,CSS提高性能的方法有哪些?

每一个网页都离不开css,但是很多人又认为,css主要是用来完成页面布局的,像一些细节或者优化,就不需要怎么考虑,实际上这种想法是不正确的作为页面渲染和内容展现的重要环节,css影响着用户对整个网站的第一体验因此,在整个产品研发过程中,css性能优化同样需要贯穿全程css实现性能的方式可以从选择器嵌套、属性特性、减少http这三面考虑,同时还要注意css代码的加载顺序。

2022-10-06 07:15:18 92

原创 (每日一题)面试官:什么是响应式设计?响应式设计的基本原理是什么?如何做?

面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题仅适用布局、信息、框架并不复杂的部门类型网站兼容各种设备工作量大,效率低下代码累赘,会出现隐藏无用的元素,加载时间加长其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构,会出现用户混淆的情况。

2022-10-05 07:04:08 237

原创 (每日一题)面试官:怎么理解回流跟重绘?什么场景下会触发?

现在我们要把这朵从左边移到了右边,那我们要先确定好右边的具体位置,画好形状(回流),再画上它原有的颜色(重绘)几何尺寸的变化(比如修改元素的宽、高或隐藏元素等)时,浏览器需要重新计算元素的几何属性,然后再将计算的结果绘制出来。在页面初始渲染阶段,回流不可避免的触发,可以理解成页面一开始是空白的元素,后面添加了新的元素使页面布局发生改变。),却并未影响其几何属性时,浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式,这里就仅仅触发了重绘。当你获取布局信息的操作的时候,会强制队列刷新,包括前面讲到的。

2022-10-04 07:06:16 162

原创 (每日一题)面试官:css3动画有哪些?

animation属性描述属性值指定动画完成一个周期所需要时间,单位秒(s)或毫秒(ms),默认是 0指定动画计时函数,即动画的速度曲线,默认是 “ease”指定动画延迟时间,即动画何时开始,默认是 0指定动画播放的次数,默认是 1animation-direction 指定动画播放的方向默认是 normal指定动画填充模式。默认是 none指定动画播放状态,正在运行或暂停。默认是 running指定 @keyframes 动画的名称CSS。

2022-10-03 12:24:28 149

原创 (每日一题)面试官:CSS3新增了哪些新特性?

即层叠样式表(Cascading Style Sheets)的简称,是一种标记语言,由浏览器解释执行用来使页面变得更美观。动画这个平常用的也很多,主要是做一个预设的动画。和一些页面交互的动画效果,结果和过渡应该一样,让页面不会那么生硬。:转换元素的位置(围绕那个点进行转换),默认值为`(x,y,z):(50%,50%,0)通常情况,背景都是覆盖整个元素的,利用这个属性可以设定背景颜色或图片的覆盖范围。当我们设置背景图片时,图片是会以左上角对齐,但是是以。属性允许你旋转,缩放,倾斜或平移给定元素。

2022-10-02 14:50:45 357

原创 (每日一题)面试官:介绍一下grid网格布局

是一个强大的布局,如一些常见的 CSS 布局,如居中,两列布局,三列布局等等是很容易实现的,在以前的文章中,也有使用。布局即网格布局,是一个二维的布局方式,由纵横相交的两组网格线形成的框架性布局结构,能够同时处理行与列。表示列宽是 200 px,但列的数量是不固定的,只要浏览器能够容纳得下,就可以放置元素。有时候,一些项目的指定位置,在现有网格的外部,就会产生显示网格和隐式网格。元素就是网格的项目,由于网格元素只能是容器的顶层子元素,所以。划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。

2022-10-01 09:57:56 214

原创 (每日一题)面试官:说说flexbox(弹性盒布局模型),以及适用场景?

定义了项目的缩小比例(容器宽度

2022-09-30 08:44:40 309

原创 (每日一题)面试官:如何实现两栏布局,右侧自适应?三栏布局中间自适应呢?

基于绝对定位的三栏布局:注意绝对定位的元素脱离文档流,相对于最近的已经定位的祖先元素进行定位。两栏布局实现效果就是将页面分割成左右宽度不等的两列,宽度较小的列设置为固定宽度,剩余宽度由另一列撑满,这里称宽度较小的列父元素为次要布局容器,宽度较大的列父元素为主要布局容器。两栏布局非常常见,往往是以一个定宽栏和一个自适应的栏并排展示存在。在日常布局中,无论是两栏布局还是三栏布局,使用的频率都非常高。文档,蓝色区域为主要内容布局容器,侧边栏为次要内容布局容器。可以说是最好的方案了,代码少,使用简单。

2022-09-29 07:08:26 296

原创 (每日一题)面试官:元素水平垂直居中的方法有哪些?如果元素不定宽高呢?

内联元素居中布局块级元素居中布局。

2022-09-28 07:07:57 112

原创 (每日一题)面试官:谈谈你对BFC的理解?

目的是形成一个相对于外界完全独立的空间,让内部的子元素不会影响到外部的元素。原因是元素之间相互的影响,导致了意料之外的情况,这里就涉及到。实际就是页面一个独立的容器,里面的子元素不影响外面的元素。为80的话,两个P之间的距离还是100,以最大的为准。前面讲到,每个元素的左外边距与包含块的左边界相接触。在计算高度时,浮动元素也会参与,所以我们可以触发。重叠(塌陷),以最大的为准,如果第一个P的。,则内部浮动元素计算高度时候也会计算。因此会根据包含块的宽度,和。的左边依然会与包含块的左边相接触。

2022-09-27 08:47:59 102

原创 (每日一题)面试官:css中,有哪些方式可以隐藏页面元素?区别?

在平常的样式排版中,我们经常遇到将某个模块隐藏的场景通过css隐藏元素的方法有很多种,它们看起来实现的效果是一致的但实际上每一种方法都有一丝轻微的不同,这些不同决定了在一些特定场合下使用哪一种方法。

2022-09-26 08:55:08 84

原创 (每日一题)面试官:说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别?

CSS像素(css pixel, px): 适用于web编程,在 CSS 中以 px 为后缀,是一个长度单位在 CSS 规范中,长度单位可以分为两类,绝对单位以及相对单位px是一个相对单位,相对的是设备像素(device pixel)一般情况,页面缩放比为1,1个CSS像素等于1个设备独立像素CSS在同一个设备上,每1个 CSS 像素所代表的设备像素是可以变化的(比如调整屏幕的分辨率)在不同的设备之间,每1个 CSS 像素所代表的设备像素是可以变化的(比如两个不同型号的手机)

2022-09-25 10:25:58 145

原创 (每日一题)面试官:说说em/px/rem/vh/vw区别?

传统的项目开发中,我们只会用到px、%、em这几个单位,它可以适用于大部分的项目开发,且拥有比较良好的兼容性从CSS3开始,浏览器对计量单位的支持又提升到了另外一个境界,新增了rem、vh、vw、vm等一些新的计量单位利用这些新的单位开发出比较良好的响应式页面,适应多种不同分辨率的终端,包括移动设备等px:绝对单位,页面按精确像素展示em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算,整个页面内1em不是一个固定的值rem:相对单位,可理解为root em。

2022-09-24 08:30:37 187

原创 (每日一题)面试官:说说你对盒子模型的理解?

经过上面的优先级计算规则,我们知道内联样式的优先级最高,如果外部样式需要覆盖内联样式,就需要使用。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。中,继承是指的是给父元素设置一些属性,后代元素会自动拥有这些属性。内联 > ID选择器 > 类选择器 > 标签选择器。选择器所选择的元素,叫做“选择器的对象”CSS选择器是CSS规则的第一部分。套用上面的算法,依次求出。

2022-09-23 06:47:40 153

原创 (每日一题)面试官:说说你对盒子模型的理解?

当对一个文档进行布局(layout)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box),即边框,围绕元素内容的内边距的一条或多条线,由粗细、样式、颜色三部分组成。,即内边距,清除内容周围的区域,内边距是透明的,取值不能为负,受盒子的。,即外边距,在元素外创建额外的空白,空白通常指不能放其他元素的区域。这时候,就可以发现盒子的所占据的宽度为200px。标准盒子模型,是浏览器默认的盒子模型。所以上面问题中,设置。

2022-09-21 22:46:44 197 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除