原來又到了校招季，一個前端新人的回憶

Annn發表於2017-06-09
前端

寫在最前

昨天和一個童鞋聊到很晚，才意識到現在又是新的一輪校招季了，他像當時的我一樣，自己出於喜歡學習了前端，但又不知自己處在了什麼水平，也由於知識、眼界的限制不知道路在哪裡（真的前端發展到現在知識面太廣）而擔驚受怕。在和他交談的同時也回想起當時的自己，像我一個普通的本科生從接觸到決定其作為自己未來很多很多年的職業，殊不知要經歷些什麼才能下定了決心一往無前。時間很快，離我上次參加面試也經過了一年多的時間，在工作裡也在不停的對於以往只在面試中“背”過的知識有了些新的認識，同時那些面試題在我之後的工作中也讓我受益匪淺，並且從中可能又多了些心得。故藉此寫一個分享，分享一些以前遇到的題目以及可能包括之後在工作中對其的一些新認識。希望可以幫助到有志在前端領域有所建樹的童鞋們。#另有些分享歡迎關注我的github

html

1. 原生方法對於dom節點的一些操作

例如：增刪改查dom節點屬性

2. dom的事件機制

冒泡、捕獲的原理；stopPropagation、preventDefault

比如這篇關於事件的基礎知識的文章，紅包書中的解釋大家需要多多理解。

3. 關於事件委託 到底什麼時候用委託

要知道委託是方便，但是什麼時候必須要委託呢？是當你動態新增節點的時候，你之前為該節點所綁的事件是無法在之後的節點也進行繫結的。所以要通過委託來進行繫結。
一篇關於事件委託的文章

css

1. 多列，引發的具體需求下多列的合理實現

多列布局的幾種方式就不贅述了，只是在這個問題後結合現實需求就可能會有了一些新的佈局方式。下面來看這張圖：

原來又到了校招季，一個前端新人的回憶

可能有些同學會說，可以給一個右邊距然後將元素4，8的右邊距去掉。這件事本身很容易但是我們要考慮到這個頁面如果放到線上就可能會進行模板巢狀。在模板中這些元素都是諸如以下方式渲染出來的

for( i in 元素陣列) {
    return <div class="xxx"> 元素陣列[i] </div>
}複製程式碼

