面试题总结

清疚 2022-05-27 11:46 275阅读 0赞

一、谈谈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来清除浮动了。   
![这里写图片描述][20160805112000601]

2、不被浮动元素覆盖   
问题案例： div浮动兄弟遮盖问题：由于左侧块级元素发生了浮动，所以和右侧未发生浮动的块级元素不在同一层内，所以会发生div遮挡问题。可以给蓝色块加 overflow: hidden，触发bfc来解决遮挡问题。   
![这里写图片描述][20160805115308490]

3、 BFC 会阻止外边距折叠   
问题案例：margin塌陷问题：在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。可以用overflow：hidden产生bfc来解决。   
![这里写图片描述][20160805111136261]

二、跨域携带的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的。处理如下：

服务器端设置：

**\[plain\]**  [view plain][]  [copy][view plain]

1.  header("Access-Control-Allow-Credentials: true");  
2.    
3.  header("Access-Control-Allow-Origin: http://www.xxx.com");

客户端请求的时候带上withCredentials参数，代码如下：

原生ajax：

**\[javascript\]**  [view plain][]  [copy][view plain]

1.  var xhr = new XMLHttpRequest();    
2.  xhr.open("POST", "http://xxxx.com/demo/b/index.php", true);    
3.  xhr.withCredentials = true; //支持跨域发送cookies  
4.  xhr.send();

jquery ajax：

**\[javascript\]**  [view plain][]  [copy][view plain]

1.   $.ajax(\{  
2.       type: "POST",  
3.       url: "http://xxx.com/api/test",  
4.       dataType: 'jsonp',  
5.       xhrFields: \{  
6.            withCredentials: true  
7.       \},  
8.       crossDomain: true,  
9.       success:function()\{\},  
10.      error:function()\{\}  
11. \})

三、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)

\})

[20160805112000601]: /images/20220527/63a22f5a83944b8aa69e9d41bb5b3f85.png
[20160805115308490]: /images/20220527/b9653f1702a64fbb833dc4d0d24d1e2e.png
[20160805111136261]: /images/20220527/984c57dad00e49388f51c1853436cf0f.png
[view plain]: https://blog.csdn.net/sysuzjz/article/details/51566713#