前端面试(六)

一、实现一个高度已知,左右宽度固定,中间宽度自适应的布局,有几种方式?

float布局,absolute布局,flex布局,table布局,grid布局。

(float布局,absolute布局会脱离文档流,flex和grid兼容性问题,table布局比较繁琐,把高度已知去掉,flex和table布局依旧能用)

二、CSS盒模型

content+padding+border+margin

IE模型:width/height=content+padding+border

标准模型:width/height=content

通过CSS3  box-sizing设置

IE模型 box-sizing: border-box;

标准模型 box-sizing: content-box;

JS获取盒模型对应的宽高:

dom.style.width/height;

dom.currentStyle.width/height;

window.getComputedStyle(dom).width/height;

dom.getBoundingClientRect().width.height;

三、BFC

概念:块级格式化上下文

原理:同一个BFC外边距方向会发生重叠;BFC区域不会与浮动元素的box重叠;BFC是一个独立容器,不被外面影响;BFC计算高度的时候,浮动元素也参与

创建BFC:float不为none;position为absolute或者fixed;display的值为table-cell,table-caption,or inline-block中的任何一个;

              overflow不为visible

BFC作用:解决边距问题,清除浮动,解决父级元素高度塌陷(BFC子元素即使是float也会参与计算)

四、DOM事件

DOM事件的级别:

DOM0:    element.onclick = function();

DOM2:    element.addEventListener('click',function(){});

DOM3:    element.addEventListener('keyup',function(){});

DOM事件模型:

捕获(从最外层往里),冒泡(从最里层往外)

DOM事件流:

捕获——目标阶段——冒泡

DOM事件捕获的具体流程:

Evevt对象的常见应用:

event.preventDefault();   //  阻止默认事件

event.stopProgation();   //  阻止冒泡

event.stopImmediateProgation(); 

stopImmediatePropagation方法:

    stopImmediatePropagation方法作用在当前节点以及事件链上的所有后续节点上,目的是在执行完当前事件处理程序之后,停止当前节点以及所有后续节点的事件处理程序的运行

stopPropagation方法

    stopPropagation方法作用在后续节点上,目的在执行完绑定到当前元素上的所有事件处理程序之后,停止执行所有后续节点的事件处理程序

event.currentTarget;  // 事件绑定的元素

event.target;  //触发事件的元素

两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了;currentTarget始终是监听事件者,而target是事件的真正发出者。

自定义事件:

