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

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

阅读量：6098 次

发布时间：2019-06-20

本文共 5631 字，大约阅读时间需要 18 分钟。

在上一次失败的经历之后，本菜鸟非常努力的梳理羽毛（整理知识点），在两天后参加了堆糖的视频面试。这次面试经历总体来说比较好，可能是查漏补缺起到了效果，大部分的题目都能大体回答出来，加上面试官很nice~~~

Anyway，还是把面试过程整理出来。

首先还是从CSS开始，有遇到与上次面试类似题目的请参考

CSS题目

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

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

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

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

清除浮动问题我发现是前端面试CSS方面经常问的一个问题，详细可参考文章：。

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

然后CSS改一下

.clear{    clear: both;}

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

.overflow{    overflow: auto;}

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

由于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文件。

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

同样，可以在样式表中镶嵌@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高级程序设计》中讲到继承的时候提到了六种方式：原型链、借用构造函数、组合继承、原型式继承、寄生式继承、寄生组合式集成。

原型链方式的具体用法是创建一个构造函数，然后创建继承这个构造函数的引用类型，将这个引用的原型指向构造函数。在原型链的问题是，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();//UQinstance2.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