中級前端必備知識點（2.5w+月薪）進階 (分享知乎 : 平醬的填坑札記 關注專欄 用戶:安大虎)
前端已經再也不是5年前剛開始火爆時候的那種html+css+js+jquery的趨勢了，如今須要你徹底瞭解前端開發的同時，還要具有將上線、持續化、閉環、自動化、語義化、封裝......等概念熟練運用到工做中的一個職業，甚至用人部門還但願你瞭解並掌握深度學習及機器學習的相關概念。在面試過程當中，各部門交叉面試的時候會提問一些關於後端的知識。假如你想要拿到2.5w+月薪，你的能力應該達到掌握如下所有知識點並有過開發後端接口與數據處理（node、java、c......必須掌握一種）的經驗。本文就是結合本身的工做、面試經驗，同時爲那些想要衝擊2w+薪資的1-3年新手們準備的。javascript
須要注意的是，全部大廠的社招會按照你當前工做經驗進行+1，+2的難度提高（假設你工做一年，會按照三年工做經驗進行招聘，同時二三面會按照你的項目經驗進行擇優篩選）因此起步是互聯網公司的同窗佔了很大的優點，有些小夥伴在國企工做一年~三年，項目經驗的欠缺致使競爭力不足，沒別的辦法，建議早日跳出本身的溫馨圈，以後你會體會到不同的前端開發。happy hacking！！css
一、mock
在先後端分離的開發中，Mock 數據是前端開發中很重要的一個環節，前端能夠沒必要強依賴後端接口，只須要約定好對應的數據接口，前端能夠經過 Mock 模擬數據先行開發，在後端接口開發完成後，只須要切換對應的接口地址便可，能夠保證項目的同步開發。html
本地內容：在mock文件夾下中的index文件中定義好自有的接口路徑，再到根目錄的service文件夾下生成對應業務模塊的js文件。文件內將相應微服務的接口匹配好。暴露出去供業務功能調用。前端
二、網絡請求編碼表示
會從你是否關注Request head的哪些內容入手，通常關注點放在statusCode和method上就夠用，重點200，304。同時掌握了基礎後但願注意的點爲文件上傳的內容（百度問過斷點續傳的實現）vue
200: '服務器成功返回請求的數據。',
201: '新建或修改數據成功。',
202: '一個請求已經進入後臺排隊（異步任務）。',
204: '刪除數據成功。',
304：協商緩存
400: '發出的請求有錯誤，服務器沒有進行新建或修改數據的操做。',
401: '用戶沒有權限（令牌、用戶名、密碼錯誤）。',
403: '用戶獲得受權，可是訪問是被禁止的。',
404: '發出的請求針對的是不存在的記錄，服務器沒有進行操做。',
406: '請求的格式不可得。',
410: '請求的資源被永久刪除，且不會再獲得的。',
422: '當建立一個對象時，發生一個驗證錯誤。',
500: '服務器發生錯誤，請檢查服務器。',
502: '網關錯誤。',
503: '服務不可用，服務器暫時過載或維護。',
504: '網關超時。'java
三、axios工做流程
axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規範，它自己具備如下特徵：node
1.從瀏覽器中建立 XMLHttpRequestreact
2.支持 Promise APIjquery
3.客戶端支持防止CSRFwebpack
4.提供了一些併發請求的接口（重要，方便了不少的操做）
5.從 node.js /java建立 http 請求
6.攔截請求和響應
7.轉換請求和響應數據
8.取消請求
9.自動轉換JSON數據
防止CSRF:就是讓你的每一個請求都帶一個從cookie中拿到的key, 根據瀏覽器同源策略，假冒的網站是拿不到你cookie中得key的，這樣，後臺就能夠輕鬆辨別出這個請求是不是用戶在假冒網站上的誤導輸入，從而採起正確的策略。
/** * * * @param {*} params mmsi * @param {*} callback * * */
getship_cargo_detail:function(params,callback){
axios.get(server.portAddress+"newshipcargo/newship_pos_detail",{params})
.then(function(res){
callback(res.data);
})
.catch(function(error){
console.log("get_ship_cargo_data_error");
})
},
//調用方法
shipcargoserver.getship_cargo_detail({mmsi:mmsi},data=>{
if(data){
this.setState({
pageNumber:data.,,,,,,,
})
}
})
四、ElementUI（ElementReact）與antdesign和ice-work的比較
使用Element的緣由是經過學習餓廠的 Element
其設計原則能夠兼容三大框架 （三大框架各有實現）：
Vue Element
React Element
Angular Element
總體上 UI 都是一套，但在不一樣框架中實現方式各異，API 變動較小，若是須要多個框架保持一套風格， Element 是很是好的選擇。爲了減小學習變動後項目api
antdesign功能極強，主要用來學習與觀摩，模仿其語法及代碼風格，主要基於React組件庫的支持。感受惟一的不足時在於當時使用時缺乏一些在線預覽的功能，最近又出了antdvue
飛冰最有意思的是釘釘羣實時答疑讓p7給你答疑（前提是混入羣中）。500+ ICE 使用者在羣裏問任何層級的前端問題
React 組件。基礎組件使用 Fusion，此外根據業務特性等開發了 40+ 業務組件
Playground：可複用模板，用於快速展現效果的業務。
五、WebRequest
API 可讓插件監控 Chrome 的網絡請求，甚至重定向請求。例如：臨時替換hotfix分支的圖片
// background.js chrome.webRequest.onBeforeRequest.addListener(
function (details) {
const url = details.url;
if (url === 'http://n.sinaimg.cn/news/1_img/upload/7b577cec/576/w778h598/20180820/lSSg-hhxaafy9194151.jpg') {
console.log(22)
return {
redirectUrl: 'https://github.com/welearnmore/chrome-extension-book/raw/master/doc/images/logo_google_developers.png'
}
}
return {cancel: false}
},
{urls: ["<all_urls>"]},
["blocking"]
)
六、減小reflow的方法
- 不要一條一條地修改
DOM的樣式。與其這樣，還不如預先定義好css的class，而後修改DOM的className：
// 很差的寫法 var left = 10, top = 10; el.style.left = left + "px"; el.style.top = top + "px"; // 推薦寫法 el.className += " theclassname"; - 把 DOM 離線後修改。如：
a>使用documentFragment對象在內存裏操做DOM。b>先把DOM給display:none(有一次repaint)，而後你想怎麼改就怎麼改。好比修改100次，而後再把他顯示出來。c>clone一個DOM節點到內存裏，而後想怎麼改就怎麼改，改完後，和在線的那個的交換一下。 - 不要把
DOM節點的屬性值放在一個循環裏當成循環裏的變量。否則這會致使大量地讀寫這個結點的屬性。 - 儘量的修改層級比較低的
DOM節點。固然，改變層級比較底的DOM節點有可能會形成大面積的reflow，可是也可能影響範圍很小。 - 爲動畫的
HTML元件使用fixed或absoult的position，那麼修改他們的CSS是會大大減少reflow。 - 千萬不要使用
table佈局。由於可能很小的一個小改動會形成整個table的從新佈局。
參考：
深入剖析迴流與重繪：
七、微任務與宏任務與eventloop
重點記住promise是微任務，執行完同步任務後，在異步中最早執行的就是promise
參考
八、隱式轉換所有狀況
!![] == true //結果是true
[] == true //結果是false
![] == [] //結果是true
針對[] == true 與！！[]的解釋參考：
記憶方式
[] 轉爲字符串是 "" // String([]) 返回""
[] 轉爲數字是 0 // Number([]) 返回0
[] 轉爲布爾值是 true // Boolean([]) 返回true
true 轉爲數字是 1 // Number(true) 返回1
false 轉爲數字是 0 // Number(false) 返回0
參考所有隱式轉化規則
九、webstorage
着重點在於sessionstorage與localstorage的數據存儲機制及處理機制。
十、如何使用sessionID判別用戶狀態
將cookie中放入響應頭中攜帶相應sessionID經過post方式向後端發請求，後端返回結果爲用戶獨特的sessionID與前端匹配，則不用建立新的sessionID，倘若不匹配則須要建立一個新的sessionID，歸根結底仍是因爲HTTP的無狀態性，web容器生成一個sessionid來標識用戶，以便獲取該用戶對應的session信息。
後臺生成一個新sessionid的可能緣由：
- 這是一個新用戶的第一次請求
- 後端存在清空session的邏輯
- 前端沒有將sessionid放到cookie或其餘約定的地方傳給後端
- 前端傳了，但後端沒有匹配到對應的sessionid（若是是個分佈式服務，負載均衡後，後端服務沒有作session同步）
十一、OAuth2原理及應用
容許用戶受權第三方移動應用訪問他們存儲在另外的服務提供者上的信息，而不須要將用戶名和密碼提供給第三方移動應用或分享他們數據的全部內容，OAuth2.0是OAuth協議的延續版本，但不向後兼容OAuth 1.0即徹底廢止了OAuth1.0。
應用場景：
原生app受權：app登陸請求後臺接口，爲了安全認證，全部請求都帶token信息，若是登陸驗證、請求後臺數據。
先後端分離單頁面應用（spa）：先後端分離框架，前端請求後臺數據，須要進行oauth2安全認證，好比使用vue、react後者h5開發的app。
流程：
（A）用戶打開客戶端之後，客戶端要求用戶給予受權。
（B）用戶贊成給予客戶端受權。
（C）客戶端使用上一步得到的受權，向認證服務器申請令牌。
（D）認證服務器對客戶端進行認證之後，確認無誤，贊成發放令牌。
（E）客戶端使用令牌，向資源服務器申請獲取資源。
（F）資源服務器確認令牌無誤，贊成向客戶端開放資源。
十二、http://socket.io的前端使用
客戶端和服務器之間的低延遲雙向通訊。客戶端應用程序可使用 Javascript的任何 SocketIO 官方客戶端庫或任何兼容的客戶端來創建與服務器的永久鏈接。
引入http://socket.io的依賴在react框架中進行使用，本身嘗試實現了一個聊天室：
testconnect=()=>{
let socket = sockjs("ws://localhost:3900", {
transports: ['websocket']
})
// /不間斷嘗試重鏈接 socket.on('reconnect_attempt',()=> {
console.log("reconnect")
socket.transports = ['websocket','polling', 'flashsocket'];
});
// 重鏈接時出錯 socket.on('reconnect_error',(attemptNumber)=> {
console.log(attemptNumber)
});
//鏈接成功走這個方法 socket.on('connect',()=>{
console.log(socket.connected)
})
//報錯時走這個方法 socket.on('connect_error', (error) => {
console.log(error)
});
//鏈接存活驗證 socket.on('ping', (error) => {
console.log('ping_include')
});
// 鏈接成功的connect方法 socket.on("connect",function(){
// console.log(socket.broadcast) socket.emit('join',prompt('what is your nickname'));
$('#chat').css('display','block');
socket.on('announcement',(msg)=>{
if(msg){
console.log("announcement did right")
let li = `<li class="announcement">${msg}</li>`
$("#messages").append(li);
}
})
})
// 添加獲取信息的方法
$("#form").submit(()=>{
let inputan =$('#input');
console.log("submit success")
this.addmessage('me',inputan.val()) ;
socket.emit('text',inputan.val());
inputan.attr('value');
inputan.focus();
return false
} )
//不要自執行，要在調用後再執行 socket.on('text',this.addmessage)
}
// 將聊天記錄添加到首頁的每個字段上 addmessage=(from,text)=>{
if(text){
let li = `<li class="message"><b>${from}</b>:${text}</li>`
$("#messages").append(li);
}
}
1三、webpack的做用及核心配置
webpack配置中須要理解幾個核心的概念Entry 、Output、Loaders 、Plugins、 Chunk
Entry：指定webpack開始構建的入口模塊，從該模塊開始構建並計算出直接或間接依賴的模塊或者庫
Output：告訴webpack如何命名輸出的文件以及輸出的目錄
Loaders：因爲webpack只能處理javascript，因此咱們須要對一些非js文件處理成webpack可以處理的模塊，好比sass文件
Plugins：Loaders將各種型的文件處理成webpack可以處理的模塊，plugins有着很強的能力。插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量。但也是最複雜的一個。好比對js文件進行壓縮優化的UglifyJsPlugin插件
Chunk：coding split的產物，咱們能夠對一些代碼打包成一個單獨的chunk，好比某些公共模塊，去重，更好的利用緩存。或者按需加載某些功能模塊，優化加載時間。在webpack3及之前咱們都利用CommonsChunkPlugin將一些公共代碼分割成一個chunk，實現單獨加載。在webpack4 中CommonsChunkPlugin被廢棄，使用SplitChunksPlugin
進階（具有手擼一個loader、plugins的能力）：
1四、==與===的比較，===的使用狀況
===的使用狀況我回答是，通常在比較字符串時來使用。
權威解釋：
1五、閉包的應用場景
函數防抖，經過當即執行函數在循環中的異步執行可以取到正確的值
權威解答：
1六、敏捷開發的所有流程
每次迭代都必須依次完成如下五個步驟。
- 需求分析（requirements analysis）
- 設計（design）
- 編碼（coding）
- 測試（testing）
- 部署和評估（deployment / evaluation）
每一個迭代大約持續2~6周。
1七、webpack+glup/FIS
gulp是基於流的自動化構建工具，但不包括模塊化的功能，若是要用到的話，就須要引入外部文件，好比require.js等；而webpack是自動化模塊打包工具，自己就具備模塊化，而且也具備壓縮合並的功能。
三者的比較
定位不一樣，webpack定位是一個打包工具，模塊化。其實自動化的工具更好用gulp之類解決。fis3直接定位爲一個全功能工具，官方文檔介紹中：解決性能優化，模塊化，自動化，甚至包括代碼規範，部署等問題。
我的喜歡用webpack，能夠更靈活的搭配其它工具使用，且生態系統強大，固然最近比較火的多是rollup，它打包的文件體積更小。glup+webpack自動化部署參考：
1八、git經常使用的基本命令
最最基礎的去參考我本身的文章，進階版看這篇
1九、jar包查看項目進程
到xxx.jar目錄下執行:
nohup java -jar xxx.jar > people.log 2>&1 & -- 運行jar包幷包日誌寫入到people.log中
tail -f people.log --查看運行日誌
20、mvc與mvvm的區別
mvc
Model（模型）
View（視圖）
Controller（控制器）
簡單的理解：視圖請求數據，將請求發送至控制器，控制器再將請求發送給模型，模型去查找數據，找到以後傳給控制器，控制器再傳給視圖進行渲染。
mvvm
Model 表明數據模型
View 表明UI視圖
ViewModel 負責監聽 Model 中數據的改變而且控制視圖的更新(橋樑，能夠理解成mvc中的控制器) 簡單理解：視圖請求數據，將請求發送至控制器，在控制器的兩端具備監聽機制，直接調用模型的數據，一端改變所有改變，利用數據劫持，結合訂閱者和發佈者模式，實現數據的雙向綁定
mvvm優勢
MVVM比MVC精簡不少，不只簡化了業務與界面的依賴，還解決了數據頻繁更新的問題，不用再用選擇器操做DOM元素。由於在MVVM中，View不知道Model的存在，Model和ViewModel也觀察不到View，這種低耦合模式提升代碼的可重用性
雙向綁定的定義
- 通常只有UI表單控件才存在雙向數據綁定，非UI表單控件只有單向數據綁定。
- 單向數據綁定是指：M的變化能夠自動更新到ViewModel，但ViewModel的變化須要手動更新到M（經過給表單控件設置事件監聽）
- 雙向數據綁定是指念：M的變化能夠自動更新到ViewModel，ViewModel的變化也能夠自動更新到M
- 雙向綁定 = 單向綁定 + UI事件監聽。雙向和單向只不過是框架封裝程度上的差別，本質上二者是能夠相互轉換的。
優缺點：在表單交互較多的狀況下，單向數據綁定的優勢是數據更易於跟蹤管理和維護，缺點是代碼量較多比較囉嗦，雙向數據綁定的優缺點和單向綁定正好相反。
MVVM模式在react中的對應關係
- M(odel)：對應組件的方法或生命週期函數中實現的業務邏輯和this.state中保存的本地數據，若是React集成了redux +react-redux，那麼組件中的業務邏輯和本地數據能夠徹底被解耦出來單獨存放當作M層，如業務邏輯放在Reducer和Action中。
- V(iew)-M(odel)：對應組件中的JSX，它實質上是Virtual DOM的語法糖。React負責維護 Virtual DOM以及對其進行diff運算，而React-dom 會把Virtual DOM渲染成瀏覽器中的真實DOM
- View：對應框架在瀏覽器中基於虛擬DOM生成的真實DOM（並不須要咱們本身書寫）以及咱們書寫的CSS
- 綁定器：對應JSX中的命令以及綁定的數據，如className={ http://this.props.xxx }、{http://this.props.xxx}等等
2一、html語義化，css模塊化
就是儘量的理解要表達的內容，選擇適合的標籤，將內容轉換成瀏覽器認識的語言，經過瀏覽器傳達給用戶。從這個角度來講，咱們更像是「翻譯」。
- 除了專業的人外，沒人會去看咱們的標籤是否使用得有語義
- HTML的標籤還不足以表達全部可能的語義
- 語義化會須要增長一些額外的代碼
HTML5新增的幾個標籤，更多的補充了目前HTML標籤語義上的不足，這點也能夠看出語義化是之後發展的一個方向，固然更大的目標是統一的實現標準，語義化只是爲了這個目標所使用的一個方法。這可能須要至關的一段時間，而咱們正經歷着這個過程。
模塊化
模塊化就是爲了減小循環依賴，減小耦合，提升設計的效率。爲了作到這一點，咱們須要有一個設計規則，全部的模塊都在這個規則下進 行設計。良好的設計規則，會把耦合密集的設計參數進行歸類做爲一個模塊，並以此劃分工做任務。而模塊之間彼此經過一個固定的接口（所謂的可見參數）進行交互，除此以外的內部實現（所謂的隱參數）則由模塊的開發團隊進行自由發揮。
程序模塊化的目的：
1.減小循環依賴
2.減小耦合
3.提升設計效率
css模塊化原則
- 分離結構和表現
- 分離容器和內容
2二、標準化的javascript
JavaScript 的核心 ECMAScript 描述了該語言的語法和基本對象；
DOM 描述了處理網頁內容的方法和接口；
BOM 描述了與瀏覽器進行交互的方法和接口。
2三、前端兼容性問題總結
2四、前端性能優化
2五、loadash的使用
2六、前端預處理器sass的使用
Sass 是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎上增長了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更增強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助於更好地組織管理樣式文件，以及更高效地開發項目。
2七、leetcode算法最優解
找不到想要的解答，從這上面搜一下
2八、不瞭解的三種函數寫法
2九、react源碼總結
react在使用時總結不出這麼多優勢，他幫你解決了面試提問的難題：
30、Flex佈局，position，垂直水平居中三種必問前端常識
3一、破碎浮點型數據的解決辦法
過長的純數字數組不能經過Number或者parseInt進行轉化，這樣會產生錯誤，要使用BigInt來解決。想要計算二元運算須要在二元運算的另外一個項上加上n，參考例子與講解均在裏面：
3二、中級前端全部手寫內容
- 防抖、節流
- 深淺拷貝
- 數組亂序、數組去重（各類時間空間複雜度）
- 數組filter
- 數組flat（平展一層到多層）
- 手寫call、bind、apply（及瞭解這三種的區別）
- 八種繼承及各類繼承之間的特色
- 實現instanceof
- 實現new的過程
- lazyman
- jsonp的實現
- 函數的柯力化
- promise、promise.all、promise.retry
(其中大廠不排除讓你手寫ajax的封裝（百度），頭條（promise.retry）有點變1態了)
參考地址：
3三、大廠常問的React全家桶
必須掌握、必須掌握、必須掌握！
react-router：
redux、react-redux:
拓展（強烈建議能手寫出來）、幾家大廠都在問：
- 1. 前端進階必備知識彙總
- 2. 大前端必備知識
- 3. webAPP前端必備知識
- 4. Web前端必備基礎知識點分享
- 5. java進階必備知識
- 6. 中高級前端必看知識點，踏坑之路
- 7. Web前端-CSS必備知識點
- 8. Python快速進階知識點【崗前必備技能】
- 9. 前端進階必備
- 10. 關於前端基礎知識儲備的幾點分享
- 更多相關文章...
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • XSLT - 在客戶端 - XSLT 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • C# 中 foreach 遍歷的用法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端進階必備知識彙總
- 2. 大前端必備知識
- 3. webAPP前端必備知識
- 4. Web前端必備基礎知識點分享
- 5. java進階必備知識
- 6. 中高級前端必看知識點，踏坑之路
- 7. Web前端-CSS必備知識點
- 8. Python快速進階知識點【崗前必備技能】
- 9. 前端進階必備
- 10. 關於前端基礎知識儲備的幾點分享