前言
最近好多小夥伴都跳槽去找工作，我只能在心裡默默的支援他們能找到一份好的工作，這份前端面試大全送給我的小夥伴們，主要說的是前端一些常用的一些知識，說的不對的地方請小夥伴們即使指正出來，自己同時也回顧下這些知識。主要分以下幾個方邊來說：
- css和html
- javascript
- vue
- 微信小程式
css和html
1.Doctype作用？標準模式和相容模式區別。
宣告在HTML文件第一行，告訴瀏覽器用什麼文件標準解析這個文件。DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。
標準模式的排版 和JS運作模式都是以該瀏覽器支援的最高標準執行。在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
2.行內元素有哪些？塊級元素有哪些？
每個元素都有一個diaplay屬性，確定該元素的型別，比如塊級元素預設值就是block,行內元素就是inline
行內元素：span a u i b img input slect。。。
塊級元素：div p ul li ol h1 h2。。。
3.引入樣式link和import區別
link屬於html直接是在html中引入，import在css中引入只能引入css
link在直接引入頁面的時候就就已經引入了，import需要在引入css的時候才引入，效能比較低。
import是CSS2.1 提出的，只在IE5以上才能被識別，而link是html標籤，無相容問題;
4.HTML5有哪些新特性？如何區分html和html5
html5新增了好多東西比如：
一些語義化標籤 nav header footer
繪圖用到的canvas
用於媒體的video 和 audio 元素
本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失，sessionStorage 的資料在瀏覽器關閉後自動刪除;
表單控制元件，calendar、date、time、email、url、search
區分html5和html：
可以按上文說的doctype區分也可以使用標籤區分
5.html語義化理解:
語義化是html結構更清晰，便於瀏覽器解析，利於SEO搜素，使程式碼更好理解，便於維護
6.不使用borer新建一個1畫素的橫線
<div style="height: 1px;background:red;overflow:hidden;"></div複製程式碼7.兩個盒子用一個css屬性實現讓一個盒子在左邊一個盒子在右邊並且在一行
<div style="width: 100px;height: 100px;background:red;float: right;"></div>
<div style="width: 100px;height: 100px;background:blue;"></div>複製程式碼8.css垂直和水平居中方法
使用position定位：好處不用管盒子大小，就是不固定寬高
{
position: absolute;;
top: 50%;
left: 50%;
margin-left: -50%;
margin-top: -50%;
}複製程式碼也可以使用calc計算出需要定位的值，需要知道寬高
還可以使用transform: translate(-50%, -50%); 不需要知道寬高
固定寬高的話也可以使用定位
{
position: absolute;;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}複製程式碼也可以使用flex
{
display: flex;
justify-content: center;
align-items: center;
}複製程式碼或者使用最新的grid，父元素必須加grid屬性
{
align-self: center;
justify-self: center;
}
複製程式碼還有一種使用table居中缺點也是父盒子寬高為100%必須加display:table;
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
複製程式碼8.清除浮動
清除浮動最好的方法就是使用:after
:after {
clear:both;
content:'';
display:block;
width:0;
height:0;
}複製程式碼也可以先新建一個空元素來清除浮動
.clear{
clear:both;
height:0;
line-height:0;
font-size:0;
}複製程式碼還可以給父元素增加overflow屬性
.over-flow{ overflow:auto; zoom:1; }//zoom:1;是在處理相容性問題複製程式碼9.介紹一下css盒模型
分為兩種：ie盒模型和w3c盒模型
盒模型：內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
區別：IE的content部分把 border 和 padding計算了進去;
10.position有幾個值
- absolute 生成絕對定位的元素，相對於值不為 static的第一個父元素進行定位。
- fixed 絕對定位，相對於瀏覽器視窗定位
- reactive 相對定位，對於正常元素定位
- static 預設值，沒有定位
- inherit 從父元素繼承position屬性
11.css建立三角形
{
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}複製程式碼12.為什麼要初始化css樣式
因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異
最簡單的初始化方法： * {padding: 0; margin: 0;} （強烈不建議）
13.css新增偽類元素
:nth-child :after :befor :checked :disable
14.css新特性
transform ：translate scale skew rotate； transtion ；animation ；shadow ；border-radius
javascript
15.js基本型別
js有五種基本型別：boolean string number null undefined 一種特殊型別：object
新增了Symbol(建立後獨一無二且不可變的資料型別 )
16.js基本規範
不在同一行宣告多個變數 不用全域性函式 switch必須有default
17.定義函式
函式宣告 function name（）{}
函式表示式 var name = function（）{}
new例項化（不常用）
18.原型鏈
- 簡單來說就是每個物件對會在內部初始化一個屬性 prototype 如果這個物件不存在這個屬性 會在prototype上找 這個prototype又會自己往上找 prototype
19.js繼承
- 建構函式
- 優點：實現多個繼承，實現子類可以向父類傳遞引數
- 缺點：無法實現複用影響效能，只能繼承父類方法 不能繼承原型上的
- 原型鏈繼承
- 優點：實現簡單，父類新增原型方法子類可訪問
- 缺點：無法實現多個繼承 創造子類例項時無法向父類建構函式傳參
- 拷貝繼承
- 優點：支援多繼承
- 缺點：效率低 記憶體佔用高
- 例項繼承
- 優點：不限制呼叫方式
- 缺點：不支援多繼承
- 組合繼承
- 優點：可傳參，可複用，可以繼承原型鏈上的東西 既是子類例項又是父類例項
- 缺點：呼叫了兩次父類建構函式 多耗費了一點記憶體
- 寄生式組合繼承
- 優點：完美
- 缺點：實現複雜
20.js作用域鏈
作用域鏈的作用是保證執行環境裡有權訪問的變數和函式是有序的，作用域鏈的變數只能向上訪問，變數訪問到 window 物件即被終止，作用域鏈向下訪問變數是不被允許的。
21.this 指向
this 指向直接呼叫者
this 指向 new 出來的物件
在事件中 this 指向這個事件的物件 IE 中的 attachEvent 的 this 指向全域性 window
this 指的當前物件
22.null 與 undefined
null 表示一個物件被定義了，值為“空值”；
undefined 表示不存在這個值。
null==undefined true
23.eval
解析字串，應該避免使用eval，不安全，非常耗效能（2次，一次解析成js語句，一次執行），也可以把 JSON 字串轉換為 JSON 物件
24.window 物件和 document 物件
- window 物件是指瀏覽器開啟的視窗。
- documen 物件是 Documentd 物件（HTML 文件物件）的一個只讀引用，window 物件的一個屬性
25.什麼是閉包？閉包特性
閉包是指有權訪問另一個函式作用域中變數的函式，建立閉包的最常見的方式就是在一個函式內建立另一個函式，通過另一個函式訪問這個函式的區域性變數,利用閉包可以突破作用鏈域，將函式內部的變數和方法傳遞到外部。
特性：
- 函式內再巢狀函式
- 內部函式可以引用外層的引數和變數
- 引數和變數不會被垃圾回收機制回收
26.什麼是 js 嚴格模式
嚴格模式就是在 js 程式碼前加 use strict 讓 Javascript 在更嚴格的條件下執行,使 JS 編碼更加規範化的模式,消除 Javascript 語法的一些不合理、不嚴謹之處，減少一些怪異行為。
27.如何建立 ajax
/* 封裝ajax函式
* @param {string}opt.type http連線的方式，包括POST和GET兩種方式
* @param {string}opt.url 傳送請求的url
* @param {boolean}opt.async 是否為非同步請求，true為非同步的，false為同步的
* @param {object}opt.data 傳送的引數，格式為物件型別
* @param {function}opt.success ajax傳送並接收成功呼叫的回撥函式
*/
function ajax(opt) {
opt = opt || {};
opt.method = opt.method.toUpperCase() || 'POST';
opt.url = opt.url || '';
opt.async = opt.async || true;
opt.data = opt.data || null;
opt.success = opt.success || function () {};
var xmlHttp = null;
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}var params = [];
for (var key in opt.data){
params.push(key + '=' + opt.data[key]);
}
var postData = params.join('&');
if (opt.method.toUpperCase() === 'POST') {
xmlHttp.open(opt.method, opt.url, opt.async);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
xmlHttp.send(postData);
}
else if (opt.method.toUpperCase() === 'GET') {
xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
xmlHttp.send(null);
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
opt.success(xmlHttp.responseText);
}
};
}
複製程式碼28.同步和非同步區別
同步：瀏覽器訪問伺服器請求，使用者看得到頁面重新整理，重新發請求,等請求完，頁面重新整理，新內容出現，使用者看到新內容,進行下一步操作
非同步：瀏覽器訪問伺服器請求，使用者正常操作，瀏覽器後端進行請求。等請求完，頁面不重新整理，新內容也會出現，使用者看到新內容
29.操作dom節點
- creatElement（）具體元素
- creatTextNode（）建立文字節點
- appendChild（）新增
- removeChild（）刪除
- replaceChild（）替換
- insertChild（）插入
30.陣列的方法
push（）pop（）unshift（）shift（）splice（）indexOf（）sort（）concat（）jion（）slice（）reverse（） includes（）
31.更改this指向
.call() .apply() .bind()
32.jquery.extend 與 jquery.fn.extend的區別？
jquery.extend 為jquery 類新增類方法，可以理解為新增靜態方法
jquery.fn.extend: 原始碼中 jquery.fn = jquery.prototype，所以對 jquery.fn 的擴充套件，就是為jquery 類新增成員函式 使用：
jquery.extend擴充套件，需要通過 jquery 類來呼叫，而 jquery.fn.extend 擴充套件，所有jquery例項都可以直接呼叫
33.作用域
作用域 每個方法都是作用域最大的是 window
作用域的方法和屬性只能在當前作用域使用
查詢作用域 是從當前查詢 再去上一級查詢
34.同源策略
同域名 同埠 同協議
35.http狀態碼有那些？分別代表是什麼意思？
100 Continue 繼續，一般在傳送post請求時，已傳送了http header之後服務端將返回此資訊，表示確認，之後傳送具體引數資訊
200 OK 正常返回資訊
201 Created 請求成功並且伺服器建立了新的資源
202 Accepted 伺服器已接受請求，但尚未處理
301 Moved Permanently 請求的網頁已永久移動到新位置。
302 Found 臨時性重定向。
303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI。
304 Not Modified 自從上次請求後，請求的網頁未修改過。
400 Bad Request 伺服器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。
401 Unauthorized 請求未授權。
403 Forbidden 禁止訪問。
404 Not Found 找不到如何與 URI 相匹配的資源。
500 Internal Server Error 最常見的伺服器端錯誤。
503 Service Unavailable 伺服器端暫時無法處理請求（可能是過載或維護）
36.一個頁面從輸入 URL 到頁面載入顯示完成，這個過程中都發生了什麼？（流程說的越詳細越好）
1、瀏覽器會開啟一個執行緒來處理這個請求，對 URL 分析判斷如果是 http 協議就按照 Web 方式來處理;
2、呼叫瀏覽器核心中的對應方法，比如 WebView 中的 loadUrl 方法;
3、通過DNS解析獲取網址的IP地址，設定 UA 等資訊發出第二個GET請求;
4、進行HTTP協議會話，客戶端傳送報頭(請求報頭);
5、進入到web伺服器上的 Web Server，如 Apache、Tomcat、Node.JS 等伺服器;
6、進入部署好的後端應用，如 PHP、Java、JavaScript、Python 等，找到對應的請求處理;
7、處理結束回饋報頭，此處如果瀏覽器訪問過，快取上有對應資源，會與伺服器最後修改時間對比，一致則返回304;
8、瀏覽器開始下載html文件(響應報頭，狀態碼200)，同時使用快取;
9、文件樹建立，根據標記請求所需指定MIME型別的檔案（比如css、js）,同時設定了cookie;
10、頁面開始渲染DOM，JS根據DOM API操作DOM,執行事件繫結等，頁面顯示完成。
vue
37.對於mvvm的理解
MVVM 是 Model-View-ViewModel 的縮寫。
- Model 代表資料模型，也可以在 Model 中定義資料修改和操作的業務邏輯。
- View 代表UI 元件，它負責將資料模型轉化成 UI 展現出來。
- ViewModel 監聽模型資料的改變和控制檢視行為、處理使用者互動，簡單理解就是一個同步View 和 Model 的物件，連線 Model 和 View。
ViewModel 通過雙向資料繫結把 View 層和 Model 層連線了起來，而 View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯，不需要手動操作DOM, 不需要關注資料狀態的同步問題，複雜的資料狀態維護完全由 MVVM 來統一管理。
38.vue 生命週期
- beforeCreate（建立前） 在資料觀測和初始化事件還未開始
- created（建立後） 完成資料觀測，屬性和方法的運算，初始化事件，$el屬性還沒有顯示出來
- beforeMount（載入前） 在掛載開始之前被呼叫，相關的render函式首次被呼叫。例項已完成以下的配置：編譯模板，把data裡面的資料和模板生成html。注意此時還沒有掛載html到頁面上。
- mounted（載入後） 在el 被新建立的 vm.$el 替換，並掛載到例項上去之後呼叫。例項已完成以下的配置：用上面編譯好的html內容替換el屬性指向的DOM物件。完成模板中的html渲染到html頁面中。此過程中進行ajax互動。
- beforeUpdate（更新前） 在資料更新之前呼叫，發生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。
- updated（更新後） 在由於資料更改導致的虛擬DOM重新渲染和打補丁之後呼叫。呼叫時，元件DOM已經更新，所以可以執行依賴於DOM的操作。然而在大多數情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限迴圈。該鉤子在伺服器端渲染期間不被呼叫。
- beforeDestroy（銷燬前） 在例項銷燬之前呼叫。例項仍然完全可用。
- destroyed（銷燬後） 在例項銷燬之後呼叫。呼叫後，所有的事件監聽器會被移除，所有的子例項也會被銷燬。該鉤子在伺服器端渲染期間不被呼叫。
39.Vue 實現資料雙向繫結的原理：Object.defineProperty（）
vue 實現資料雙向繫結主要是：採用資料劫持結合釋出者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在資料變動時釋出訊息給訂閱者，觸發相應監聽回撥。當把一個普通 Javascript 物件傳給 Vue 例項來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉為 getter/setter。使用者看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。
vue 的資料雙向繫結，將 MVVM 作為資料繫結的入口，整合 Observer，Compile和Watcher三者，通過 Observer 來監聽自己的 model 的資料變化，通過 Compile 來解析編譯模板指令（vue中是用來解析 {{}}），最終利用 watcher 搭起 observer 和 Compile 之間的通訊橋樑，達到資料變化 —>檢視更新；檢視互動變化（input）—>資料 model 變更雙向繫結效果。
39.Vue元件間的引數傳遞
- 父元件與子元件傳值
- 父元件傳給子元件：子元件通過props方法接受資料;
- 子元件傳給父元件：$emit方法傳遞引數
- 非父子元件間的資料傳遞，兄弟元件傳值
- eventBus，就是建立一個事件中心，相當於中轉站，可以用它來傳遞事件和接收事件。專案比較小時，用這個比較合適。
- 使用vuex也可以
40.Vue的路由實現：hash模式 和 history模式
- hash模式：在瀏覽器中符號“#”，#以及#後面的字元稱之為 hash，用window.location.hash 讀取；
- 特點：hash 雖然在URL中，但不被包括在 HTTP 請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重載入頁面。
- history模式：history 採用 HTML5 的新特性；且提供了兩個新方法：pushState（），replaceState（）可以對瀏覽器歷史記錄棧進行修改，以及 popState 事件的監聽到狀態變更。
41.Vue 與 React 的區別？
- 相同點：
- 不同點：
42.vue 路由的鉤子函式
首頁可以控制導航跳轉，beforeEach，afterEach 等，一般用於頁面 title 的修改。一些需要登入才能調整頁面的重定向功能。
beforeEach 主要有3個引數 to，from，next：
- to：route即將進入的目標路由物件，
- from：route當前導航正要離開的路由
- next：function一定要呼叫該方法resolve這個鉤子。執行效果依賴next方法的呼叫引數。可以控制網頁的跳轉。
43.vuex 是什麼？怎麼使用？哪種功能場景使用它？
只用來讀取的狀態集中放在 store 中； 改變狀態的方式是提交 mutations，這是個同步的事物； 非同步邏輯應該封裝在 action 中。
在 main.js 引入 store，注入。新建了一個目錄 store，….. export 。
場景有：單頁應用中，元件之間的狀態、音樂播放、登入狀態、加入購物車
- state
- mutations
- getters
- action
微信小程式
44.微信小程式有幾個檔案
WXML （WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎元件、事件系統，可以構建出頁面的結構。內部主要是微信自己定義的一套元件。- WXSS (WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的元件樣式，
- js 邏輯處理，網路請求
- json 小程式設定，如頁面註冊，頁面標題及 tabBar。
- app.json 必須要有這個檔案，如果沒有這個檔案，專案無法執行，因為微信框架把這個作為配置檔案入口，整個小程式的全域性配置。包括頁面註冊，網路設定，以及小程式的window 背景色，配置導航條樣式，配置預設標題。
- app.js 必須要有這個檔案，沒有也是會報錯！但是這個檔案建立一下就行 什麼都不需要寫以後我們可以在這個檔案中監聽並處理小程式的生命週期函式、宣告全域性變數。
- app.wxss 配置全域性 css
45.微信小程式元件封裝
可以看我上篇文章微信小程式元件的封裝：juejin.im/post/5afcee…
46.微信小程式怎樣跟事件傳值
給 HTML 元素新增 data-*屬性來傳遞我們需要的值，然後通過 e.currentTarget.dataset 或onload的param引數獲取。但 data -名稱不能有大寫字母和不可以存放物件
47.小程式的 wxss 和 css 有哪些不一樣的地方？
wxss的圖片引入需使用外鏈地址；
沒有 Body；樣式可直接使用 import 匯入
48.小程式關聯微信公眾號如何確定使用者的唯一性？
使用 wx.getUserInfo 方法 withCredentials 為 true 時 可獲取 encryptedData，裡面有 union_id。後端需要進行對稱解密
49.微信小程式怎樣獲取使用者資訊
微信小程式獲取使用者資訊需要使用者授權，首先使用者登陸微信小程式使用 wx.login 這個 API，然後通過 wx.getUserInfo 這個 API 在拿到使用者資訊
50.微信小程式與vue區別
- 生命週期不一樣，微信小程式生命週期比較簡單
- 資料繫結也不同，微信小程式資料繫結需要使用{{}}，vue 直接:就可以
- 顯示與隱藏元素，vue中，使用 v-if 和 v-show 控制元素的顯示和隱藏，小程式中，使用wx-if 和h idden 控制元素的顯示和隱藏
- 事件處理不同，小程式中，全用 bindtap(bind+event)，或者 catchtap(catch+event) 繫結事件,vue：使用 v-on:event 繫結事件，或者使用@event 繫結事件。
- 資料雙向繫結也不也不一樣在 vue 中,只需要再表單元素上加上 v-model,然後再繫結 data中對應的一個值，當表單元素內容發生變化時，data中對應的值也會相應改變，這是 vue 非常 nice 的一點。微信小程式必須獲取到表單元素，改變的值，然後再把值賦給一個 data中宣告的變數。
取值也不一樣，小程式中，通過 this.data.reason 取值，vue 中，通過 this.reason 取值
父子元件間的通訊也不同
本文章參考資料：segmentfault.com/a/119000001…
非常感謝上邊那位作者。
另外我把專案放到了github上邊，希望小哥哥小姐姐們多多點贊，多多支援，有什麼疑問可以在github上問我，謝謝大家閱讀本文章。
瞭解掘金秋招求職徵文活動更多資訊?秋招求職時，寫文就有好禮相送 | 掘金技術徵文