20170911在CVTE的面试总结

还是说点废话：
    本来就带着试试的心态，居然进了CVTE的面试，而且还能进第二面，感觉挺幸运。一回来查，二面挂了。今天也很累，十点多过去，午饭也不敢吃太多，怕突然轮到自己面试，发挥不好。 
    虽然很累，但是还是想写点什么东西，至少多少不要让今天白过。也许之后的面试会有些许改善呢？

一面

一面是基础，问的都是前端要掌握的。

//盒模型
    这个答得还可以。也能说出CSS3的新属性border-sizing: content-box | border-box

//绝对定位 和 相对定位
    这个反而感觉没那么好，一开始还需要想，最后好像还答反了。面试官也没有揪出来。
    position: absolute | fixed 都是绝对定位，前者相对的是第一个非static的父元素，后者相对的是浏览器的左上角
    position: relative 是相对定位，相对的是自己本身所在的位置；

//了解闭包吗？
    感觉也是正常发挥了。
    闭包就是能够读取另外一个函数作用域里变量的函数。
    特点：1、可以读取另外一个函数作用域里的变量；2、可以将这些变量保存在内存中；3、可能会导致占用内存过大；4、创建特权方法用于访问控制

//一个数组有10个元素，每秒输出2个

//Vue的好处

//B继承A，有什么要注意的？
    这个问题只回答了 Sub.prototype = new Sup();
    实际上还少了一个 Sub.prototype.constructor = SubType();？

//VueX有用过吗？
    这个的确没用过，但是说了知道他的基本原理，state、mutations

//VueRouter用的是哪种模式？
    hash（带#，原理是使用URL的hash来模拟一个完整的URL，于是当URL发生改变时，页面不会重新加载）
    history（可以去掉#，但是后台也要跟着相应配置）

---

二面

> 个人感觉二面发挥的算正常，只是编程题不会写，写布局的也没有完全写出来

    //编程题大概是：一个数组var arr=[func1,func2,func3];然后需要一个compile函数来返回一个函数：compile(arr)({index:0});
    //犯了两个错：
    //① 问了面试官后面({index: 0})是什么意思，其实因为读读题目就知道，compile返回一个函数，那这个函数后面加一个({index: 0})就自然而然地传参进去立马执行了；
    //② 在compile写错了变量，自己本来穿进去的就是array，写成了arr，粗心。

    > 布局题：类似这样的，三个圆固定，中间两条杠随着浏览器拖动而自适应
    要求：1、中间两条杠需要无缝连接到圆；
         2、（扩展：根据进度的不同，亮不同的灯0% 50% 100% 或其他）

答：
写于20170920
这道题想了一下，因为要求是进度条和圆无缝连接，可以想到进度条和圆是在不同的z-index的。
所以不妨先把进度条先做好：

//css:
#top {
    display: flex;
    margin-top: 25px;
}
.loadbar {
    width: 50px;
    height: 50px;
    flex: 1;
    border-radius: 20px 20px 20px 20px;
    background-color: red;
}
.loadfoo {
    display: block;
    width: 10%;
    padding: 25px;
    border-radius: 20px 0px 0px 20px;
    background-color: green;
}

//html:
<div id="bottom">
    <div class="loadbar">
        <span class="loadfoo">
        </span>
    </div>
</div>
//效果如下：

现在“底层”的进度条弄好了，接下来弄“顶层”的三个圆！哦不，是三个圆加两条透明杠

//css
#bottom {
    display: flex;
    width: 100%;
    position: absolute;
    margin-top: -25px;
}
.circle {
    display: block;
    width:100px;
    height:100px;
    border-radius: 50px;
    background-color: orange;
}
.opacity {
    flex: 1;
}

//html
<div id="bottom">
    <span class="circle">
    span>
    <span class="opacity">
    span>
    <span class="circle">
    span>
    <span class="opacity">
    span>
    <span class="circle">
    span>
div>

效果如下：

//觉得自己哪里不足？
    回答了编程题，其实作为前端最忌讳就是说编程题，算法。面试官也说了，这个需要日积月累的，所以感觉自己起步的晚。没关系，以后还有的是时间。

> 写在最后吧。
今天遇到的两个同学都没过，其实我感觉自己已经够幸运了。这么顺利参加两轮面试。这段时间复习校招真的很累。很不喜欢现在这种飘浮不定的感觉，真的。我也不想浪费过去五六个月在唯品会实习的这个良机，我只能在这次校招有稍微的优势了。
真的不敢想如果校招没有找到满意的工作，我会怎样，我会在哪里？
好吧，稍微总结过后，就要振作起来了。这周也不轻松，周二腾讯，周六唯品会，周日迅雷。
其实我真的希望唯品会那次能够进入，起码有个面试机会。
想法总是美好的，我也知道你不会辜负自己。
加油！