從零開始的前端築基之旅(面試必備，持續更新～)

最近忽然有些不安，不少東西看過是看過，可是終歸不屬於本身，過一陣子也就忘了。前陣子面試了幾我的，發現對於不少知識點，都只是看過、聽過、大概能說幾句。想了一段時間，決定總結出本身的東西整理的結果是很欣慰的，發現了不少以爲本身知道但其實真的不知道的知識點。

本文是先整理出js的基礎知識，面向初學者和即將面試的人羣，我但願給大家的是魚竿，能夠拿來釣各類面試官，固然，這須要我再努力一把，給出好魚竿。

若是你收穫了新的知識，歡迎點贊關注評論，這是對做者最大的鼓勵～

前端路漫漫，與諸君共勉！

目錄(就是目錄)：

以 標題+摘要 的方式羅列，具體內容點擊標題查看

代碼規範

論如何優雅的寫出不會捱揍的代碼

寫代碼，必定要有良好的編程習慣。若是實在寫很差怎麼辦呢

1. No Code

   No code is the best way to write secure and reliable applications. Write nothing; deploy nowhere.

2. 謝同事不殺之恩，平時多投喂些零食。

html

談談html 語義化

語義元素能夠清楚地向瀏覽器和開發者描述其意義。即元素自己傳達了關於標籤所包含內容類型的一些信息。

爲何要語義化？

1. 頁面結構: 使頁面沒有css的狀況下，也可以呈現出很好的內容結構
2. 有利於SEO: 爬蟲依賴標籤來肯定關鍵字的權重，所以能夠幫助爬蟲抓取更多的有效信息
3. 提高用戶體驗： 例如title、alt能夠用於解釋名稱或者解釋圖片信息，以及label標籤的靈活運用。
4. 便於團隊開發和維護: 語義化使得代碼更具備可讀性，讓其餘開發人員更加理解你的html結構，減小差別化。
5. 方便其餘設備解析: 如屏幕閱讀器、盲人閱讀器、移動設備等，以有意義的方式來渲染網頁。

js基礎

朝花夕拾，從新介紹javascript類型

任何編程語言都不可缺乏的組成部分——「類型」。avaScript 是一種弱類型或者說動態語言。這意味着你不用提早聲明變量的類型，在程序運行過程當中，類型會被自動肯定。

提問：0.1 + 0.2 === 0.3的結果是什麼？那0.1 + 0.3 === 0.4的結果呢？

初學者不容錯過的雙等(==)小知識

提問： 1 === true的結果是什麼？ 那麼 2 === true 的結果呢？

Clone：你真的知道深淺麼？

數據分爲基本數據類型(String, Number, Boolean, Null, Undefined，Symbol)和對象數據類型。

一、基本數據類型的特色：直接存儲在棧(stack)中的數據

二、引用數據類型的特色：存儲的是該對象在棧中引用，真實的數據存放在堆內存裏
en。。。上面這兩句嚴格來講，是錯的

朝花夕拾，從新介紹繼承與原型鏈

只有對象類型纔有繼承與原型概念，不斷向上追溯的原型共同組成了原型鏈

看完就能搞懂的this指向及箭頭函數的講解～

與其餘語言相比，函數的 this 關鍵字在 JavaScript 中的表現略有不一樣。this指當前執行代碼的環境對象，函數的調用方式決定了this的值。

apply、call、bind的區別與精簡實現

• apply() 方法接收一個指定的this值和一個包含多個參數的數組來調用一個函數。
• call() 方法接收一個指定的 this 值和一個參數列表來調用一個函數。
• bind() 方法建立一個新的函數，在 bind() 被調用時，這個新函數的 this 被指定爲 bind() 的第一個參數，而其他參數將做爲新函數的參數，供調用時使用

使用 call 和 apply 函數的時候要注意，若是傳遞給 this 的值不是一個對象...

讓人恍然大悟的詞法做用域及做用域鏈講解

做用域是指程序源代碼中定義變量的區域。做用域規定了如何查找變量，也就是肯定當前執行代碼對變量的訪問權限。

JavaScript 採用詞法做用域(lexical scoping)，也就是靜態做用域。代碼一旦寫好，不用執行， 做用範圍就已經肯定好了，這個就是所謂的詞法做用域。

簡單介紹的執行上下文和執行棧

執行上下文是評估和執行 JavaScript 代碼的環境的抽象概念。Javascript 代碼都是在執行上下文中運行。

執行棧，是一種擁有 LIFO（後進先出）數據結構的棧，被用來存儲代碼運行時建立的全部執行上下文。

JavaScript 的可執行代碼(executable code)的類型只有三種，全局代碼、函數代碼、eval代碼。對應着，JavaScript 中有三種執行上下文類型。

你可能不知道的變量提高

實際上， let / const 也存在變量提高 。

五百字的閉包詳解與一千字的使用場景

• 閉包就是內部函數，咱們能夠經過在一個函數內部或者 {} 塊裏面定義一個函數來建立閉包。閉包能夠訪問外部做用域，即便這個外部做用域已經執行結束。
• 閉包在沒有被外部使用的狀況下，隨執行結束銷燬
• 閉包的外部做用域是在其定義的時候已決定，而不是執行的時候。

看完必須dei懂的事件循環/event loop講解

javascript是一門單線程語言，在最新的HTML5中提出了Web-Worker，但javascript是單線程這一核心仍未改變，無論誰寫的代碼，都得一句一句的來執行。 事件循環，能夠理解爲實現異步的一種方式，用來協調用戶交互，腳本，渲染，網絡這些不一樣的任務。

懶人整理的js函數式編程講解

• 函數式編程是一種編程範型，它將電腦運算視爲數學上的函數計算，而且避免使用程序狀態以及易變對象。
• 函數式編程更增強調程序執行的結果而非執行的過程，倡導利用若干簡單的執行單元讓計算結果不斷漸進，逐層推導複雜的運算，而不是設計一個複雜的執行過程。
• 函數式編程的思惟過程是徹底不一樣的，它的着眼點是函數，而不是過程，它強調的是如何經過函數的組合變換去解決問題，而不是我經過寫什麼樣的語句去解決問題

前端領域，咱們能看到不少函數式編程的影子：ES6 中加入了箭頭函數，Redux 引入 Elm 思路下降 Flux 的複雜性，React16.6 開始推出 React.memo()，使得 pure functional components 成爲可能，16.8 開始主推 Hook，建議使用 pure function 進行組件編寫……

能夠不會用但你必需要了解的Web Worker詳解

Web Worker (工做線程) 是 HTML5 中提出的概念，它讓咱們能夠在頁面運行的 JavaScript 主線程中加載運行另外單獨的一個或者多個 JavaScript 線程；

Web Worker 提供的多線程編程能力與們傳統意義上的多線程編程(Java、C++ 等)不一樣，主程序線程和 Worker 線程之間，Worker 線程之間，不會共享任何做用域或資源，它們間惟一的通訊方式就是一個基於事件監聽機制的 message。

未完待續

後續還會花費一到兩週陸續補充一些js基礎知識，而後就會寫css部分，
若是能夠，請儘可能收藏關注，這是對個人最大承認。能力有限，若是你有好的知識點或者不一樣的意見，歡迎在下方評論，我會及時跟進。