一、实现一个高度已知,左右宽度固定,中间宽度自适应的布局,有几种方式?
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的属性不会继承,部分继承
原型链继承
通过原型链查找实现继承
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;