當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2023/12/15 HTML 26 豆豆

生活随笔收集整理的這篇文章主要介紹了【面试次体验】堆糖前端开发实习生小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在上一次失敗的經歷之后，本菜鳥非常努力的梳理羽毛（整理知識點），在兩天后參加了堆糖的視頻面試。這次面試經歷總體來說比較好，可能是查漏補缺起到了效果，大部分的題目都能大體回答出來，加上面試官很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屬性

<div class="overflow"><div class="left"></div><div class="middle"></div><div class="right"></div> </div> .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 面向對象特性(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; }

組合方式是綜合了原型鏈與借用構造函數兩種方式。

原型式繼承，方法是通過一個現有的對象創建一個新的對象。

//引自《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()排序，之后為每一組字符計算數字，將目前出現次數最多的字符以及其次數記下來。

HTTP題目以及新技術題目

HTTP題目繼續問到了AJAX的問題，上一篇面試題中有整理。

面試官緊接著有問到form提交和ajax提交的區別？
Form在提交的時候，會跳轉頁面或者原頁面刷新。而AJAX是異步的，無需頁面刷新而只是部分刷新。
Form提交時，JS不是必需的，而且數據按照表單結構提交。AJAX需要JS來實現，而且數據也要用程序處理。

之后面試官問到開發環境問題：

1、目前的開發環境是什么
曾用PC開發，使用EverEdit；這幾個月轉用Mac，使用HBuilder

2、shell操作命令行用過什么
簡單的前進到文件目錄cd
列出當前文件夾內的文件 ls -li
改變所有人權限 chown
該文件讀寫模式 chmod

3、chrome的調試方法
Elements中查詢元素結構、以及元素的樣式
Network中查看每個資源的請求反饋時間
Sources中調試程序，在左欄程序文件上打斷點，并在右側輸入變量名查看變量值的變化
Resource中查詢Session、Cookie、本地存儲及緩存的狀態
Console中執行函數并查看錯誤行號或錯誤代碼

4、代碼管理工具使用過么？做哪些操作呢？
使用過Git：建立遠程倉庫，拉取本地倉庫，更改之后submit，之后push到遠程倉庫。曾經Fork過別人的，然后修改過后也是submit再push。
說實話我做的個人項目比較多，對于GitHub的使用僅限于提交推送更新代碼。所以也是大概的說了一下我的使用情況。

新技術題目

接觸過什么比較前沿的技術？js框架、模塊化、自動化工具、預編譯語言？
呃。。呃。。呃。。。

當時我的反應好尷尬，不過也是實話實說我沒接觸過什么，只不過聽說過angular.js、backbone.js之類的。其余的都沒太聽說過。。。汗

不過我有表示我以后會努力學習，迎頭趕上！

最后問道面試官對我的印象：1、經驗不足，2、新技術接觸的太少。

因為我目前時間有限，只有每天晚上整理面試題，所以這短短的幾個題整理了接近一個星期，很多問題也期待大神們的補充。。。目前也算是找到了工作，今后會繼續努力，讓我的羽翼豐滿起來！

總結

以上是生活随笔為你收集整理的【面试次体验】堆糖前端开发实习生的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

实习生