【面试次体验】堆糖前端开发实习生

时间 2019-11-08

原文原文链接

在上一次失败的经历以后，本菜鸟很是努力的梳理羽毛（整理知识点），在两天后参加了堆糖的视频面试。此次面试经历整体来讲比较好，多是查漏补缺起到了效果，大部分的题目都能大致回答出来，加上面试官很nice~~~
Anyway，仍是把面试过程整理出来。javascript

首先仍是从CSS开始，有遇到与上次面试相似题目的请参考今日头条前端实习生面试css

CSS题目

1.如何实现一个三栏布局html

三栏布局，问到的时候我觉得是左右固定，中间自适应，后来发现他就是想考我float。前端

*{
    margin: 0;
    padding: 0;
}
.left,.right,.middle{
    float:left;
    border: solid 1px #777;
    width: 30%;
    margin:1.55%;
}

而后面试官问我，这三个元素float了以后，对下面的元素有影响要怎么处理。java

清除浮动问题我发现是前端面试CSS方面常常问的一个问题，详细可参考文章：那些年咱们一块儿清除过的浮动。面试

主要的方法有添加多余标签，而后clear: both一下ajax

<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
<div class="clear"></div>

而后CSS改一下算法

.clear{
    clear: both;
}

第二个方法是在父层容器添加overflow:auto属性chrome

<div class="overflow">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

.overflow{
    overflow: auto;
}

第三个方法是用伪类::aftershell

<div class="clearfix">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

因为IE6-7不支持:after，使用 zoom:1触发 hasLayout。

.clearfix::after{
    display: block;
    content: "";
    visibility: hidden;
    clear: both;
}
.clearfix{
    *zoom:1;
}

2.position的几种属性

我发现这个面试官的问题都不算刁钻，position也是在学布局的时候必定要接触到的。经常使用的position有static、fixed、absolute和relative。

position:static
这个static是默认的，对块级框的块格式化，对行级框的行格式化，元素按照块格式化上下文或行格式化上下文正常排版。

position:relative
相对定位，元素正常排版，并能够用top left right bottom进行位置的偏移，然然后面的元素不会调整位置去适应这个相对定位的元素。

position:absolute
绝对定位，元素脱离正常排版，使用top left right bottom相对于第一个非static的父层定位。

position:fixed
与absolute相似，不过使用top left right bottom定位是在视口的固定位置上。

3.如何实现一个响应式布局

这个是一个经验题。我原觉得他要问我对Bootstrap等类库的使用，加之我从没接触过移动端，对于除了使用过Bootstrap和使用百分比宽度没再尝试过别的。

面试官说明是要本身写响应式，而后我就说我就是用百分比设置宽度。而后他问半分比相对于谁？

因此说仍是基础硬伤，由于本身作的时候没注意过相对于谁，并且大可能是外框，因此就说相对于窗口。面试官一笑，窗口？我说好吧，我再查查。。。顺便查了一下盒模型设置的各个百分比都是相对于谁的。

CSS中：width、margin和padding百分比是相对于包含块的！
通常状况下包含块是父元素，当position: fixed的时候，包含块为视口；当position: absolute的时候，包含块为最近的position不是static的祖先。

除此以外，响应式布局的方法还有：
CSS3 Media Query

经过在<head>里面插入这段内容，使分辨率在小于1024分辨率的状况下和大于1024分辨率的状况下能响应不一样的css文件。

<meta name="viewport" content="width=device-width; initial-scale=1.0">

设置原始缩放比例和视窗的大小

<link rel="stylesheet" type="text/css" href="common.css" media="all" />
<link rel="stylesheet" type="text/css" href="normalScreen.css" media="screen and (max-width: 1024px)" />
<link rel="stylesheet" type="text/css" href="widthScreen.css" media="screen and (min-width: 1024px)" />

一样，能够在样式表中镶嵌@media，文章推荐参考响应式布局这件小事

Javascript题目

1.Jquery中$('').click()和$('').on('click')的分别

我为了学基础，学原生的Javascript，已经好久没碰Jquery了。问到这个问题的时候，我只能很诚实的说我没有考虑过这个问题，若是让我说的话，多是原生的JS中onclick事件与addEventListener("click")的区别。

在面试完以后，我马上又上网查了这两个的分别，其实在效果上做用不大，就是说下列代码在实现上并无很大差距。

$("#myDiv").click(function(){
    alert("clicked");
})

$("#myDiv").on("click",function(){
    alert("clicked");
})

不一样的是，on()方法能够实现动态绑定。能够将全部的点击事件绑在一个父层元素上，也能够用off()方法解绑定。

$("body").on("click","button",function(){
    var btnValue = this.val();
    alert(btnValue+"clicked");
});
//为每个按钮绑定点击事件

$("#myDiv").off("click");//解除点击事件绑定

2.JS实现一个类

我发现，这个问题也是面试常会问到的，并且我以为这也是我在学习JS的时候遇到的一个难点。
提及类，就要提起原型链的问题，这里直接上例子。对于原型，能够直接参考我大神男朋友的博文Javascript 面向对象特性(1)——抛弃类、Javascript 面向对象特性(2)——找回类。

《Javascript高级程序设计》中讲到继承的时候提到了六种方式：原型链、借用构造函数、组合继承、原型式继承、寄生式继承、寄生组合式集成。