var eve = new Event('custome');  // 自定义事件
ev.addEventListener('custome',()=>{  // 事件监听
   console.log('custome');
}
ev.dispatchEvemt(eve);  // 触发事件

五、HTTP协议

特点:

简单快速,灵活,无连接、无状态

组成:

请求行,请求头,空行,请求体;状态行,响应头,空行,响应体

方法:

GET获取资源,POST传输资源,PUT更新资源,DELETE删除资源,HEAD获取报文首部

POST和GET的区别:

●GET在浏览器回退时是无害的,而POST会再次提交请求
●GET产生的URL地址可以被收藏,而POST不可以
●GET请求会被浏览器主动缓存,而POST不会,除非手动设置
●GET请求只能进行url编码,而POST支持多种编码方式
●GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留
●GET请求在URL中传送的参数是有长度限制的,而POST没有限制
●对参数的数据类型,GET只接受ASCII字符,而POST没有限制
●GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息
●GET参数通过URL传递,POST放在Request body中

HTTP状态码

1xx:指示信息-表示请求已接收,继续处理
2xx:成功-表示请求已被成功接收
3xx:重定向-要完成请求必须进行更进一步的操作
4xx:客户端错误-请求有语法错误或请求无法实现
5xx:服务器错误-服务器未能实现合法的请求

200 OK:客户端请求成功
206 Partial Content:客户发送了-一个带有Range头的GET请求,服务器完成了它
301 Moved Permanently:所请求的页面已经转移至新的url
302 Found:所请求的页面已经临时转移至新的url
304 Not Modified:客户端有缓冲的文档并发出了一个条件性的请求,服务器告诉客户,原来缓冲的文档还可以继续使用
400 Bad Request:客户端请求有语法错误,不能被服务器所理解
401 Unauthorized:请求未经授权,这个状态代码必须和WWW- Authenticate报头域-起使用
403 Forbidden:对被请求页面的访问被禁止
404 Not Found;请求资源不存在
500 Internal Server Error:服务器发生不可预期的错误原来缓冲的文档还可以继续使用
503 Server Unavailable:请求未完成,服务器临时过载或当机,一段时间后可能恢复正常
 

持久连接(1.1版本才支持)

HTTP协议采用“请求-应答"模式,当使用普通模式,即非Keep-Alive模式时,每个请求/应答客户和服务器都要新建一个连接, 完成之后立即断开连接(HTTP协议为无连接的协议)。当使用Keep-Alive模式(又称持久连接、连接重用)时,Keep-Alive 功能使客户端到服务器端的连接持续有效,当出现对服务器的后继请求时,Keep-Alive 功能避免了建立或者重新建立连接
 

管线化

在使用持久连接的情况下,某个连接上消息的传递类似于
请求1 ->响应1 ->请求2->响应2->请求3 ->响应3
某个连接上的消息变成了类似这样
请求1->请求2->请求3->响应1>响应2->响应3

●管线化机制通过持久连接完成,仅HTTP/1.1支持此技术
●只有GET和HEAD请求可以进行管线化,而POST则有所限制.
●初次创建连接时不应启动管线机制,因为对方(服务器)不一-定支持HTTP/1.1版本的协议
●管线化不会影响响应到来的顺序,如上面的例子所示,响应返回的顺序并未改变
●HTTP/1.1要求服务器端支持管线化,但并不要求服务器端也对响应进行管线化处理,只是要求对于管线化的请求不失败即可
●由于上面提到的服务器端问题,开启管线化很可能并不会带来大幅度的性能提升,而且很多服务器端和代理程序对管线化的支持并不好,因此现代浏览器如Chrome和Firefox默认并未开启管线化支持
 

六、原型链

1、创建对象的几种方法

(1)字面量创建:

         var o1={name:'o1};
         var o11=new Object({name:'o11});

(2)构造函数
         var M=function(){this.name='o2}
         var o2=new M();

(3)Object.create方法
        var P={name:'o3};
        var o3=Object.create(P)

2、原型链

 

3、instanceof

4、new运算符

 

七、继承

 

1、类的声明

// 构造函数声明
function Animal(){
   this.name = 'name'
}

// ES6的class声明
class Anaimal2{
  constructor(){
     this.name = name;
  }
}

2、实例化

new Animal();

new Animal2();

3、继承方式

构造函数继承

通过call改变this指向

// 构造函数继承
function Parent1() {
  this.name = 'parent1';
}
function Child1() {
  Parent1.call(this); // apply
  this.type = 'child1';
}

缺点:原型链prototype的属性不会继承,部分继承

原型链继承

通过原型链查找实现继承

uploading.4e448015.gif正在上传…重新上传取消uploading.4e448015.gif正在上传…重新上传取消

function Parent2() {
   this.name= 'parent2';
}
function Child2() {
   this.type = 'child2';
}
Child2.prototype = new Parent2();  // 改变原型指向从而实现继承

new Child2(); // 实例化

缺点:修改实例的属性会影响到类的属性从而影响到其他实例的属性,因为实例是共用prototype属性

组合继承

function Parent3() {
  this.name = 'parent3';
}
function Child3() {
  Parent3.call(this);  // 构造继承
  this.type = 'child3';
}
Child3.prototype = new Parent3();  // 原型继承
// 组合继承的优化1
function Parent4(){
  this.name = 'parent4';
  this.play = [1,2,3];
}
function Child4(){
  Parent4.call(this);
  this.type = 'child4';
}
Child4.prototye = Parent4.prototype;
// 组合继承的优化2
function Parent5() {
  this.name = 'parent5';
  this.play = [1,2,3];
}
function Child5() {
  Parent4.call(this);
  this.type = 'child5';
}
Child5.prototye = Object.create(Parent5.prototype);
Child5.prototye.constrctor = Child5;

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值