面试题总结
一、谈谈bfc?
一、什么是BFC
BFC(block formatting context):简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候,BFC提供了一个环境,在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。 也就是说,如果一个元素符合了成为BFC的条件,该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC),是一个隔离了的独立容器。(在 CSS3 中,BFC 叫做 Flow Root)
二、 形成 BFC 的条件
1、浮动元素,float 除 none 以外的值;
2、绝对定位元素,position(absolute,fixed);
3、display 为以下其中之一的值 inline-blocks,table-cells,table-captions;
4、overflow 除了 visible 以外的值(hidden,auto,scroll)
三、BFC常见作用
1、包含浮动元素
问题案例:高度塌陷问题:在通常情况下父元素的高度会被子元素撑开,而在这里因为其子元素为浮动元素所以父元素发生了高度坍塌,上下边界重合。这时就可以用bfc来清除浮动了。
2、不被浮动元素覆盖
问题案例: div浮动兄弟遮盖问题:由于左侧块级元素发生了浮动,所以和右侧未发生浮动的块级元素不在同一层内,所以会发生div遮挡问题。可以给蓝色块加 overflow: hidden,触发bfc来解决遮挡问题。
3、 BFC 会阻止外边距折叠
问题案例:margin塌陷问题:在标准文档流中,块级标签之间竖直方向的margin会以大的为准,这就是margin的塌陷现象。可以用overflow:hidden产生bfc来解决。
二、跨域携带的cookie如何设置?
方法一:服务器端使用CROS协议解决跨域访问数据问题
1.1 resp.setHeader("Access-Control-Allow-Origin", origin); // 允许指定域访问跨域资源
1.2 resp.setHeader("Access-Control-Allow-Credentials", "true");
// 允许客户端携带跨域cookie,此时origin值不能为“*”,只能为指定单一域名
方法二:客户端需要设置Ajax请求属性withCredentials=true,让Ajax请求都带上Cookie。
2.1 对于XMLHttpRequest的Ajax请求.
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.withCredentials = true; // 携带跨域cookie
xhr.send();
2.2 对于JQuery的Ajax请求
$.ajax({
type: "GET",
url: url,
xhrFields: {
withCredentials: true // 携带跨域cookie
},
processData: false,
success: function(data) {
console.log(data);
}
});
2.3 对于axios的Ajax请求
axios.defaults.withCredentials=true; // 让ajax携带cookie
意思就是该属性是一个用来配置xhr对象的键值对,比如你可以在跨域请求有需要的时候设置withCredentials:true
那么withCredentials:true是什么意思?
该属性是告诉浏览器,1、允许创建来自不同域的cookie信息;2、每次的跨域请求都允许带上该cookie信息
该配置项还需要后台的允许才有效,后台如果允许浏览器发送带凭据的请求,那么会在响应头中带上"Access-Control-ALLOW-Credentials",值为"true"。
如果不加此响应头,浏览器将获取不到服务端的响应体。
好了,到此我们已经知道怎么跨域创建cookies,并在每次的跨域请求中带上cookies了,简单的说就是前台要配置一个ajax参数:xhrFields:{withCredentials:true},有的资料上说还要设置crossDomain:true,但是笔者测试好像不需要;后台要在响应头中绑定"Access-Control-ALLOW-Credentials",值为"true"。
前端和后端都需要设置 Credentials, 后端如果是 PHP 的话是设置 header("Access-Control-Allow-Credentials: true");
cookie一般情况下是没法跨域的,甚至POST请求一般情况下都是无法跨域的。但经过特殊处理后就可以了,这个处理需要客户端服务器的配合。
一些请求可以通过jsonp的方式来实现跨域,但如果是非幂等的请求,还是需要POST的。处理如下:
服务器端设置:
- header("Access-Control-Allow-Credentials: true");
- header("Access-Control-Allow-Origin: http://www.xxx.com");
客户端请求的时候带上withCredentials参数,代码如下:
原生ajax:
- var xhr = new XMLHttpRequest();
- xhr.open("POST", "http://xxxx.com/demo/b/index.php", true);
- xhr.withCredentials = true; //支持跨域发送cookies
- xhr.send();
jquery ajax:
- $.ajax({
- type: "POST",
- url: "http://xxx.com/api/test",
- dataType: 'jsonp',
- xhrFields: {
- withCredentials: true
- },
- crossDomain: true,
- success:function(){},
- error:function(){}
- })
三、vue中更新data中的数组如何响应?
vue的核心是数据与视图的双向绑定,改变数组触发视图更新(push(最后添加)pop(删最后一个)shift(删第一个)unshift(开头添加)splice(删除 删几个 添加几个)sort(排序)reverse(颠倒顺序) slice(返回选定元素(开始 结束))vue、数组更新那,有时候你用push,你会发现,数据已经改变,但是dom结构上却没有更新,所有一般还是使用$set()和object.assign())
vue中data数组的更新,需要使用vm.assgin({},arr,{新增的属性});
let _this = this;
for(let i=0; i<_this.list.length; i++){ //list为列表信息,就不附上了,下同
_this.a[i] = Object.assign({}, _this.a[i], true);
}
_this.a = Object.assign({}, _this.a);
或者直接使用this.$set(arr,item,value);
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
1.当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
2.当你修改数组的长度时,例如:vm.items.length = newLength
为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将触发状态更新,例如:
Vue.set(example1.items, indexOfItem, newValue)
example1.items.splice(indexOfItem, 1, newValue)
解决第二类:
example1.items.splice(newLength)
四、几个promise顺序执行,如果是数组呢?(这个百度都没百度到 可能根据自己的理解吧 .all .then async 和 await)
###promise异步执行转同步执行,每次promise都需要return一个新的promise
var a = function() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
console.log('a')
resolve('a')
}, 1000)
})
}
var b = function(data) {
return new Promise(function(resolve, reject) {
console.log('b')
resolve(data +'b')
})
}
var c = function(data) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
console.log('c')
resolve(data +'c')
}, 500)
})
}
//链式调用
a()
.then(function(data) {
return b(data)
})
.then(function(data) {
return c(data)
})
.then(function(data) {
console.log(data)// abc
})
.catch(function(e) {
console.log(data)
})
方法二 如果是数组,(使用组织函数队列)
// 组织函数队列
function reduce(arr) {
var sequence = Promise.resolve()
arr.forEach(function(item) {
sequence = sequence.then(item)
})
return sequence
}
// 顺序执行函数队列
reduce([a, b, c])
.then(function(data) {
console.log(data)// abc
})
.catch(function(e) {
console.log(e)
})