寫在最前
昨天和一個童鞋聊到很晚，才意識到現(xiàn)在又是新的一輪校招季了，他像當(dāng)時的我一樣，自己出于喜歡學(xué)習(xí)了前端，但又不知自己處在了什么水平，也由于知識、眼界的限制不知道路在哪里（真的前端發(fā)展到現(xiàn)在知識面太廣）而擔(dān)驚受怕。在和他交談的同時也回想起當(dāng)時的自己，像我一個普通的本科生從接觸到?jīng)Q定其作為自己未來很多很多年的職業(yè)，殊不知要經(jīng)歷些什么才能下定了決心一往無前。時間很快，離我上次參加面試也經(jīng)過了一年多的時間，在工作里也在不停的對于以往只在面試中“背”過的知識有了些新的認(rèn)識，同時那些面試題在我之后的工作中也讓我受益匪淺，并且從中可能又多了些心得。故借此寫一個分享，分享一些以前遇到的題目以及可能包括之后在工作中對其的一些新認(rèn)識。希望可以幫助到有志在前端領(lǐng)域有所建樹的童鞋們。#另有些分享歡迎關(guān)注我的github
html
1. 原生方法對于dom節(jié)點(diǎn)的一些操作
例如：增刪改查dom節(jié)點(diǎn)屬性
2. dom的事件機(jī)制
冒泡、捕獲的原理；stopPropagation、preventDefault
比如這篇關(guān)于事件的基礎(chǔ)知識的文章，紅包書中的解釋大家需要多多理解。
3. 關(guān)于事件委托 到底什么時候用委托
要知道委托是方便，但是什么時候必須要委托呢？是當(dāng)你動態(tài)添加節(jié)點(diǎn)的時候，你之前為該節(jié)點(diǎn)所綁的事件是無法在之后的節(jié)點(diǎn)也進(jìn)行綁定的。所以要通過委托來進(jìn)行綁定。
一篇關(guān)于事件委托的文章
css
1. 多列，引發(fā)的具體需求下多列的合理實(shí)現(xiàn)
多列布局的幾種方式就不贅述了，只是在這個問題后結(jié)合現(xiàn)實(shí)需求就可能會有了一些新的布局方式。下面來看這張圖：
可能有些同學(xué)會說，可以給一個右邊距然后將元素4，8的右邊距去掉。這件事本身很容易但是我們要考慮到這個頁面如果放到線上就可能會進(jìn)行模板嵌套。在模板中這些元素都是諸如以下方式渲染出來的
for( i in 元素?cái)?shù)組) {
return <div class="xxx"> 元素?cái)?shù)組[i] </div>
}
在這種情況下我們不太可能去一一控制第幾個元素你把右邊距給我去了對吧。所以也由這道面試題，引發(fā)了一個新的認(rèn)識即margin負(fù)邊距。
<!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;}/*一個負(fù)的margin-right,相當(dāng)于把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>
對于負(fù)邊距可以看看這篇文章
2. 盒模型
盒模型有幾種？MDN下對盒模型的講解
3. flex-box
必會！自己好好寫個demo，簡直太好用。要不是有兼容性問題...不過一切都會變好的
4. 居中
萬古不變的話題，但要關(guān)注的是需求中到底知不知道高度和寬度，實(shí)現(xiàn)起來有什么不一樣的地方。
js
基礎(chǔ)
這個基礎(chǔ)部分推薦一本書《你不知道的JavaScript》,里面的敘述很詳盡，其中關(guān)于this的用法我覺得總結(jié)的很到位。
算法
這個算法不是二叉樹什么紅黑樹那種算法，那些和前端也確實(shí)沒啥關(guān)系。前端層面最需要關(guān)注的其實(shí)就是對于后端返回的json進(jìn)行解析的操作。從中獲取到需要的數(shù)據(jù)。也就是對于對象和數(shù)組的操作居多。大概會有以下的一些算法：
- 排序
- 排重
- 計(jì)算最大重復(fù)數(shù)
- concat、join、indexOf、split、splice、slice、forEach、map等等一些原型鏈方法的熟練運(yùn)用
- ...
- 最后推薦一篇Lucas老師的如何優(yōu)雅安全地在深層數(shù)據(jù)結(jié)構(gòu)中取值
深入原生API
隨著es6、es7語法的不斷變革，API的不斷更新，我們有了越來越多的快捷操作手段，同時老版本的瀏覽器在不斷退出市場，但是直到現(xiàn)在還沒有完全退出。而如果想進(jìn)一線公司，兼容性是個無法避免的問題。你不能說在ie6下就不能開百度吧？
不過像應(yīng)屆生真的直接問兼容性問題的幾率應(yīng)該沒那么大，即便問了可能也是背的沒有什么意義。畢竟我的電腦里都沒有ie我怎么測？但是兼容性的考察可以以polyfill的方式來進(jìn)行，這點(diǎn)也非常考驗(yàn)開發(fā)人員的功底。比如bind的實(shí)現(xiàn)；
對不起，推薦一下我寫的對bind的重新學(xué)習(xí)Javascript之bind；在對bind自己實(shí)現(xiàn)的過程中，會涉及原型鏈繼承等概念的運(yùn)用，使用這種方式順帶著還問了你基礎(chǔ)知識，何樂不為。
拋個磚引個玉：
冴羽老師的一些深入系列
- JavaScript深入之call和apply的模擬實(shí)現(xiàn)
- JavaScript深入之new的模擬實(shí)現(xiàn)
- JavaScript深入之new的模擬實(shí)現(xiàn)
用js實(shí)現(xiàn)一些效果
- 拖拽
這個效果要關(guān)注的核心就是三個函數(shù)
touchStart、touchMove、touchEnd
如果有興趣深入的同學(xué)可以試試看寫一個拖拽排序，github上也有很多關(guān)于其的開源項(xiàng)目。MDN上關(guān)于touch事件的介紹
- 輪播
輪播可以說是最常見的基礎(chǔ)實(shí)現(xiàn)了，輪播也分為很多種，移動端&PC端，滾動&淡入淡出，一屏&多屏，有限&無限循環(huán)，同時使用原生手法和使用框架如react下面的實(shí)現(xiàn)思路又不盡相同。在這里可以做一個小的總結(jié)，輪播圖的核心思路可以定義為對于整個輪播圖其橫軸坐標(biāo)的控制(假設(shè)輪播圖橫向滑動)。那么這個值就定義為left，對于原生手段開發(fā)而言我們需要關(guān)注輪播圖當(dāng)前的索引(即第幾張圖)和left之間的關(guān)系，通過各種判斷來實(shí)現(xiàn)其left值的反復(fù)變化。相當(dāng)于我們需要關(guān)注索引與left之間的關(guān)系，是一個強(qiáng)耦合的形式。如果采用react而言（因?yàn)樽髡咧挥胷eact寫過）索引是可以與left進(jìn)行解耦的，通過使用state來綁定索引值的變化，然后left會自行根據(jù)state進(jìn)行改變，從而使開發(fā)者只需要關(guān)注索引值，也就是輪播圖的url數(shù)組中各個url其索引值的改變。#紙上得來終覺淺這部分屆時作者會出一個分享來對比通過原生或框架來實(shí)現(xiàn)輪播圖思路中的異同。
效果實(shí)現(xiàn)有太多種可能，這種demo無法做到各個都知道，但我們可以掌握分析問題的方式。個人認(rèn)為判斷一個程序員功底的方式之一是看其多久可以從一個需求中發(fā)現(xiàn)問題的本質(zhì)然后庖丁九牛般一步步分析出思路。
ES6
根據(jù)28原則,個人感覺可以先學(xué)習(xí)
let const
解構(gòu)
() => {}
Promise
class
async
...etc
主要是是否自己在實(shí)踐中使用了ES6？如果使用了ES6那么必定要對webpack&gulp有些了解，可以自己嘗試著配置一份webpack，打包一下less|sass，ES6試試，在自己配置的時候一定收獲匪淺
網(wǎng)絡(luò)層
http協(xié)議
必須要了解的，也是在工作中和后端工程師交涉的時候不可避免的一個環(huán)節(jié)。那么其和https的關(guān)系是？可以來看看這篇文章https時代來了，你卻還一無所知？
跨域！跨域！跨域！
很重要。至少jsonp給明白吧，還有其背后的原理。自己寫一個jsonp？核心是通過script標(biāo)簽的src去請求跨域的服務(wù)器，傳遞其一個callback回調(diào)函數(shù)，后端在這個回調(diào)函數(shù)中塞入需要的數(shù)據(jù)。
GET POST
私密與不私密的關(guān)系，限制于不限制大小的關(guān)系。注意jsonp走的是GET請求，這一點(diǎn)你從network里是可以看到的。
最后推薦一篇不錯的講解從前端到后端的科普文
在淘寶上買件東西，背后發(fā)生了什么？
后端(node)
仁者見仁智者見智了?？梢詮膃xpress玩起，這方面我也不太擅長就閉嘴了。。
推薦樸靈大大的《Nodejs深入淺出》
另分享一篇有關(guān)域名的文章
淺談域名發(fā)散與域名收斂
框架/項(xiàng)目
關(guān)于框架
大佬三只手 react vue angular以及必會的jq
先分享下作者自己使用其中兩個框架寫的小實(shí)踐
關(guān)于jq
jq已經(jīng)十年了，你有看過它的源碼么，對不起我也沒有...以后我會看的。對于jq個人感覺如果你把它寫到了簡歷里，如果面試官想問你那么問的一定會深入一些。因?yàn)槟切┐罄杏玫淖钍斓目赡芫褪莏q。在這里拋磚引玉一些可能忽略掉的地方。諸如：jq上的事件委托、bind&on各種綁定事件的區(qū)別、jq對象與原生對象間的關(guān)聯(lián)轉(zhuǎn)換等等
關(guān)于現(xiàn)代框架
如果學(xué)習(xí)過react、vue、angular三者之一我認(rèn)為肯定在面試中會有一定的優(yōu)勢，因?yàn)槿绻闶褂昧诉@種框架來進(jìn)行開發(fā)，那么一定會涉及到打包編譯es6包括可能使用node做后端等等的嘗試，同時現(xiàn)在很多大公司也正是使用這些技術(shù)來實(shí)現(xiàn)需求，所以如果你了解一下那么肯定是有好處的。區(qū)別可能就是自己的實(shí)踐從量級、優(yōu)化上還遠(yuǎn)遠(yuǎn)不足于線上產(chǎn)品。但是有過組件化或者雙向綁定技術(shù)的實(shí)踐對你之后面向正規(guī)開發(fā)會容易上手很多。畢竟做開發(fā)雖然我們的夢想是造輪子但是第一層境界也只是站在巨人的肩膀上使用工具感受工具帶來的魅力而已。記得阿里去年有一道題讓我手動實(shí)現(xiàn)一個angular的依賴注入。對不起我沒用過angular...
關(guān)于項(xiàng)目
- 會重點(diǎn)聽取你項(xiàng)目的核心是什么，并找到這個核心，然后問你如何實(shí)現(xiàn)的
- 基于你如何實(shí)現(xiàn)的，能進(jìn)行優(yōu)化么，你自己一定知道哪里還需要進(jìn)行優(yōu)化吧
舉例：
去年一次電面，一位阿里的工程師對于我寫的移動端react版本的輪播圖組件上提出了一個我開發(fā)時候思考過的的一個問題。就是當(dāng)手指滑動后，該張圖片應(yīng)該還有一個滾動動畫，那么這個動畫如何判斷其滾動完成呢。其實(shí)這件事情如果熟悉原生開發(fā)或者有過RN開發(fā)經(jīng)驗(yàn)一定不是難事，原生下面會有一個生命周期函數(shù)來告訴你滾動已經(jīng)停止了，但是這件事情在網(wǎng)頁上來說不是那么好斷定。
粗暴的方法：setTimeout
我在那個組件中由于可能帶來的兼容性原因加上沒想到更好的實(shí)現(xiàn)方式，所以選擇了比較粗略的定時器方式。大致用法為
this.setState({
... //這個狀態(tài)下動畫正在執(zhí)行，預(yù)計(jì)300ms
},() => {
setTimeout(() =>{
//斷定動畫結(jié)束執(zhí)行之后的操作
}, 300)
})
為什么說是粗略呢？這個時候就應(yīng)該重新關(guān)注一下setTimeout事件到底是如何執(zhí)行的，定時和定時器中的操作一定是定時器到時間了里面就一定執(zhí)行么，答案是否定的想了解setTimeout運(yùn)行機(jī)制可以看下這篇你所不知道的setTimeout，函數(shù)真正執(zhí)行的時間和定時器定的時間其實(shí)沒有關(guān)系?？偟膩碚f定時器定的時間只是在那個時間點(diǎn)把你的事件扔進(jìn)事件回調(diào)隊(duì)列中，如果前面排著的事件計(jì)算量復(fù)雜，那么真到你那個定時器函數(shù)執(zhí)行的時候也許黃花菜都涼了。所以“慎用定時器”，然而我...haveto?
兼容性可能帶來問題的方法：-webkit-animation
有關(guān)-webkit-animation請戳這里
回想起來阿里的工程師面試還是很厲害的，雖然可能和我做的東西太常見有關(guān)，不過我覺得能從別人的項(xiàng)目中一下子找到實(shí)現(xiàn)的一些痛點(diǎn)的經(jīng)驗(yàn)，也必定是要長期累月進(jìn)行積累后才能游刃有余吧。
后記
寫的很匆忙，但也算回顧了一年多工作中間的小心得吧。希望可以有所幫助大家多多交流。
最后分享一句從冴羽老師文章中看到的話，我個人覺得很有道理：
“曾經(jīng)團(tuán)隊(duì)邀請過 Nodejs 領(lǐng)域一個非常著名的大神來分享，這里便不說是誰了。當(dāng)知道是他后，簡直是粉絲的心情。但是課講得確實(shí)一般，也許是第一次講，準(zhǔn)備不是很充足吧，以至于我都覺得我能講得比他好，但是有兩次，讓我覺得這是真正的大神。一次就是，當(dāng)有同事問到今年有什么流行的前端框架嗎？這些框架有怎樣的適用場景？該如何抉擇？我以為大神一定會回答當(dāng)時正火的 React、以及小鮮肉 Vue 之類，然后老生常談的比較一番，但是他回答道：“I dont't care！因?yàn)檫@些并不重要，真正重要的是底層，當(dāng)你了解了底層，你就能很輕松的明白這些框架的原理，當(dāng)你明白了原理，這些框架又有什么意思呢？”
