1. 如 何 实 现 ⼀ 个 d i v 垂 直 居 中 ( ⾄ 少 3 种 ⽅ 法 ) \color{YellowGreen}{1. 如何实现⼀个div垂直居中(⾄少3种⽅法) } 1.如何实现⼀个div垂直居中(⾄少3种⽅法)
答:其实实现水平垂直剧中方法有很多:
第一种:定位:
- 第一种思路:
通过给div设置绝对定位,
并且left,right,top,bottom设置为0,margin:auto即可 以水平垂直居中 - 第二种思路:
通过给div设置绝对定位,.left为50%,top为50%,
再给div设置距左是自身的一半 即:margin-left:自身宽度/2,margin-top:自身高度/2。 - 第三种思路:
通过给div设置绝对定位,left为50%,top为50%,
再给div设置跨左和跟上是自身 的一半:transform:translate3d(-50%,-50%,0) - 第四种思路:
flex布局:
思路:有两个div,父级div和子级div,
给父级div设置display:flex,并且设置父级div的水平 居中justify-content:center,并且给父级div设置垂直居中align-items:center即可
2. r e m 和 e m 的 区 别 ? \color{YellowGreen}{2. rem和em的区别? } 2.rem和em的区别?
答:rem和em都是相对单位,主要参考的标签不同:
rem:是相对于根字号,即相对于标签的font-size实现的,浏览器默认字号是font- size:16px
em:是相对于父元素标签的字号,和百分比%类似,%也是相对于父级的,只不过是%相对于父级 宽度的,而em相对于父级字号的
3.
C
o
o
k
i
e
,
l
o
c
a
l
S
t
o
r
a
g
e
,
s
e
s
s
i
o
n
S
t
o
r
a
g
e
三
者
的
异
同
?
\color{YellowGreen}{ 3. Cookie , localStorage ,sessionStorage 三者的异同? }
3.Cookie,localStorage,sessionStorage三者的异同?
4.
c
s
s
3
动
画
\color{YellowGreen}{ 4. css3动画}
4.css3动画
答:css3动画大致上包括两种:
第一种:过渡动画:主要通过transition来实现,通过设置过渡属性,运动时间,延迟时间 和运动速度实现。
第二种:关键帧动画:主要通过animation配合@keyframes实现 transition动画和animation动画的主要区别有两点:
- 第一点:transition动画需要事件来触发,animation不需要
- 第二点:transition只要开始结束两种状态,而animation可以实现多种状态,并且animation是 可以做循环次数甚至是无限运动
5. 原 型 及 原 型 链 理 解 ? \color{YellowGreen}{ 5. 原型及原型链理解? } 5.原型及原型链理解?
原型
- 函数都带有一个prototype 属性,这是属性是指向构造函数的原型对象,这个对象包含所有实例共享的属性和方法。
- 原型对象都有一个constructor 属性,这个属性指向所关联的构造函数。
- 每个对象都有一个__proto__ 属性[非标准的方法],这个属性指向构造函数的原型 prototype
原型链
- 当访问实例对象的某个属性时,会先在这个对象本身的属性上查找,如果没有找到,则会 通过 proto 属性去原型上查找,如果还没有 找到则会在构造函数的原型的__ proto__中查 找, 这样一层层向上查找就会形成一个作用域链,称为原型链
6. n e w 操 作 符 做 了 这 些 事 ? \color{YellowGreen}{ 6. new操作符做了这些事?} 6.new操作符做了这些事? - 它创建了一个全新的对象
- 它会被执行[[Prototype]](也就是__proto__)链接
- 它使this指向新创建的对象
- 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上
- 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error),那么new表达式中的函数调用将返回该对象引用
//模拟new
function objectFactory() {
const obj = new Object();
const Constructor = [].shift.call(arguments);
obj.__proto__ = Constructor.prototype;
const ret = Constructor.apply(obj, arguments);
return typeof ret === "object" ? ret : obj;
}
7. t h i s 指 向 的 6 种 情 况 ? \color{YellowGreen}{ 7. this指向的6种情况?} 7.this指向的6种情况?
全局中的函数和全局变量可以看作是window的方法和属性所以全局函数中的this指向window;方法中的this指向该方法所指的对象;
this指向函数运行时所属的对象 this不指函数本身,也不指函数所对的作用域,指向调用此函数的对象;
this指向分为六种情况:
1)全局函数中的this,在全局环境下调用的时候指向window
注意:如果全局函数内部是严格模式,则在全局环境下不指向window,指向undefined;
2)函数被赋值给某个事件时,指向对象所属的对象
3)this在对象方法中使用时,指向的是方法所属的对象
4)在闭包中this指向window;
5)在构造函数中以及构造函数的原型对象中的this,都指向构造函数的实例对象 var arr=new Array( ) Array是构造函数 arr实例对象
6)箭头函数中的this指向箭头函数所在(定义)的执行环境
8. S P A 单 页 面 理 解 , 以 及 优 缺 点 ? \color{YellowGreen}{ 8.SPA单页面理解,以及优缺点?} 8.SPA单页面理解,以及优缺点?
SPA( single-page application )仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和
CSS。一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转;取而代之的是利用路由机制实现 HTML 内容的变换,UI
与用户的交互,避免页面的重新加载。
优点:
- 用户体验好、快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染;
- 基于上面一点,SPA 相对对服务器压力小;
- 前后端职责分离,架构清晰,前端进行交互逻辑,后端负责数据处理;
缺点: - 初次加载耗时多:为实现单页 Web 应用功能及显示效果,需要在加载页面的时候将 JavaScript、CSS 统一加载,部分页面按需加载;
- 前进后退路由管理:由于单页应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理;
- SEO 难度较大:由于所有的内容都在一个页面中动态替换显示,所以在 SEO 上其有着天然的弱势。
9. v − m o d e l 的 原 理 ? \color{YellowGreen}{ 9.v-model 的原理?} 9.v−model的原理?
我们在 vue 项目中主要使用 v-model 指令在表单 input、textarea、select 等元素上创建双向数据绑定,我们知道 v-model 本质上不过是语法糖,v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件:
- text 和 textarea 元素使用 value 属性和 input 事件;
- checkbox 和 radio 使用 checked 属性和 change 事件;
- select 字段将 value 作为 prop 并将 change 作为事件
<input v-model='something'>
相当于
<input v-bind:value="something" v-on:input="something = $event.target.value">
10. 防 抖 和 节 流 ? \color{YellowGreen}{ 10.防抖和节流? } 10.防抖和节流?
- 防抖:
设定一个特定的时间,让函数在特定的时间内执行一次,不会频繁执行。通过定时器实现 - 节流:
延迟要执行的动作,若在延迟钱的这段时间内,再次触发,则取消之前开启的动作,重新计时。