求職季，前端面試送給你|掘金技術徵文

時間 2019-11-16

原文原文鏈接

前言

最近好多小夥伴都跳槽去找工做，我只能在內心默默的支持他們能找到一份好的工做，這份前端面試大全送給個人小夥伴們，主要說的是前端一些經常使用的一些知識，說的不對的地方請小夥伴們即便指正出來，本身同時也回顧下這些知識。主要分如下幾個方邊來講：javascript

css和html
javascript
vue
微信小程序

css和html

1.Doctype做用？標準模式和兼容模式區別。

聲明在HTML文檔第一行，告訴瀏覽器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。css

標準模式的排版和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。html

2.行內元素有哪些？塊級元素有哪些？

每一個元素都有一個diaplay屬性，肯定該元素的類型，好比塊級元素默認值就是block,行內元素就是inline前端

行內元素：span a u i b img input slect。。。vue

塊級元素：div p ul li ol h1 h2。。。html5

3.引入樣式link和import區別

link屬於html直接是在html中引入，import在css中引入只能引入cssjava

link在直接引入頁面的時候就就已經引入了，import須要在引入css的時候才引入，性能比較低。react

import是CSS2.1 提出的，只在IE5以上才能被識別，而link是html標籤，無兼容問題;jquery

4.HTML5有哪些新特性？如何區分html和html5

html5新增了好多東西好比：git

一些語義化標籤 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 到頁面加載顯示完成，這個過程當中都發生了什麼？（流程說的越詳細越好）

一、瀏覽器會開啓一個線程來處理這個請求，對 URL 分析判斷若是是 http 協議就按照 Web 方式來處理;

二、調用瀏覽器內核中的對應方法，好比 WebView 中的 loadUrl 方法;

三、經過DNS解析獲取網址的IP地址，設置 UA 等信息發出第二個GET請求;

四、進行HTTP協議會話，客戶端發送報頭(請求報頭);

五、進入到web服務器上的 Web Server，如 Apache、Tomcat、Node.JS 等服務器;

六、進入部署好的後端應用，如 PHP、Java、JavaScript、Python 等，找到對應的請求處理;

七、處理結束回饋報頭，此處若是瀏覽器訪問過，緩存上有對應資源，會與服務器最後修改時間對比，一致則返回304;

八、瀏覽器開始下載html文檔(響應報頭，狀態碼200)，同時使用緩存;

九、文檔樹創建，根據標記請求所需指定MIME類型的文件（好比css、js）,同時設置了cookie;

十、頁面開始渲染DOM，JS根據DOM API操做DOM,執行事件綁定等，頁面顯示完成。

vue

37.對於mvvm的理解

MVVM 是 Model-View-ViewModel 的縮寫。

Model 表明數據模型，也能夠在 Model 中定義數據修改和操做的業務邏輯。
View 表明UI 組件，它負責將數據模型轉化成 UI 展示出來。
ViewModel 監聽模型數據的改變和控制視圖行爲、處理用戶交互，簡單理解就是一個同步View 和 Model 的對象，鏈接 Model 和 View。

在 MVVM 架構下，View 和 Model 之間並無直接的聯繫，而是經過 ViewModel 進行交互，Model 和 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 的區別？

相同點：

React 採用特殊的 JSX 語法，Vue.js 在組件開發中也推崇編寫 .vue 特殊文件格式，對文件內容都有一些約定，二者都須要編譯後使用；中心思想相同：一切都是組件，組件實例之間能夠嵌套；都提供合理的鉤子函數，可讓開發者定製化地去處理需求；都不內置列數 AJAX，Route 等功能到核心包，而是以插件的方式加載；在組件開發中都支持 mixins 的特性。

不一樣點：

React 採用的 Virtual DOM 會對渲染出來的結果作髒檢查；Vue.js 在模板中提供了指令，過濾器等，能夠很是方便，快捷地操做 Virtual DOM。

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

Vuex 使用單一狀態樹,即每一個應用將僅僅包含一個 store 實例，但單一狀態樹和模塊化並不衝突。存放的數據狀態，不能夠直接修改裏面的數據。

mutations

mutations 定義的方法動態修改Vuex 的 store 中的狀態或數據。

getters

相似 vue 的計算屬性，主要用來過濾一些數據。

action

actions 能夠理解爲經過將mutations裏面處裏數據的方法變成可異步的處理數據的方法，簡單的說就是異步操做數據。view 層經過 store.dispath 來分發 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上問我，謝謝你們閱讀本文章。

項目地址：github.com/Mr-MengBo/F…

瞭解掘金秋招求職徵文活動更多信息👉秋招求職時，寫文就有好禮相送 | 掘金技術徵文