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

時間 2019-11-24

標籤原來又到一個前端新人回憶简体版

原文原文鏈接

寫在最前

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

html

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

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

2. dom的事件機制

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

好比這篇關於事件的基礎知識的文章，紅包書中的解釋你們須要多多理解。前端

3. 關於事件委託到底何時用委託

要知道委託是方便，可是何時必需要委託呢？是當你動態添加節點的時候，你以前爲該節點所綁的事件是沒法在以後的節點也進行綁定的。因此要經過委託來進行綁定。
一篇關於事件委託的文章vue

css

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

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

可能有些同窗會說，能夠給一個右邊距而後將元素4，8的右邊距去掉。這件事自己很容易可是咱們要考慮到這個頁面若是放到線上就可能會進行模板嵌套。在模板中這些元素都是諸如如下方式渲染出來的node

for( i in 元素數組) {
    return <div class="xxx"> 元素數組[i] </div>
}複製代碼

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

<!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>複製代碼

對於負邊距能夠看看這篇文章webpack

2. 盒模型

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

3. flex-box

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

阮一峯老師關於flex的講解

4. 居中

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

js

基礎

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

算法

這個算法不是二叉樹什麼紅黑樹那種算法，那些和前端也確實沒啥關係。前端層面最須要關注的其實就是對於後端返回的json進行解析的操做。從中獲取到須要的數據。也就是對於對象和數組的操做居多。大概會有如下的一些算法：

排序
排重
計算最大重複數
concat、join、indexOf、split、splice、slice、forEach、map等等一些原型鏈方法的熟練運用
...
最後推薦一篇Lucas老師的如何優雅安全地在深層數據結構中取值

深刻原生API

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

冴羽老師的一些深刻系列

拖拽

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

touchStart、touchMove、touchEnd複製代碼

若是有興趣深刻的同窗能夠試試看寫一個拖拽排序，github上也有不少關於其的開源項目。MDN上關於touch事件的介紹

輪播

輪播能夠說是最多見的基礎實現了，輪播也分爲不少種，移動端&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...

關於項目

會重點聽取你項目的核心是什麼，並找到這個核心，而後問你如何實現的
基於你如何實現的，能進行優化麼，你本身必定知道哪裏還須要進行優化吧

舉例：

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

粗暴的方法：setTimeout

我在那個組件中因爲可能帶來的兼容性緣由加上沒想到更好的實現方式，因此選擇了比較粗略的定時器方式。大體用法爲

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

爲何說是粗略呢？這個時候就應該從新關注一下setTimeout事件究竟是如何執行的，定時和定時器中的操做必定是定時器到時間了裏面就必定執行麼，答案是否認的想了解setTimeout運行機制能夠看下這篇你所不知道的setTimeout，函數真正執行的時間和定時器定的時間其實沒有關係。總的來講定時器定的時間只是在那個時間點把你的事件扔進事件回調隊列中，若是前面排着的事件計算量複雜，那麼真到你那個定時器函數執行的時候也許黃花菜都涼了。因此「慎用定時器」，然而我...haveto?

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

有關-webkit-animation請戳這裏

回想起來阿里的工程師面試仍是很厲害的，雖然可能和我作的東西太常見有關，不過我以爲能從別人的項目中一會兒找到實現的一些痛點的經驗，也一定是要長期累月進行積累後才能遊刃有餘吧。

後記

寫的很匆忙，但也算回顧了一年多工做中間的當心得吧。但願能夠有所幫助你們多多交流。

最後分享一句從冴羽老師文章中看到的話，我我的以爲頗有道理：

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