在這種情況下我們不太可能去一一控制第幾個元素你把右邊距給我去了對吧。所以也由這道面試題，引發了一個新的認識即margin負邊距。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    body,ul,li{ padding:0; margin:0;}
    ul,li{ list-style:none;}
    .container{ height:210px; width:460px; border:5px solid #000;}
    ul{ height:210px; overflow:hidden; margin-right:-20px;}/*一個負的margin-right,相當於把ul的寬度增加了20px*/
    li{ height:100px; width:100px; background:#09F; float:left; margin-right:20px; margin-bottom:10px;}
</style>
</head>
<body>
<div class="container">
    <ul>
        <li>子元素1</li>
        <li>子元素2</li>
        <li>子元素3</li>
        <li>子元素4</li>
        <li>子元素5</li>
        <li>子元素6</li>
        <li>子元素7</li>
        <li>子元素8</li>
    </ul>
</div>
</body>
</html>複製程式碼

對於負邊距可以看看這篇文章

2. 盒模型

盒模型有幾種？MDN下對盒模型的講解

3. flex-box

必會！自己好好寫個demo，簡直太好用。要不是有相容性問題...不過一切都會變好的

阮一峰老師關於flex的講解

4. 居中

萬古不變的話題，但要關注的是需求中到底知不知道高度和寬度，實現起來有什麼不一樣的地方。

js

基礎

這個基礎部分推薦一本書《你不知道的JavaScript》,裡面的敘述很詳盡，其中關於this的用法我覺得總結的很到位。

演算法

這個演算法不是二叉樹什麼紅黑樹那種演算法，那些和前端也確實沒啥關係。前端層面最需要關注的其實就是對於後端返回的json進行解析的操作。從中獲取到需要的資料。也就是對於物件和陣列的操作居多。大概會有以下的一些演算法：

深入原生API

隨著es6、es7語法的不斷變革，API的不斷更新，我們有了越來越多的快捷操作手段，同時老版本的瀏覽器在不斷退出市場，但是直到現在還沒有完全退出。而如果想進一線公司，相容性是個無法避免的問題。你不能說在ie6下就不能開百度吧？
不過像應屆生真的直接問相容性問題的機率應該沒那麼大，即便問了可能也是背的沒有什麼意義。畢竟我的電腦裡都沒有ie我怎麼測？但是相容性的考察可以以polyfill的方式來進行，這點也非常考驗開發人員的功底。比如bind的實現；
對不起，推薦一下我寫的對bind的重新學習Javascript之bind；在對bind自己實現的過程中，會涉及原型鏈繼承等概念的運用，使用這種方式順帶著還問了你基礎知識，何樂不為。
拋個磚引個玉：

冴羽老師的一些深入系列

  1. 拖拽

這個效果要關注的核心就是三個函式

touchStart、touchMove、touchEnd複製程式碼

如果有興趣深入的同學可以試試看寫一個拖拽排序，github上也有很多關於其的開源專案。MDN上關於touch事件的介紹

  1. 輪播

輪播可以說是最常見的基礎實現了，輪播也分為很多種，移動端&PC端，滾動&淡入淡出，一屏&多屏，有限&無限迴圈，同時使用原生手法和使用框架如react下面的實現思路又不盡相同。在這裡可以做一個小的總結，輪播圖的核心思路可以定義為對於整個輪播圖其橫軸座標的控制(假設輪播圖橫向滑動)。那麼這個值就定義為left，對於原生手段開發而言我們需要關注輪播圖當前的索引(即第幾張圖)和left之間的關係，通過各種判斷來實現其left值的反覆變化。相當於我們需要關注索引與left之間的關係，是一個強耦合的形式。如果採用react而言（因為作者只用react寫過）索引是可以與left進行解耦的，通過使用state來繫結索引值的變化，然後left會自行根據state進行改變，從而使開發者只需要關注索引值，也就是輪播圖的url陣列中各個url其索引值的改變。#紙上得來終覺淺這部分屆時作者會出一個分享來對比通過原生或框架來實現輪播圖思路中的異同。

效果實現有太多種可能，這種demo無法做到各個都知道，但我們可以掌握分析問題的方式。個人認為判斷一個程式設計師功底的方式之一是看其多久可以從一個需求中發現問題的本質然後庖丁九牛般一步步分析出思路。

ES6

先推薦阮一峰老師的ES6入門系列

根據28原則,個人感覺可以先學習

let const
解構
() => {}
Promise
class
async
...etc複製程式碼

主要是是否自己在實踐中使用了ES6？如果使用了ES6那麼必定要對webpack&gulp有些瞭解，可以自己嘗試著配置一份webpack，打包一下less|sass，ES6試試，在自己配置的時候一定收穫匪淺

網路層

http協議

必須要了解的，也是在工作中和後端工程師交涉的時候不可避免的一個環節。那麼其和https的關係是？可以來看看這篇文章https時代來了，你卻還一無所知？

跨域！跨域！跨域！

很重要。至少jsonp給明白吧，還有其背後的原理。自己寫一個jsonp？核心是通過script標籤的src去請求跨域的伺服器，傳遞其一個callback回撥函式，後端在這個回撥函式中塞入需要的資料。

GET POST

私密與不私密的關係，限制於不限制大小的關係。注意jsonp走的是GET請求，這一點你從network裡是可以看到的。

最後推薦一篇不錯的講解從前端到後端的科普文
在淘寶上買件東西，背後發生了什麼？

後端(node)

仁者見仁智者見智了。可以從express玩起，這方面我也不太擅長就閉嘴了。。

推薦樸靈大大的《Nodejs深入淺出》

另分享一篇有關域名的文章
淺談域名發散與域名收斂

框架/專案

關於框架

大佬三隻手 react vue angular以及必會的jq

先分享下作者自己使用其中兩個框架寫的小實踐

關於jq

jq已經十年了，你有看過它的原始碼麼，對不起我也沒有...以後我會看的。對於jq個人感覺如果你把它寫到了簡歷裡，如果面試官想問你那麼問的一定會深入一些。因為那些大佬用的最熟的可能就是jq。在這裡拋磚引玉一些可能忽略掉的地方。諸如：jq上的事件委託、bind&on各種繫結事件的區別、jq物件與原生物件間的關聯轉換等等

關於現代框架

如果學習過react、vue、angular三者之一我認為肯定在面試中會有一定的優勢，因為如果你使用了這種框架來進行開發，那麼一定會涉及到打包編譯es6包括可能使用node做後端等等的嘗試，同時現在很多大公司也正是使用這些技術來實現需求，所以如果你瞭解一下那麼肯定是有好處的。區別可能就是自己的實踐從量級、優化上還遠遠不足於線上產品。但是有過元件化或者雙向繫結技術的實踐對你之後面向正規開發會容易上手很多。畢竟做開發雖然我們的夢想是造輪子但是第一層境界也只是站在巨人的肩膀上使用工具感受工具帶來的魅力而已。記得阿里去年有一道題讓我手動實現一個angular的依賴注入。對不起我沒用過angular...

關於專案

  1. 會重點聽取你專案的核心是什麼，並找到這個核心，然後問你如何實現的
  2. 基於你如何實現的，能進行優化麼，你自己一定知道哪裡還需要進行優化吧

舉例：

去年一次電面，一位阿里的工程師對於我寫的移動端react版本的輪播圖元件上提出了一個我開發時候思考過的的一個問題。就是當手指滑動後，該張圖片應該還有一個滾動動畫，那麼這個動畫如何判斷其滾動完成呢。其實這件事情如果熟悉原生開發或者有過RN開發經驗一定不是難事，原生下面會有一個生命週期函式來告訴你滾動已經停止了，但是這件事情在網頁上來說不是那麼好斷定。

粗暴的方法：setTimeout

我在那個元件中由於可能帶來的相容性原因加上沒想到更好的實現方式，所以選擇了比較粗略的定時器方式。大致用法為

this.setState({
    ... //這個狀態下動畫正在執行，預計300ms
},() => {
    setTimeout(() =>{
        //斷定動畫結束執行之後的操作
    }, 300)
})複製程式碼

為什麼說是粗略呢？這個時候就應該重新關注一下setTimeout事件到底是如何執行的，定時和定時器中的操作一定是定時器到時間了裡面就一定執行麼，答案是否定的想了解setTimeout執行機制可以看下這篇你所不知道的setTimeout，函式真正執行的時間和定時器定的時間其實沒有關係。總的來說定時器定的時間只是在那個時間點把你的事件扔進事件回撥佇列中，如果前面排著的事件計算量複雜，那麼真到你那個定時器函式執行的時候也許黃花菜都涼了。所以“慎用定時器”，然而我...haveto?

相容性可能帶來問題的方法：-webkit-animation

有關-webkit-animation請戳這裡

回想起來阿里的工程師面試還是很厲害的，雖然可能和我做的東西太常見有關，不過我覺得能從別人的專案中一下子找到實現的一些痛點的經驗，也必定是要長期累月進行積累後才能遊刃有餘吧。

後記

寫的很匆忙，但也算回顧了一年多工作中間的小心得吧。希望可以有所幫助大家多多交流。

最後分享一句從冴羽老師文章中看到的話，我個人覺得很有道理：

“曾經團隊邀請過 Nodejs 領域一個非常著名的大神來分享，這裡便不說是誰了。當知道是他後，簡直是粉絲的心情。但是課講得確實一般，也許是第一次講，準備不是很充足吧，以至於我都覺得我能講得比他好，但是有兩次，讓我覺得這是真正的大神。一次就是，當有同事問到今年有什麼流行的前端框架嗎？這些框架有怎樣的適用場景？該如何抉擇？我以為大神一定會回答當時正火的 React、以及小鮮肉 Vue 之類，然後老生常談的比較一番，但是他回答道：“I dont't care！因為這些並不重要，真正重要的是底層，當你瞭解了底層，你就能很輕鬆的明白這些框架的原理，當你明白了原理，這些框架又有什麼意思呢？”

相關文章