面试
8/5 21:00 阿里电话面试 20分钟
面试官评价：除了js,你了解点，其它的还是太少了
先介绍自己，介绍项目v-model 原理
- let const
let 变量 const 常量
不存在变量提升 暂时性死区 块级作用域（定义的不在全局里面）
- Symbol
- this
- bind, call, apply
- http
302 404
canvas
node.js 优点
前端工程化：webpack
8/15 作业帮初试 gg
行内标签 块标签
Array的方法
移动适配方案
webpack原理
最后一个字符串回文子序列算法没写出来。。
8/30 字节跳动 视频面试 一个小时
- git merge git rebase的区别
git merge 合并操作，将目标分支合并到当前分支
git merge
merge之前
执行命令。在master上
git merge dev
merge之后
可以看到，将dev分支上的最新记录，与主分支上的最新记录进行合并，并且提交了
git rebase 变基操作
git rebase 之前
git rebase master之后
操作记录
可以很明显的从上述图片中看到，将master分支rebase到dev上时，会将master上的新的commit拿到dev分支上。完全打乱了实际的历史提交记录
假设现在有一个master分支1-2-3,开发分支1-2-4-5.这两个在2的时候分开；
在dev分支上执行git merge master,将主分支合并到开发分支上，这时候的dev提交记录就会变成 1-2-4-5-6；这个6 就是两个分支最新的提交合并的一个新的提交；
如果执行git rebase master 将dev分支的基准修改，这时候的dev分支变成1-2-3-4-5；相当于从master的最新的提交出分开，而不是最开始的从2处分开
这里插一个问题,多次commit合并成一个commit
git rebase - i 版本号
这里将版本号之后的提交准备合并到版本号中，这个时候会进入到一个vi编辑模式，前面两行就是
git rebase -i 版本号之后
只需要将第二行的pick修改为squash,然后退出，就会将dev5.0的提交合并到dev4.0中
再加一个reset和revert的区别
git reset --hard 版本号
将HEAD指针指向指定版本，相当于舍弃了之后的所有
git revert -n 版本号
大致就是撤销该版本的修改，。我个人觉得，这就是一个简便的操作，把手动修改，变成命令撤销。并且提交到了暂存区，相当于执行了git add
还需要手动去commit才行
- iframe的全屏
看了一下，iframe是可以设置宽高的，那么，他就是一个内联块元素,
我当时是这么答的，我将iframe放在一个div块里面，iframe是全铺在div里的。视频播放时，自带的全屏按钮 - 301 302 304 401 403
- 301 永久重定向
- 302 临时重定向
- 304 客户端发送附带条件的请求时，但未满足条件时，服务端会返回 - 304，不包含任何响应的主题部分；我所理解的就是，客户端发送一个请求，但是本地存在该资源缓存，只是不知道该缓存可不可用，就在请求头中附带if-**的字段。
if-Modified-Since字段会带一个时间戳，服务器端会根据request头中：If-Modified-Since字段的时间与文件的实际修改时间进行比较。哪个新就用哪个 - 401 第一次返回401，表示该请求需要http认证，第二次返回401表示认证失败
- 403 服务器拒绝，权限不足
- cors
req = request
res = response //当时只记得res,导致答错了
后端给返回头设置
Access-Control-Allow-Origin
Access-Control-Allow-Headers
Access-Control-Allow-Methods
这里有一个问题，美团的面试官和字节的面试官都说post请求会发起复杂请求，但是mdn上说的是head,get，post这三种方法会发送一次请求。明天实际操作就知道了这里post并不会发送OPTION请求，而且本地文件发起ajax,它的origin为null
- 垂直居中
1.
display:flex;
justify-content:center; /**水平主轴**/
align-content:center; /*竖直交叉轴*/
2.
/*这个是人人网那个*/
/*子元素设置*/
position: absolute;
top:50%;
left:50%;
transform: translateX(-50%);
transform: translateY(-50%);
3
position: absolute;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
- flex布局中左侧固定右侧伸缩
calc(100%- 50px)
flex-grow:1;//拉伸因子
.main{
width:200px;
display: flex;
}
.main .a{
width:20px
}
.main b{width: 180px}
问 a,b宽度是多少。这题我答错了，
当时想的是bfc去了。实际应该是两者会收缩，等比收缩，
如果没有设置收缩因子的flex-shrink
- css 响应式正方形
1.
width:20vw;
height：20vw;
2.
/*百分比是根据父元素的宽来计算的的，但是这个里面不能插入元素
想要插入的化，就在加个块，使他脱离文档流，浮动出去*/
width:20%;
padding-top:20%;
3.
/*其实这个跟第2个差不多，想要插入元素的化，就添加子块，使其脱离文档流*/
.main{
width: 20vw;
}
.main::after{
content: '';
display: block;
padding-bottom:100%;
}
这里需要注意一点，就是长单词不会自动换行，平常的单词会换行；需要设置css3属性：word-wrap: break-word
padding-bottom:100%;
- box-sizing
- content-box 标准盒子
- border-box ie盒子
- 防抖函数
let debounce = function(func, delay){
let timeout = null;
return function(){
let args = arguments;
let context = this;
clearTimeout(timeout);
timeout = setTimeout(function(){
func.apply(context, args);
})
}
}
- 快速排序
我只说了原理。。。
人人网现场面试，聊了两个小时，面试笑嘻嘻，转身就GG
- 一个方块根据屏幕滚动，在父元素内滑动
absolute => fixed
el.getBoundingClientRect获取元素在页面中的位置,以及自身宽高 - 防抖
-垂直居中 - 两列布局，右侧是左侧两倍
我日，当时根本没想到用百分比。想到了网格布局，flex - 数组降维
- 数组乱序
