【面試次體驗】堆糖前端開發實習生

時間 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之類的。其他的都沒太據說過。。。汗

不過我有表示我之後會努力學習，迎頭遇上！

最後問道面試官對個人印象：一、經驗不足，二、新技術接觸的太少。

由於我目前時間有限，只有天天晚上整理面試題，因此這短短的幾個題整理了接近一個星期，不少問題也期待大神們的補充。。。目前也算是找到了工做，從此會繼續努力，讓個人羽翼豐滿起來！