前言
先介紹一下自己的情況吧
- 成都青城山下某大學畢業，專科，
軟體測試專業畢業 - 22歲，15年出來實習，工作經驗接近三年，之前主要做後端寫PHP，自己喜歡瞎折騰，從去年六月份開始研究前端，算下來前端經驗半年多
年底由於種種原因想換一份工作，但由於太忙，沒認真搞簡歷，也沒怎麼複習基礎，導致很多本來會的都沒敢往簡歷上寫。於是寫了一個簡版的簡歷掛在Boss直聘上，準備年過完再認真籌備這件事情。
令我意外的是，一週竟收到八條阿里的面試邀請，看了網上前輩的一些心得：阿里三個月內只能應聘一次，於是選了兩個心儀的部門投了簡歷，其中一個內推完沒下文，多半是學歷沒過?
以下是阿里面試過程
第一輪 電話面試
-
自我介紹
balabala....，好久沒面試過，自我介紹居然顯得很緊張，說了一些簡歷上沒有的東西，比如之前寫PHP、用Swoole做智慧硬體通訊啊之類，以及為什麼寫前端啊，balabala...
-
會ES6嗎，什麼是解構賦值？ 直接舉了個例子
const { a, b, c } = { a: 'aa', b: 'bb', c: 'cc' } 複製程式碼 -
說下React的生命週期
例項化
- getDefaultProps
- getInitialState
- componentWillMount
- render
- componentDidMount
存在期
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- componentDidUpdate
銷燬時
- componentWillUnmount
-
React方法中，呼叫事件處理方法(裡面要用到this)怎麼呼叫
this.foo.bind(this) 複製程式碼 -
接問題4，為什麼需要bind(this)
作用域的問題，foo() {} 與 const foo = () => {}裡面的this作用域不一樣，foo() {}裡面使用外部成員，需要bind(this)，直接使用的this作用域僅在該方法內部
-
接問題4，能不能不使用bind(this)
- 可以使用箭頭函式
- 可以使用
lodash-decorators裡面的Bind裝飾器
-
裝飾器的原理
語法糖，實則呼叫Object.defineProperty，可以新增、修改物件屬性
-
自己實現一個通用方法，做到不需要使用bind與裝飾器達到問題4的目的
柯里化 + apply，詳細過程不贅述...
-
閉包裡面的this作用域
內部函式的this指向外部包裹它的作用域
-
React render做了什麼
主要分首次渲染與更新來說，說的比較多，不贅述，網上react原始碼分析一大堆...這期間順帶提到了利用redux-saga在shouldComponentUpdate時所做優化，以及自己的開源專案
-
說說xss與csrf，怎麼防止
- xss：跨站指令碼攻擊，如果不過濾執行了js程式碼，可能導致cookie洩露等。防止：過濾
- csrf：跨站請求偽造，挾制使用者在當前已登入的Web應用程式上執行非本意的操作。防止：設定token、寫操作用post、JSON API禁用CORS、禁用跨域請求、檢查referrer
-
Ajax的原理，你平常怎麼傳送網路請求的
- 通過XMLHttpRequest/ActiveXObject新建Ajax請求
- 通過onreadystatechange註冊回撥函式
- 使用open、setRequestHeader、send結合傳送請求
- 平常傳送網路請求：用next做同構應用時，使用
isomorphic-fetch傳送請求，如果只是客戶端傳送請求時，使用axios
-
有三個元素，第一個與第三個寬度都為100px，中間元素佔用剩餘空間，怎麼做到中間元素隨著瀏覽器寬度的變化而變化
<div className="main"> <div className="div-1"></div> <div className="div-2"></div> <div className="div-3"></div> <style jsx>{` .main { width: 100vw; height: 100vh; display: flex; justify-content: space-around; } .div-1,.div-3 { min-width: 100px; height: 100vh; } .div-2 { width: 100%; height: 100vh; } `}</style> </div> 複製程式碼 -
講講box-sizing
- 標準模式：width與height指的是內容區域的寬高，增加padding、border、margin會影響總體尺寸
- 怪異模式：width與height指內容區+padding+border，增加padding、border不會影響總體尺寸
-
做專案有沒有遇到什麼坑
最近做的這些專案專案也沒有遇到什麼大坑，印象很深的是之前實習搭建EKL中央日誌伺服器的時候，被一個時間問題坑了一天，EKL收集的日誌時間與伺服器的時間（時區）不一致，導致收集不到日誌
-
你覺得搭建EKL有那些難點
相關伺服器搭建倒是沒什麼難點，我覺得使用EKL最麻煩的是寫grok match正則，匹配不同的日誌，需要不同的正則，不過寫到後面也習慣了，還OK
-
講講印象比較深的後端專案
之前實習時，做智慧硬體專案，是一個寵物智慧項圈，能記錄寵物的運動資料，硬體每隔一段時間會傳送大量的陀螺儀與加速計資料到服務端，通過swoole建立tcp，接受二進位制資料，然後將接受到的資料通過map reduce處理...
-
停一下，你講到處理大資料用map reduce，那為什麼不用redis之類的
我個人覺得應該是當時團隊比較小，需要一個快速且簡單的解決方案，所以map reduce正是我們所需要的，redis我也知道，可以使用zset，求和很方便
-
說說mysql的事務
BEGIN、事務回滾ROLLBACK、事務提交COMMIT
-
說說你最滿意的業務專案
說了一個next.js的觸屏版同構專案，專案中使用到了prefech預先載入，以及next的動態載入，體驗相當的快，用nprogress展示滾動條，在next.js還沒有釋出5.0版本/解決style-jsx中使用less、sass問題的時候，自己用postcss解決了，整個專案使用flexible + rem做響應式，自己改寫了video-react元件，相容觸屏版，還有一些自認為不錯的業務思想不贅述...
-
說說rem與em的區別
rem是根據根的font-size變化，em是根據父級的font-size變化
一面總結
一面面試的時候時不時順帶表現一下自己，根據面試官的問題回答時順帶提了一下看過的開源專案，比如react(redner過程)、next(postcss解決style-jsx編寫less、isomorphic-fetch的使用等)、ant pro(lodash-decorators的使用)等
第二輪 筆試
1.實現destructuringArray方法，達到如下效果
// destructuringArray( [1,[2,4],3], "[a,[b],c]" );
// result
// { a:1, b:2, c:3 }
複製程式碼2.需要通過threshold引數控制呼叫函式頻率
const yourFunction = function(func, threshold) {
// 請實現
}
const triggerSearch = yourFunction((val) => {
const {
onSearch
} = this.props
onSearch(val)
}, 300)
triggerSearch(searchText)
複製程式碼我的答案（可以先不看，自己現實一下）
// 第一題
const targetArray = [1, [2, 3], 4];
const formater = "[a, [b], c]";
const formaterArray = ['a', ['b'], 'c'];
const destructuringArray = (values, keys) => {
try {
const obj = {};
if (typeof keys === 'string') {
keys = JSON.parse(keys.replace(/\w+/g, '"$&"'));
}
const iterate = (values, keys) =>
keys.forEach((key, i) => {
if(Array.isArray(key)) iterate(values[i], key)
else obj[key] = values[i]
})
iterate(values, keys)
return obj;
} catch (e) {
console.error(e.message);
}
}
console.dir(destructuringArray(targetArray,formater));
console.dir(destructuringArray(targetArray,formaterArray));
// 第二題
const yourFunction = function(func, threshold) {
let timeOut;
return function() {
if (!timeOut) {
timeOut = setTimeout(() => {
timeOut = null;
func.apply(this, arguments)
}, threshold)
}
}
}
const triggerSearch = yourFunction((val) => {
const {
onSearch
} = this.props
onSearch(val)
}, 300)
triggerSearch(searchText)
複製程式碼歡迎小夥伴們在評論區貼上自己的答案哦?
第三輪 電話面試
主要談到自己所開源的兩個前端專案，這當然是我最喜歡的地方，遇到自己喜歡的東西根本停不下來，balabala說了太多（生活中我的話很少，屬於比較內向的那種，哈哈），還有一些職業發展啊、個人想法啊之類的...
遺憾的是三面掛了，給的反饋是話太多，說不到重點。其實現在回想起來，個人覺得三面應該是我表現最好的一面，當時面完覺得穩過了，哈哈?。因為談的全是我瞭解的東西，隨便一個問題，我都可以說上幾分鐘，但也正是這個原因導致了面試失敗，說的太多也不一定是好事，有時候需要簡潔，直擊重點。
結語
很幸運一個專科生以半年的前端經驗能獲得阿里的面試機會，結局雖掛了，但也不是因為技術原因，內心還是很欣慰的，還有阿里的面試官都很nice，面完也會及時的反饋，當你緊張的時候會給你留時間調整，結局沒過到也會給建議與鼓勵。最後各位程式猿看官，豐富技術的同時不要忘了提升自己的表達能力哦?