原型链方式的具体用法是建立一个构造函数，而后建立继承这个构造函数的引用类型，将这个引用的原型指向构造函数。在原型链的问题是，Student的原型为Person的实例，那么全部Student的实例会共享它引用类型的属性，因此实例在修改这个属性的时候会致使其余实例的实例都被修改。

function Person(name,age){
    this.name=name;
    this.age=age;
    this.sayName=function(){
        alert(this.name);
    }
}
function Student(school){
    this.school=school;
}
Student.prototype= new Person();

借用构造函数的用法是在一个引用类型中调用构造函数，使用apply()和call()方法能够在函数内部调用构造函数。问题是，对于Student的实例找不到哪些是Person中定义的。

function Person(name,age){
    this.name=name;
    this.age=age;
}
Person.prototype.sayName=function(){
    alert(this.name);
}
function Student(name,age,school){
    Person.call(this,name,age);
    this.school=school;
}

组合方式是综合了原型链与借用构造函数两种方式。

function Person(name,age){
    this.name=name;
    this.age=age;
}
Person.prototype.sayName=function(){
    alert(this.name);
}
function Student(name,age,school){
    Person.call(this,name,age);
    this.school=school;
}
Student.prototype= new Person();
Student.prototype.constructor=Student;

Student.prototype.saySchool=function(){
    alert(this.school);
}
var instance1=new Student("Kathy","23","UQ");
var instance2=new Student("Visper","24","KMUST");

instance1.saySchool();//UQ
instance2.sayName();//Visper

原型式继承，方法是经过一个现有的对象建立一个新的对象。

//引自《Javascript高级程序设计》
function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
var person = {
        name: "Kathy",
        age: "23"
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Visper";
anotherPerson.age = "24";

寄生式继承的方法是将原型式继承封装在一个方法内，而后再用工厂式的建立对象的方法。

//引自《Javascript高级程序设计》
function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
var person = {
    name: "Kathy",
    age: "23"
};
function createPerson(original){
    var clone=object(original); 
    clone.sayName=function(){
        alert(this.name);
    };
    return clone;
}
var anotherPerson = createAnother(person);
anotherPerson.name = "Visper";
anotherPerson.age = "24";

2.如何统计一个字符串中哪一个字母出现的次数最多

这个问题又是算法题，而算法题是我至关不擅长的。。。不过有上次选取“字符串中第一个只出现一次的字符”的经验，此次也是比较快的想出了一个方法。不过，也仍是不知道这个问题的最快解决办法是什么。

思路仍是将字符串变成数组，而后再sort()排序，以后为每一组字符计算数字，将目前出现次数最多的字符以及其次数记下来。

function maxCountValue(string){
    var letterArray=Array.prototype.slice.apply(string);
    var sortArray=letterArray.sort();
    var arrayLen=letterArray.length;
    var countNow=0,count=0,value=sortArray[0],maxCountValue="";
    for(var i=0;i<arrayLen;i++){
        //判断是否进入下个字符组
        if(value==sortArray[i]){
            countNow=countNow+1;
            //判断是否为最后一组而且判断当前次数以及目前最大次数
            if(i==arrayLen-1&count<countNow){
                maxCountValue=value;
            }
        }
        else{
            //若是当前次数大于目前最大次数
            if(count<countNow){
                count=countNow;
                maxCountValue=value;
            }
            value=sortArray[i];
            countNow=0
            countNow=countNow+1;
        }
    }
    alert(maxCountValue);
}

HTTP题目以及新技术题目

HTTP题目继续问到了AJAX的问题，上一篇面试题中有整理。

面试官紧接着有问到form提交和ajax提交的区别？
Form在提交的时候，会跳转页面或者原页面刷新。而AJAX是异步的，无需页面刷新而只是部分刷新。
Form提交时，JS不是必需的，并且数据按照表单结构提交。AJAX须要JS来实现，并且数据也要用程序处理。

以后面试官问到开发环境问题：

一、目前的开发环境是什么
曾用PC开发，使用EverEdit；这几个月转用Mac，使用HBuilder

二、shell操做命令行用过什么
简单的前进到文件目录cd
列出当前文件夹内的文件 ls -li
改变全部人权限 chown
该文件读写模式 chmod

三、chrome的调试方法
Elements中查询元素结构、以及元素的样式
Network中查看每一个资源的请求反馈时间
Sources中调试程序，在左栏程序文件上打断点，并在右侧输入变量名查看变量值的变化
Resource中查询Session、Cookie、本地存储及缓存的状态
Console中执行函数并查看错误行号或错误代码

四、代码管理工具使用过么？作哪些操做呢？
使用过Git：创建远程仓库，拉取本地仓库，更改以后submit，以后push到远程仓库。曾经Fork过别人的，而后修改事后也是submit再push。
说实话我作的我的项目比较多，对于GitHub的使用仅限于提交推送更新代码。因此也是大概的说了一下个人使用状况。

新技术题目

接触过什么比较前沿的技术？js框架、模块化、自动化工具、预编译语言？
呃。。呃。。呃。。。

当时个人反应好尴尬，不过也是实话实说我没接触过什么，只不过据说过angular.js、backbone.js之类的。其他的都没太据说过。。。汗

不过我有表示我之后会努力学习，迎头遇上！

最后问道面试官对个人印象：一、经验不足，二、新技术接触的太少。

由于我目前时间有限，只有天天晚上整理面试题，因此这短短的几个题整理了接近一个星期，不少问题也期待大神们的补充。。。目前也算是找到了工做，从此会继续努力，让个人羽翼丰满起来！